Build Your Own Business Website header image

Custom Front Page Loop that Displays One Post from Each Category – Part 3 – Create the Custom Loop

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 third in a short series on creating a custom home page that will display the first post from each category. In this third part we create the custom loop that will display the posts. At this stage we want to display the name of the category and the teaser for the post.

Video Transcript

Rick: And in fact, we’ll do that first. We’ll just uncomment out this. This is remove action Thesis hook custom template and then Thesis custom template sample. And essentially what we’ve done with this, that one section of the homepage, is the sample, right? It’s essentially the page loop as a sample and we’re just going to disconnect that from the custom template. And then in its place, we’re going to add this function and this function, first, it asks a question, if is the homepage, as opposed to if is home, right? If we put a if is home, it wouldn’t work because it’s the front page, not the homepage. So if it’s the front page then what we want to do is we want a list of categories.

Now assuming that you have more categories that your 12, for example, I have more categories than these, right? I have number 1 which is uncategorized, as an example. Plus I’ve got… I think number 2 which is something else. I don’t want those categories to show up in this so I’ve just put the category id numbers for each category that I want inside of this function. So it’s byob categories = array 3, 4, 6, 7 and 8. And in order to get your category id numbers, if you come over to your dashboard and go to post categories and then hover over your category name, down here in the bottom, I’m going to just draw a circle here, right? Down here someplace is going to be… the id number… you see it says id 10? Now if your browser doesn’t do that for you, the alternative is simply to edit the… select edit the category and then it will automatically tell you the category id right up here at the top where it says you know, id 10 right there.

And so anyway, that’s how you get your category id numbers and it my case, it was 3 through 10 or 3 through something. Yeah right, I didn’t use 10. I didn’t use that category.

And so the array has each category id in it and then we are going to use this function called get categories and we’re going to take this byob categories and turn it into or put into the argument for the function get categories. And then the argument is going to include these categories essentially. So get categories can take a bunch of different arguments similar to a WP query argument. And in this case, get categories, the only argument we want is just to include these categories and it will exclude every… if you have an include statement or include argument then it will exclude everything but what’s inside the include.

So we are going to use the function get categories to get all of the category data for these categories. So it’s actually an… what it’s going to do is return an array. Categories is going to be an array of all category data for each of the categories.

And so now we’ve put all of the category information for each of these categories in this variable called categories and then we’re going to loop through that variable with this for each statement. And for each statement is a way of looping through an array and doing something on each element of the array. And the way the syntax works is it calls the name of the array and then it assigns each element of the array into this variable name. And now, by convention, I think most people certainly I, in this case, would say for each categories as category. But it could be Bob for that matter, right? It could be for each categories as Bob and then Bob represents the one array element in categories. And in this case that means it’s going to have all of the information about the first category, in the first iteration which would be category 3.

So once we’ve got that information, now we’re going to… this is the loop that produces everything you want to see. You can see it’s not particularly… not a lot of code because what we’re doing here is… the first thing we’re going to do is we’re going to store the category id in a variable called byob category instance. And while we’re at it, we’re going to store the category name in a variable called byob category label. And then we’re going to do our query and our query is going to return one post using the argument post per page = 1. And it’s going to return 1 post from only one category and that one category is this variable, category instance which is this category id up here, right? So we took this category id, put it in that variable, and now, we’re putting that variable here. So it’s going to go to the current category and it’s going to pull the most recent post.

Now the one thing I want you to notice is that this syntax for category n, that is actually 2 underscores, not one. I’m sort of used to these silly things having only one and why this has 2? I do not know but this has screwed me up more than once.

Laurraine: I wouldn’t have noticed.

Rick: Yeah, I didn’t notice. The very first time, I spent hours and hours and hours trying to figure that thing out. But then this morning, when I was working on this, I did it again. I left only 1 thing in and it wasn’t producing the desired result and I did a bunch of little you know, troubleshooting trying to figure it out and I thought, “Well maybe, I just got the syntax wrong.” And I looked at the page on WP query and then it hit me, “Oh yeah, I need the double underscore.” So I’m just going to say that. You may forget it but when you see it then you’ll remember.

Laurraine: Thank you.

Rick: You’re welcome. And then you just have the standard WP query query, right? So my query = new WP query with these arguments and then while my query has the posts, we’re going to echo the category label which is a category name and for the time being, I just put it in h4 and then in h4. And then I’m just going to display the category teaser. So that’s all we’re doing first. We’re going to tear this category teaser apart and rebuild it so that it has the classes that the jQuery plugin requires. But at first, all we want to do is make sure that we get one post per category, it’s the most recent post in that category and we get our category name. So we’ll just save this…

Laurraine: This is beautiful. It’s poetry in action.

Rick: And then we’ll go to our page… no, no. First we need to upload it. That’s what we need to do, upload.

Laurraine: No, you don’t need to repeat each id category manually. It does that on its own?

Rick: Yes because the reason it does it on its own is because I told it which category to use right here, 3, 4, 5…so it’s only going to look at those categories.

Laurraine: Okay.

Rick: So then let’s see, let’s just go to our page, see what happens. Okay so now that original homepage stuff went away and the first category is Bananas, 2nd category is Cherries, 3rd category is Green Apples. Now because of my CSS and because of the way the float works because each of these things is floating left and I didn’t apply a float value to these, since there’s room over here, these headings have floated up here. But you know, that’s an issue we can resolve in CSS. But what we’ve done is essentially, we have captured all of the information that we wanted. I have 6 categories and I have post from each of those categories. And if we look at the category, for example, Bananas, you’ll see that the Viente Coho Banana is the latest post in that category.

0 Comments… add one
0 comments… add one

Leave a Comment