Build Your Own Business Website header image

Custom Front Page Loop that Displays One Post from Each Category – Part 8 – Call the jQuery Script

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the eighth in a short series on creating a custom home page that will display the first post from each category and implement the jCapSlide jQuery plugin. In this part we discuss how to call the jQuery plugin from within our page.

Video Transcript

Rick: Then step 2 is actually calling that script and that’s what I’ve done right here. If we ignore all the green stuff for just a moment you know, what I’ve done I placed this HTML script tag in and what it says is you know, it’s going to be inserting javascript and this is telling it its location. And the location is in the Thesis custom folder, this is a Thesis constant. And so, rather than writing out the whole URL, which in this case would be http://laurraine.byobtutorial.com/wpcontent/themes/thesis181/custom. Rather than doing that, we just say echo the Thesis custom folder and that pulls this Thesis constant in which takes you all the way to /custom and then without making it specific to this site. So you can take this very same code and you can use it on your site and it’ll work exactly the same way.

And then there’s our scripts folder that we created and then there’s the jquery.capslide.js file that’s inside the scripts folder. So this is how we call it and what we do is, we call it and add it to the very bottom of the page. So the add action was Thesis hook after HTML, right? And that’s going to call it to the very bottom of the page which is where we want it. Okay?

Laurraine: Oh I thought those things were always supposed to be at the top of the page.

Rick: No actually, that’s not good practice. No, you know there are some things that really require it but in WordPress, what you’re supposed to do is you’re supposed to call your jQuery at the bottom of the page because what happens is the entire processing your page grinds to a halt while it waits for that jQuery to do its thing. So when you’re implementing a jQuery plugin in WordPress, the way to do that, unless you’re inside of a plugin or something, which again, there’s another way of doing it inside of a plugin. But since we’re not, since we’re creating our own function for this, the way to do that is not call it inside the head because that just slows the page load down. What we do is we create… we call it at the bottom and then we use this document ready function. So what happens is the rest of the page loads and as soon as the page is loaded and ready then it runs this function.

And so, when you look at their source code, they don’t have document ready function in their stuff, right? But this is actually the right way to do it inside of WordPress is to use the document ready function to initialize your jQuery and to do that… well, at the beginning of each function.

Laurraine: Okay, okay.

Rick: You know, there could be several depending upon what you’re doing. You might have you know, other document ready function down below this for some other jQuery thing. But the document ready function means it waits til… well, it loads as soon as the page is ready to load.

And then the other thing you have to do in WordPress is you have to use safe mode for jQuery. And if we go back and we look at the source and look at the jQuery they put in, now see they put this down on the bottom too in their source. But they’re using this little dollar sign right here. Well, that is a shortcut that saves some typing but that guarantees conflicts in WordPress. So WordPress requires jQuery to run in what’s called safe mode and that means you don’t use the dollar sign to indicate that it’sjavascript. You use jQuery instead of the dollar sign. Now the dollar sign is set aside for plain vanilla javascript. And the thing is that it’s very common in a WordPress site for there to be standard javascript, jQuery and moo tools or some other javascript framework all working inside the same site. And unless you’re a programmer or unless you’re very careful about what plugins you choose, you don’t have control over which jQuery gets used or which javascript gets used. And so that’s why WordPress requires all of the frameworks to run in safe mode and therefore, you can’t copy this code and paste it into WordPress because this code will fail. What you have to do is this: you have jQuery instead of those dollar signs.

And then the way this works is that we have this… well, the way this particular plugin works is it looks for unique id that has a class of capslide. And so, that’s what we created here, right? We have this div id and it’s unique because it’s got the number and it has a class of…oh, pardon me. Oh I’m sorry. Yes, it does look for that but you can’t tell that from here. You actually have to go back and look at the jQuery code. That is what it looks for. I was trying to figure out a way to do this so that I didn’t have to write one of these statements for each of the individual instances of jQuery. And I probably could actually, now that I say that, I could easily put this in a loop and just substituted out the name here just like I did here. In the next iteration of this, that’s what we’ll do. We’ll put it in a loop.

But having said that you know, you reference the unique id and then you reference capslide which is the name of the plugin. And then these are the options it can take: caption color, background color, overlay color, border and show caption true or false. And I just went with the default behavior that we saw over here on the demonstration site. The one that we were copying is cont without a number, wherever that is. Yeah, this one right here, this is the one we’re copying. And so, this is the one I used and that also gets called at the bottom but you got to make sure you call it after you’ve called your main script, after you’ve called your plugin. If you haven’t done it, if you haven’t called your plugin first, it’s not going to run properly. So you need to call your plugin before you call this.

The other thing is also true. You also need to call jQuery before you call this which is why you use Thesis to call jQuery. Because Thesis makes sure that it adds jQuery to the page before any other scripts get added. And so, if we go over to this page here and we come up… oh, I need to login. WP-admin…

Laurraine: Really unbelievable, I must tell you. How many years have you studied to come up with this?

Rick: Well, I’ve been doing this… well, I’ve been trying to make this my full-time job for about 18 months but I’ve been doing this for… well you know, a couple of years, 2 ½ years… something like that…3 years maybe.

Laurraine: It’s going to take me 50.

Rick: Well you know, back in the early 80’s, back before the PC, when I was making decisions about what college career I wanted to follow, I started off in Computer Science and then decided to go into architecture instead. Because of the time you know, you could imagine working in a big corporate building in Computer Science and I thought I probably want to work on my own, never imagining that you know, we’d have personal computers and all the rest of that stuff. And so then, I changed my mind. It’s not a good time for architecture anyway so if I’m going to be broke and struggling, I might as well do it doing something I’m enjoying so…

Laurraine: Well, you’re very good at that job.

Rick: So then if we go to the page, that’s what it was. If we go to that page, we don’t want to load jQuery on every page because we don’t need it on every page. So what we do is we load it on this individual page and in that case, that’s our homepage. And all we do is come down to this javascript section and include the javascript library and save it. You know, we could actually just as easily taken…if we wanted to… now it’s just as easy to do it as a function so we’re doing it as a function. But we could have taken this you know, we could have actually taken all of this code here and rather than having this function at all, we could have put all of that code in that little box, in this box right here you know. We could put it all here instead which would be okay. The nice thing about it where it is though is that it gives us a chance to use it on more than one page. If we put it here, it would only show up on one page.

But if you did, you’d potentially put it on every page in every box.

Rick: No you could but that is probably the worst kind of programming behavior because you don’t want to repeat code. So you’d only want to write the code once and what you do instead… instead of saying if is front page, you decide what’s the logic behind deciding which pages this stuff is going to get loaded and you would put that logic here whether if is page 1, 2, 3 and 4 or you know, if something. If there’s some rationale for loading this javascript, that’s what you’ll do. And then I don’t know why that silly stuff floats down because it ought to float up and it does here and it seems like I’ve done everything exactly the same.

So the conclusion that I’ve drawn is that there’s some underlying CSS that is preventing this thing from going up instead of going down. And so since it can’t go up, it’s going down and I’m going to working on that until we you know, figure out what that is. But in the meantime you know, you’ll be able to work with this code and start doing the rest of the CSS styling that this wants, right? Because regardless of the fact that it doesn’t slide down, I’m guess that by the time we solve the problem you know, it’s going to be one line of code that we can put in the forum, right? I’m guessing that’s all it’s going to be. I just have to find that line of code.

0 Comments… add one
0 comments… add one

Leave a Comment