Build Your Own Business Website header image

Case Study Part 9 – Display Custom Post Types by Category

Difficulty Level -

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 part 9 in our case study demonstrating the use of Thesis as a CMS with a Community News Site. We are using custom post types for each community and have created a community “posts” page where those custom post types will be displayed.

Next we will display our community posts as organized by category.  We have set up traditional categories and assigned them to the custom posts.  We demonstrate in this video how to create custom loops to display the two most recent posts from each category.

Video Transcript

Rick: And we’re going to talk about this… the 9th part of our case study. Now you probably… well, maybe I haven’t noticed… the case study is now showing up in all of its parts or almost all of its parts under Live Answers. We now have you know, a few select this case study community news you know… what have we got showing up here? Oh, Case Study Part 4, 5, 7, 3, 6… isn’t that interesting? I think we mistagged something here because we’re missing parts 1 and 2. Yeah, okay well we’ll fix that but nevertheless until we fix it you can see that there’s 2 sets of tags here that takes you to 7 of the case study parts. Part 8 which we did last week is not up yet and we’re going to do part 9 tonight.

And so just to refresh everybody’s mind, what we are doing is… let’s see. We have this community news site right? And this community news site, we have created 2 different custom post types. We have created the Seattle News post type and we have created the Edmonds News post type. And last week, what we accomplished…or I guess it was a week before… what we accomplished was having created the custom post types and then making sure this page lists all the posts in that custom post type. So this Seattle News page lists all of the posts under Seattle News.

What we’re going to do tonight is we’re going to do what we’ve already done to the Edmonds News and that is we are going to post… the first 2 posts are going to be the most recent posts and then from that point on, they’re going to be categorized posts. So we’re going to show the latest 2 posts from each category and we have a category for businesses and churches and neighborhoods and schools and weekend events. And this is something I did while…it used to be different. We used to have cherries and oranges and apples as categories but what I did was I came in here and created new categories – businesses, churches, neighborhoods, schools, and weekend events. And then we populated our… you know, custom post type with these posts and we categorized each of these things. Weekend events didn’t get categorized so let’s go ahead and edit that to a category. Update and so actually, I don’t think it even got a post image, did it? No. So let’s just add a post image to that so they all look nice. Library, open library and I like that picture so we will make that our post image. Copy, go down here to post image, paste it. Update…so anyway, we have these Edmonds news posts and we have these Seattle News post and each group has been categorized although we need to get rid of these uncategorized once. Okay, there we go. So each of these are now categorized and now that’s what you see if you come over here to the Seattle page.

Okay so what I did in the Edmonds page was I’ve already created the code that shows the first 2 most recent posts and then shows 2 posts from each category and that’s what we’re going to… we’re going to look at that code now.

So that code is here. Now just to refresh your memory here a bit, I was going to show you this work, right? This was the code, last week we weren’t able to see it in action, but this was a code that added that Thesis meta to those custom post types and in fact, let’s just look at that one more time. If we come over here and look at one of those Edmonds news posts, you can see that now we have all of the Thesis meta that can be added you know, that we didn’t tab before. So that code worked, that was this code. Before we did this code, what we had was we had this. We had this loop that asked if it was page 65 which was the Seattle post page, then we would run this query and that query would show 10 posts per page and would show only the post types of Seattle. And then what we did here was we added Thesis teasers as the method of displaying those posts and then we hooked this function after the content of that page. So this was the way that we got essentially a blog page for Seattle. All of Seattle’s posts show up under this blog page.

Well so what we’re going to do though is now, we don’t want to just have this. We do want this facility, we want to have some latest post showing up at the top but we also want categorized posts to show up. And so rather than stringing all of that stuff into a single function, we’re going to split that up into multiple functions. This is going to be a function that is…this recent post will be a function and then the categorized post will become a function. And that’s what I did here in the Edmonds page, you can see the Edmonds page used to look like this except that it said “post type Edmonds”. Now what I’ve done is I have taken all of the code out of this display Edmonds post so…and all I’m doing now is calling separate functions for that. So I have taken this code for Edmonds and created a function called “recent Edmonds posts” which is down here. Created this function “recent Edmonds posts” and then you recognize the arguments here, its posts per page. Instead of 10, I put in 2. I’m going to put in 4 though. We’ll put 4 recent posts in and then the post type was Edmonds and then we had the plain old query exactly as it was before. Actually, let’s just keep it at 2.

And obviously you can… you don’t have to use a teaser to display, right? You can use anything. You could use featured posts for display here if that’s what you wanted. You can display any part of the post out of this query but we…for simplicity’s sake, we’re going to use and stick with the teaser.

So that’s recent Edmonds posts so the first thing it does is it calls recent Edmonds posts, recent Edmonds posts does this and returns back up to here, and then it recalls recent categorized Edmonds posts which is the new function. And the recent categorized Edmonds posts, what this does is first, we have to get all of the categories because we don’t want to just say, it’s these 5 categories. We want this to automatically happen if you continue to add categories. So what we do at the beginning of our function is we get all of the categories except that there’s one category we don’t want to show up and that is the category Uncategorized. So before we… when we get all the categories, we want to exclude the category for uncategorized which is id1. So we create an argument that excludes category id1 so it’s going to get all the categories except for category id1 and it’s going to put all of those categories into a variable called categories.

And then we go into a for while loop…or not, I’m sorry. Not a for while loop, a for each loop. And a for each loop is used for looping through arrays. Now we haven’t really talked about an array but essentially what an array is it’s a collection of name and value pairs. So this array args, args is an array, and that array contains this name and that value. So post per page is the name, 2 is the value, post type is the name, Edmonds is the value. Cat is the name, category instance is the value and we have… so these are name value pairs and that’s what’s in this array. Actually, an array doesn’t have to have name value pairs. A multidimensional array has name value pairs but you know, if we come back over to this, here’s another example of an array that does not have pairs, right. This is just serial array… number after number after number…each one of these is an element in an array and if you wanted to reference this element, it would be…well, we don’t even have a variable, so don’t worry about that. But nevertheless, this is one kind of an array and this another kind of an array. And the reason why this is important is because when you get all of the categories, what you are getting is each category is an array itself. Because what you’re not really… you’re not just getting a list of the categories. What you’re really getting is a category object and that category object has a bunch of pieces to it. And so the category object has a category id, it has a name, it has a URL, it has a slug, it has a description, it has a nice name and in Thesis, it’s going to have other elements to it as well because of all the additional stuff that Thesis adds to the category. So when you say, get categories, what you’re really saying is you know, get all of these groups of data called a category and what we’re going to do is we’re going to go through each category or each group of data and for each one of those categories, we will make this variable, category instance, be equal to the category id and we will make this variable, category label, be equal to category name and then we’ll go through the rest of this process. And so this loops through this array until it’s gone through every category and that’s what this for each loop does.

So for each categories as category and now, each element in categories, it has been separated into category. So this category in this context, stands in for 1 element of this array. So for each categories as category, take part of this category that is the category id and store it in this variable, take part of the category that is the name and store it in category label. And then under your arguments, we’ll just create a new throw away array and here we just want to show the 2 most recent posts. We want to show the post type of Edmonds and then we want to show a specific category and we don’t want to have to know you know, what the category name is in advanced which is why we took category id and put it into a variable. Because what happens then is, category equals that category id… so 2, 3, 4…whatever… we don’t have to know what its name is because or we don’t have to know its category id number because that category id number is going to be different each time we go through this for each loop.

Anyway, we’ve got…put the category id number in there and now that’s our argument for the new query. And so the query then asks you know, show me 2 posts of Edmonds post type of this category and then what’s going to happen is before it shows a teaser, it’s going to write this HTML structure which is a div class teaser’s box which is a Thesis structure. We’re going to borrow some Thesis HTML structure in order to do this and then we’re going to create another class which is this div class = byob categories label or category label ‘coz I want to put the name of the category above each one of these things and then we’re going to take an h4 tag and we’re going to put that category label here. And so that category label is from up here, right? Category name is the category label in that instance and then we close out that HTML. And then we put in our…then, we have our query and it’s going to write 2 teasers ‘coz that’s what we asked for then that’s the end of that while statement and then we close out the div, we close out this teasers box and then we just go through this again until we’ve exhausted all of our categories. So that’s how this thing works.

Now we could actually… what we need to do is, we need… the way this is written, we have to have these things for both cities, right? We could actually do this for… we could actually have one function that worked for both cities where we had a do while statement and we worked our way through the number of post types and so this was a variable and this variable you know, was determined by which page it was on and we could do the same thing here. We could have done that here but I just felt like you know, I just added one layer of complexity to it. So instead of doing that, we’re going to just kind of keep it nice and separate and you can see this in operation again, as I said, back over here. Let’s see, Okay and so Edmonds already has that set up. We’ve got our 2 most recent articles and then 2 articles under the category of business, 2 articles under the category of churches, 2 articles under the category of neighborhoods, 2 articles under schools, and 2 articles under weekend events.

Now let’s see, so how do you assign an order to categories when you do this? Okay well let’s go take a look at the codex for that. You know, it’s not as simple and straightforward as you might like it to be. So for example… what am I looking at here? Yeah, what we really want is the… okay, so this is the get categories statement and you can order by… we could have added order by and what it’s doing right now is it’s ordering… without anything, it’s being ordered by its name and it’s being ordered by… in the ascending order. So it starts with the lowest alphabetical value you know, and goes to the highest alphabetical value. We can also though, I think, order by…oh, isn’t that interesting? So in this case, we can only order then by the order in which they were created which is id or by the slug which is essentially the same as the name or by the number of posts in the category. Or by group… I’m not quite sure what group is. Oh pardon me, I said sort it by name but it doesn’t. It sorts by id as in default. If you want to sort it differently, you have to reorder the posts in this array. So the ability to order posts… I don’t… I think what you would have to do is you would have to get the categories.

First, you’d have to assign an order to the category. So say, a category meta value and say you call it “sort order” and you add that to the categories. And then once you have that meta value assigned to the category, you can enter that meta value in the creation of the category and then what you would have to do is, once you got the categories, you’d have to do another for each loop to reorganize the category. I’m sorry, reorganize the category array so that you could reorganize it by the… oh, I’m not even sure that would work. Yeah, no it would work. It would work fine. No, it wouldn’t necessarily work. Your for each loop would have to be different, I guess. Because you’d have to sort your categories by your meta value which you can’t do in the query and once you sort it by its meta value then you would go through each category and you would…oh, I don’t know. You know, I’d just have to figure it out. I don’t know the answer to that question, Pam. Sorry. I think it’s theoretically possible, it’s way easier to do that with posts and pages you know, because you can sort posts by meta value and so if you can sort your posts by meta value then you can add a post meta that is a sort order and then you can just choose in your query for the posts. You can choose the sort order but…you know what? I take all this back. What would happen… what you could do is you could create another array or you could create another variable and sort this array by your meta value, put it in that variable and then use that variable as the for each loop rather than categories and it would take each category in turn. It wouldn’t sort the categories back and then go through. It would go in turn. So that’s how you would do that. It’s a little more complicated so there’s a bunch of pieces to that. It’s an interesting question though and I think it’s worth you know, potentially pursuing how to organize the categories like that here.

But anyway, what I want to do though before we wrap this up is I want to style this and you know, actually, the other thing I wanted to do was I wanted to bring Douglas online. So Douglas, I’ve just unmuted you. Have you joined us? Are you with us?

Douglas: Yeah, can you hear me?

Rick: Okay. Yeah. So did you understand what I was doing there?

Douglas: Towards the end, you were getting past me.

Rick: Okay, well that’s the…

Douglas: When you were trying to figure out how to sort order…

Rick: Yeah, right and obviously, I hadn’t had the chance to think about it in advanced and it’s a little bit more complicated than you know, my typical stump of the chump question so you know, there’s other stuff I practiced before we have our call in and so I have the chance to make sure the code works before we do it so… I sound more… I sound smoother with it than I would be if I was trying to figure out this stuff on the fly. But…so how would you do this differently?

Douglas: I’m not the expert.

Rick: No, I mean in terms of the function. What function would you do differently than what I just did here? I sort of interpreted what you wanted, right? I had a couple of… the 2 most recent posts and then from that point on, I have you know, 2 posts from each category.

Douglas: That’s as complicated as I want it to go. I think that’s pretty good for me.

Rick: Okay well then the way we do the categories here, I mean the styling, let’s see. Actually, let’s just start with that style. Control C, custom dot… it’s not a dot.

Douglas: Rick, let me back up one… let me back from that actually.

Rick: Sure.

Douglas: At this point, you are going through the custom post types and organizing them on page by category.

Rick: Yes, yes.

Douglas: Would it be possible to have a page that’s kind of a level up from that where posts from both post types are organized by category? So you’re drawing posts from both post types much like churches…

Rick: You mean from both communities?

Douglas: From both communities, exactly.

Rick: Yeah and you don’t have to do anything special for that because that’s going to be the standard category functionality. Right, all you would have is you would just pick… it’s just a straight category archive at that point.

Douglas: Okay, good. So that’s…

Rick: As long as the… okay. So that’s a no-brainer. The more complex question which we’re going to have to deal with next time… partly because I’m not ready for it… the more complex question really is how would you show all of the posts under Seattle neighborhoods. That, there’s not a straightforward answer to. Now, all the neighborhoods, all the posts under neighborhoods, that’s slam dunk easy but all the posts under Seattle neighborhoods is not. I mean, it’s the same kind of thing as we’ve done here except that we would need… we’ll need to create pages for that with their own custom queries in order to make that work properly.

Douglas: Very good. Okay, I see.

Rick: So if you were going to say you know, all Seattle neighborhoods you know, show me all the articles from the Seattle neighborhoods section. That is going to be a special kind of archive page that we will have to create from scratch ‘coz it’s not going to exist by default. So what else?

Douglas: It’s not hard to pull the posts from Edmonds together, just saying. I mean, that’s not hard to do.

Rick: Well, no. That’s what we did at the beginning.

Douglas: That’s what we did at the beginning because I…

Rick: To pull all the posts together?

Douglas: Right, from that post type. That’s not hard but what you are saying was the… you would take the archive page… I guess I’m not following that.

Rick: No. What is a layer of difficulty greater than that is to get all of… to have a page that automatically generates all of the business posts in Seattle, right? This doesn’t generate all of them, right? This just generates the 2 and what you’re going to want is because you have 2 communities and who knows how many categories, you’re going to need a loop that will work for every single instance of it. You’re not going to want to write a new page loop for each category and each city because that’ll all be manual so what you’d want to do is to create a loop that…well, create a style of a page really, like a template almost, that knew that you were asking for a specific category and a specific post type and would deliver all of the post types in that category.

Douglas: Okay.

Rick: I’m sorry. Not all of the post types, all of the posts within that post type, within that category.

Douglas: Category, okay. Yes.

Rick: Right. And that’s the trickiest part to this and the… I mean, I guess the only reason why it’s tricky is because you want to write the code only once and so what you really want to do is come up with the way…oh I didn’t need custom in front of that. What you really have to do is come up with the way of looping… of identifying… automatically identifying what the search parameters need to be based on the page that’s called rather than hard coding like we’ve done here, right? We’ve hard coded a loop for this page and we hard coded a loop for the other page and what we really need to do is… because there would be way too many loops to hard code, we need one loop that will do the job and every instance of post type and category. That’s why I said it’s you know, one way of… one level more difficult and maybe I’m doing a poor enough job of explaining it that it’s not apparent but…

Douglas: No, I understand. It took me a second but…

Rick: Let’s see, font size colon… let’s see. What are we, 2 em? We’ll try that. Yeah, here we go. 2 em, now we want to get rid of that line so that is .custom .teaser and border none, I believe. Oh and then we want to space this stuff out a little bit so let’s say, let’s give it a little margin. Margin right colon 10 px… I’ll space those and then let’s also just do that with the images. IMG… what happened to border none? That didn’t happen. Custom teaser or is it teaser box? Oh, it’s teaser box. Custom teaser…I see. What I really need to do is do that one more time. Custom teaser_box border none, is that right? Teasers box, okay… custom teasers box border none custom teaser…we don’t need border none on that. Margin right, give this a little space there. Custom image or teaser image… give us a little bit of space around the images. Okay, I think that’s it. So for next time, what would you like me… what’s the next level of iteration would you like to see on this? Should we try to organize the…try to provide a specific kind of… specific order to the categories?

Douglas: Yeah, I think that sounds good.

Rick: Okay, that’s what we’ll do. That’ll be an interesting little challenge. I did also want to come up with… show you how to use a widget to you know, list posts on the sidebar too for these custom post types so I’ll try to… we’ll try to include both of those things and in the meantime, if you think of something else that you’d like to have added, by all means you know, let me know because we can you know, we can continue to refine this stuff. I mean I think it’s really interesting and I think other people are enjoying it so…and with that it looks like I think I’ve answered all the questions that are there. Yes, Pam you did win the stump the chump… the word today although Dennis was very, very close. And so anyway, that wraps up our event tonight. Thank you very much everybody for participating. We’ll get this stuff online here as quickly as we can and I look forward to chatting with you all again in the not too distant future. Good night.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment