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.
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 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.
But if you did, you’d potentially put it on every page in every box.
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.