I no longer recommend using Genesis' grid loop, since it can be done with simply CSS classes. See A better, and easier, grid loop
I recently rebuilt my blog using the Genesis Grid Loop, a nifty function in Genesis that let’s you break your content into a few large features followed by a grid of smaller posts.
Here’s two tutorials to get you started: How to Use the Genesis Grid Loop and Genesis Grid Loop Advanced.
Once you work your way through those you’ll be able to set up the grid using however many features and columns of grid posts you’d like. But what if you want to alter the content of the features and grid posts? I’ll walk you through the following:
- Setting up the features and grid posts to display the excerpt instead of a truncated version of the content. This way you can write a summary of the post to show up on your blog.
- Moving the thumbnail in the grid posts from below the title to above it.
- Adding a divider between each row of the grid.
Setup
First we’ll need to set up the grid loop. For a more detailed explanation of what’s going on here, refer to the two tutorials I referenced earlier. I have grid_image_size = '0' so that no image is displayed on grid posts. I’ve also set up an image size called “child_full” for the features and “child_thumbnail” for grid posts outside of this code (in functions.php).
I’m using the “child” prefix throughout this, but please change this to your own prefix (I use my initials, be_). This ensures your code won’t interact with code written by someone else.
In my child theme I’ve created a file called home.php (this is the template file for the blog page). It has the following in it:
Using the Excerpt
If you dig into /lib/structure/loops.php, you’ll see that the grid loop generates the content using the function genesis_grid_loop_content(). We’ll need to unhook this and replace it with our own function. It’s a good idea to copy this function and use it as a base for your modifications.
In our home.php file, right before genesis(), I’m adding this function:
We’ve replaced the genesis_grid_loop_content() with our own function, which we’ll now need to create. Here’s my child_grid_loop_content() (again, place before genesis()). I’ve also added some code to render the comment numbers the way I want.
Now when you load the site it will display excerpts instead of the beginning of your post.
Thumbnail Above Grid Posts
The function genesis_grid_loop_content() placed the image for grid posts between the title and the content. I wanted it above the title, so in the grid loop helper function I told it to not include images for the grid posts, and now I’ll add my own function to place the image.
Inside the child_switch_content() function, add this line:
add_action('genesis_before_post_title', 'child_grid_loop_image');
Then, right before genesis() add this function:
This checks to see if we’re on a grid post, and if we are it displays the thumbnail. Because we’ve hooked this into genesis_before_post_title it will show up before the post title.
Row Dividers
Finally, let’s add a divider between each row of posts. I’m going to be adding an <hr /> tag, but you could add whatever you want. Add this line to the child_switch_content() function:
add_action('genesis_after_post', 'child_grid_divider');
Then, before genesis() add this function:
This assumes that you have two features and two columns of grid posts. If you have something different be sure to modify this function. Here’s what each part of it means:
(($loop_counter + 1) % 2 == 0)= If we’re on an even post, return true. The loop counter starts with 0, so the second post is 1, fourth post is 3 …. Replace 2 with however many columns of grid posts you have.&& !($paged == 0 && $loop_counter < 2)= … And if we’re on the first page, make sure we’re not on a feature. Replace 2 with the number of features you have.
I also added the following CSS to my style.css file for the <hr />:
Whatever element you use, make sure you set the width to 100% in your CSS.
Putting it all together
Here’s the completed home.php file:
Dee says
Hi Bill
Great tutorial and answers most of my questions, all but one… what if all I want to show in my grid is the thumbnail? I’m using the grid for a portfolio, and want the grid to show the featured image thumbnail, with the header and excerpt below. I’m achieving that, but I don’t seem to be able to do it without ending up with a duplicate of the main image after the heading and excerpt/subtitle (the single posts all start with a large hero image – i figure the grid is pulling that in.) ( you can see it, if you’re interested, here http://imperialmetric.tv/wordpress/category/featured).
Bill Erickson says
I’d have to see the code, but here’s a few things that could be going wrong:
1. You’re using the thumbnail in the grid loop AND adding the image at the top of the grid loop. Set the grid_image_size to 0.
2. You have a function elsewhere in your code that’s adding the thumbnail to the top of posts (probably the same code being used to add the featured image to single posts). Modify this to only apply to single posts ( if(is_single()) )
Dee says
Thanks, I’ll play around a bit and see what happens.
Dee says
Genius… changing the grid image size solved the problem. Thanks!
Heather Acton says
Hi Bill – thank you SO much! You saved my bootie with this one =) Having the post thumbnail ABOVE the post title is the exact requirement I have from a current client, so this was so perfect. Now I’m working to revamp the code to get the top featured image to come above its post title. Learning PHP as I go! Thanks again!
alex vasquez says
Hey Bill,
Great tutorial! Thank you!
I have a question: Couldn’t you simply take this code and make it a page template instead? Also, how could I modify this to grab a specific custom post type?
Bill Erickson says
Yes, all you’d have to do is add this to the very top (right after 2,
‘post_type’ => ‘products’
alex vasquez says
You deserve a good hug. I know that sounds creepy, but I just really appreciate the information. Confirming those two little items is going to help me SO MUCH! Thank you!
I’m gonna go work on that Bill Erickson shrine people have been talking about, Topeka…
Jon Brown says
I’d suggest a 3 way group hug, but now it’s getting really creepy.
TY both!
Linda Sherman says
Putting girl into group hug makes it less creepy <>
Aaron Hartland says
Hi Bill – Excellent tutorial. Thank you! I’ve really enjoyed playing with and tweaking this. If you’re willing to help, there is one feature that I’m trying to add and I just cant seem to get right… Is there an easy way to exclude a specific category from showing in the loop? Thanks again!
Bill Erickson says
It’s not easy, but you’ll need to intercept the query before the page renders. If you only want to exclude category with id=5 on the homepage, do this in functions.php (untested):
add_filter('pre_get_posts', 'be_hide_category');
function be_hide_category($query) {
global $wp_query;
if ( is_home() && $wp_query !== $query && !is_admin() ) {
$query->set('cat', '-5');
}
return $query;
}
Aaron Hartland says
Bill ~ Thanks for you willingness to help! I tried you suggestion, but wasn’t able to get it to work – (and yes I updated the appropriate category ID) ~ My original intention was to use your grid loop customization for a free child theme.. The category exclusion was to filter out posts that I wanted to only add to the portfolio template page. But with a little more consideration, perhaps keeping it simple would be a better idea for a free child theme. 🙂 Again, I greatly appreciate your help and have gleaned quite a bit from many of your tutorials. ~ Aaron
Jeremy Tews says
Hi Bill – I just wanted to give a quick thanks for this tutorial. I was trying to pull certain posts for a gallery type on a page template. This worked great. A quick question is can this be modify to have 3 post across instead of just 1 or 2?
Thanks for all the tutorials/help you put out into the community…it definitely has helped me with various projects.
Jeremy
Bill Erickson says
Yes, it definitely can. You just need to change the logic on the divider a bit.
Jeremy Tews says
Thanks for the info…I was able to figure it out using that little tidbit of information…
thanks again for helping out….
logesh says
Hi Bill thanks for this useful tutorial.my problem is I m getting one post per row .Here is what i did
1.I created a custom post template called portfolio and pasted your code there and assigned it to a page so i added the argument ‘post_type=>portfolio’.
2.declared new image size in functions.php add_image_size( ‘featured’, 300, 250, TRUE );
3.edited the argument ‘feature_image_size’ => ‘featured’,
Everything is working fine but in the display it shows one post per row .As you said i edited the grid divider like this ($loop_counter + 3) % 2 == 0) so that i should get 3 image per row but still i am getting one image per row also my third image appears with out being re-sized .Here is the link http://ravidreams.in/theme1/?page_id=589 .Plz help me do i need to make any changes in css or how can i fix this .Thank you
Bill Erickson says
It looks like you have a few issues:
– You have feature posts at the top which are always going to be full-width. If you don’t want those, set features to 0
– You either typed the image size wrong or you created the image size after the images were uploaded. To fix the latter, download and run the plugin Regenerate Thumbnails to make the ‘featured’ thumbnail.
After the features the teasers seem to be working just fine.
Neil Kohler says
Hi Bill,
Thank you for the tutorial, so far it looks like it is just what I need! Quick question about pagination. Is there any way to include pagination it in this code? I have been trying a few things with little success so any assistance you could lend would be great!
Thanks,
Neil Kohler
Bill Erickson says
Pagination should work out-of-the-box if you’re doing this on a template that already has pagination (ex: home.php, archive.php, category.php…). If you’re using a page template to create a custom query, add genesis_posts_nav() to your template after the loop.
Chad says
Working on a local install but using your custom grid loop to display only thumbnail images for a certain number of posts and wanting to utilize pagination, the older posts link shows up but when clicked it goes to a 404. Is there something I am missing inorder to get the pagination working on a custom posttype, custom taxonomy page?
I would post my code but not sure it will render. here is an attempt.
https://gist.github.com/1553344
Bill Erickson says
Without actually testing the code, I think the issue is the ‘posts_per_page’. Try removing that from your grid arguments.
‘posts_per_page’ should never be added to the grid loop args if you’re modifying the main query (blog page, category page…). Since you’re loading a different number of posts than WordPress’ main query, you’ll often get a 404 because you’re calling posts that don’t exist.
Instead, use pre_get_posts to modify the post count before the main query is loaded. More info here.
Chad says
Thanks. That should do it. BTW, thanks a million for this tutorial it really broke me in with regard to the custom grid loop. After toying with your code and modifying it to work the way I need it to and then playing a little more for fun I feel totally comfortable with it.
Thanks again!