Build Your Own Business Website header image

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.

Lesson 16 – Part 5 – Ex#3 Display a Grid of Post Thumbnails for Specific Categories

Example number 3 is going to be to create a grid of post thumbnails for specific categories on our Thesis theme website. Now, an example of this is the site that I’ve been working on for an artist friend. She does beautiful artwork and what we have is on our category paintings, we want just the paintings to show up, just these thumbnail images to show up and we want those thumbnail images to link off to the example. The same thing is true for her works on paper but if we come over and look at one of her works on paper and say pick one of the tags, we want the tags to be the standard kind of teaser.

Display Thumbnail Images

This is something that we want to apply only to a specific category and this is something that is quite similar to what I did in the custom secondary loops class here a couple of weeks ago. We’re going to look at our logic which is going to be similar to this except, we’re not going to wrap these teasers at all. We’re not going to have opening and closing teasers box, we’re not counting to see if there are three, we’re going to put them all on there in a row so we don’t have any of those things.

Of course, we’re not going to put a Thesis hook in there and we’re not going to use a Thesis teaser, this is just going to be a straight listing of those images that linked off to the posts. We’re also going to show absolutely every image there. We’re not going to have any pagination for these categories so if there are a hundred posts, then all hundred are going to show up on that archive page. We’re going to be using the pre_get_post filter to eliminate the limitation on posts per page. Let’s look at the code that we looked at a couple of weeks ago here, thumbnail grid.

Create a New Category Loop

What we did here was we created a query, we specified a category name and a post per page then inside the loop, we defined the thesis_post_image, we got the permalink, we got the title, got the post_image wrapped it up a link and that’s all that we displayed so we’re going to do the same thing here with this. We’ll come back down and copy some of that code in a minute but let’s go ahead and grab all of this code, come back up here at the top and now, this is going to be custom_loop_3. We got our home, our category if(is_category(‘bananas’)).

The next thing we’re going to do is come down to elseif (is_category(‘cherries’)) then it’s else so if it’s a category Cherries then we’re going to do a new category loop else we’re going to use the standard one. In our new category loop, we’re going to grab thesis_archive_intro and while (have_posts) the_post, close out the while statement then we’re going to go down here and grab that bit of code from our old secondary loop.

That is the $post_image equals thesis_post_image then we get the permalink , the title, the post image output, we’ll just copy all of that and come up to three. Okay, $post_image = thesis_post_image_info so we’re grabbing the thumbnail, we’re grabbing the permalink, we’re grabbing the title as the_title, we are echoing the post_image out inside of our a tag and we’re closing out our a tag. That’s all that we’re doing here for category of Cherries.

Use Filter to Change the Number of Posts Per Page

Now, the other thing we want is come back up to our hide_sidebars and say, if(is_category) and we want to do this in an array, if(is_category( array(‘bananas’, ‘cherries’)) and that way, we end up with hiding the sidebars in both cases then we’re going to add another filter. That filter is the pre_get_posts filter, add_filter(‘pre_get_posts’, array($this, ‘change_posts_per_page’).

Those of you who have been watching me for a while are familiar with this pre_get_posts filter, we’re going to use this to change the number of posts per page. Now we’re going to create a new public function, public function change_posts_per_page which is the name of that function.

If we look at that pre_get_posts filter on WordPress for a second and look at the logic, we want to make sure that the query is the main query and we want to make sure that the query is category and we want it to be a specific category. What we’re going to do is test to make sure that the query is the category Cherries and we are going to test to make sure it is the main query then we’re going to set this query variable.

We’re going to take query here and put that in our filter, change_posts_per_page so we’re grabbing the query. If the query is category and again is category, Cherries, if query is Cherries and query is main query then we are going to not set the query but we are going to set this query_var post_per_page. We just come right there, paste it, $query->query_vars(‘posts_per_page’) and if you want to have unlimited posts per page, what you do is type -1.

What’s happening here is we’re going to return inside the if statement. We’ve got a new public function change_posts_per_page and we’ve added that as a filter to the (‘pre_get_posts’, array($this, ‘change_posts_per_page’) then we’ve brought the query into the change_posts_per_page and if we said, if query is category Cherries and if the query is the main query then posts_per_page should equal -1. There’s our second new function, there’s our cherries function, thesis_archive_intro. I think we pretty much have everything here now so let’s save it and test it.

I don’t think we even need any custom.css for this but we’ll take a look at it in a second. Come back and go over to the category Cherries. Upload that, now we should have 3. There we go, we do have 3 and we’ve got all the different post images showing up here. What did I say I wanted to show with this, post image output? That’s right, I’m missing a bit of HTML on top of this. We need to add some opening HTML here that really happens up here.

That opening HTML is first the post box, top, a wrapper and the format text wrapper. What I’ve done is, I’ve given another class image_grid to this then as soon as I’m done with while (have_posts), I need to close out those divs. That’s going to borrow all the rest of the Thesis theme CSS for these. Refresh it, there we go.

Now we have all of these different images showing up in a row as soon as there’s not enough room for the next image to show up, it drops down to the bottom and it just adopts the same styles as the teaser does for the post image here which is exactly what this does. These thumbnails have been defined as being a different shape and size than these ones have. So we go back over to Oranges, we’ve got 2, we go back over to Bananas, we go to 3, we go over to Cherries and we’ve got just post images.

Save $200 on Membership Now!

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