Build Your Own Business Website header image

Custom Front Page Loop that Displays One Post from Each Category – Part 6 – Configure the Loop to Create the Required HTML

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 sixth 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 reconfigure the custom loop so that it formats the output using the html structure we need for the jQuery plugin.

Video Transcript

Okay and the way we do that is here. So the first thing we want to do is we want to just use the Thesis… well actually, yeah. Actually, I played with this around a bit because I thought maybe my Thesis thumbnail was causing a problem and it doesn’t appear to have been that problem. But what we’re doing is getting a hold of the thumbnail that Thesis uses. And so, we’re creating a variable that says post image equals and then we’re getting Thesis post image info and in particular, what we’re getting is the thumbnail information. And then we’re starting to create our structure so we create this HTML structure div class byobcapslide teaser. And then we do the next level in which is div id capslide teaser but this has to be unique because you can’t have more than 1 id on a page with the same name. So then I added this number in this variable called byob teaser count which is going to be capslide teaser 1, capside teaser 2, capside teaser 3 as it loops through this and then again, the class information and then beginning with the image information.

Now this byob teaser count was initialized up here. So I created the variable and I initialized it at 1 and at the bottom of the loop, it increments by 1 so byob teaser count ++ means byob teaser count + 1. So the first time it goes through the loop, when it gets to the end of the loop, it’s going to become a 2. When it comes to the end of the loop, it’ll become a 3 and so on and so forth. And so, that’s how this gets to be unique each time because each time we go through this loop, it increments the name of this id.

So then inside of our image tag, we’re going to grab again this post image and then what we’re doing is we’re grabbing its URL. And then the next thing we do is after we’ve got its URL, we give it a height and a width and a blank alt tag for the moment. And so, now that’s our image tag. And then we come up with that next div that they have, the div class overlay style = display none, so on and so forth. And then come down to the next div which was div class IC caption. And then the next thing we do is we add the p class IC category. Now what they did was they put something in here, right? They put a category name in there and I sort of think that the category name is superfluous so I just left I blank but I didn’t take the code out because I didn’t want the jQuery to be looking something over the class of IC category and not be able to find it. So I left the class in there, I just made it empty. I didn’t put the category name in.

And then we start with a link of the post and I wanted the link of the post to be big so I stuck it in an h3 and then this is the typical way you get a permalink and a title and the name of the post in a you know, in a line. So it’s the href with the permalink and then the title is permanent link to… and actually, I mean to say…I like to change that to read. So when you hover over it, it’ll say read and then it’ll be the name of the post. And then this is actually the link text will be again, the name of the post and then that closes out the link and this closes out the heading.

So then we get down to the text that’s supposed to be in there, right? That was the heading, now we’re down to the text. And this gave me fits for a while today. I learned something that I didn’t know. You know, there are 2 different WordPress functions for this task. One of them is get the excerpt and the other one is the excerpt. Now the excerpt automatically wraps its content… the excerpt is intended to be printed to the screen so it wraps its content in p tags and I need to wrap it in a p tag that says it has a class of IC text. So that didn’t work. But get the excerpt actually gets that excerpt as a string data. It doesn’t do anything wicked with it so it doesn’t give it any p tags and it doesn’t, by definition, print to the screen. So we can say echo this string but first, we wrap it in this p tag above and below.

And then we close out you know, this div which was IC caption and then close out the next div which is the capslider… no, it’s just the capslide teaser 1. We close out those divs and then I want to bring in that category name. So again, we’ve got a href with a category link. Now remember up here, I got that category link, right? byob category link = get category link based on that id. So I got the category link and then the title is view all post in and then there’s the category label. And then the link text is byob category label and then I close out this div, div class byobcapslide teaser, and then I increment the counter. And then this whole process repeats all over again for the next category. So since we have 6 categories, this loop is going to go through 6 times, it’s going to create 6 blocks of HTML like this. Each one of them is going to have a div id within it of capslide teaser 1, 2, 3, 4, 5 or 6.

Okay so before we move further, the other thing I did was I used this standard WordPress function for reducing the link of the excerpt. I just cut it out of the codex actually. What it does is it just reduces… this is by word, not by character but you know, if you add this filter, you could put like 200 here and it would make the excerpt longer and you could put 5 in here and it’ll only give you 5 words. So what I did… what it does by definition is give you 55 words, that’s what happens normally and I just cut it down to 20 with this little thing, this filter.

And so that’s this thing working. Now we’re going to save this and then I’ll show you how jQuery gets brought in to it.

This is beautiful. Absolutely beautiful.

Well, it’ll really be beautiful when it does it what we want it to.

Totally beautiful.

Let’s see, okay. So here we are when it was just teasers. Now we’ll refresh this. Okay and there it is as the code is and so if you hover over now, the stuff drops down, much to my dismay. But when you see hovering down there you know, you can see that there’s the title, read Jafra Oranges and actually, if I just hover over this, you can see view all the posts in Oranges, right? So we’ve got this…essentially, we’ve accomplished with the exception of the jQuery behaving properly, we’ve accomplished what we wanted to accomplish. But I’ve only shown you half of how we did it.

0 Comments… add one
0 comments… add one

Leave a Comment