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:
Annie Anderson says
Hi Bill,
I’m kinda new to this grid loop thing and doing fully custom work with Genesis and I have a few questions for you about what I want to achieve –
On the home.php, I want 4 featured posts with full content (content is usually pretty short) and then below that, just one row of 3 across with thumbnails above and title below and no content, no excerpt. Is using the grid loop an effective way to achieve that?
Thanks in advance!
~Annie
Bill Erickson says
Yes, the grid loop can do that. You’ll simply specify the number of features and teasers, what each one includes, and then style them to be formatted the way you want.
Annie Anderson says
Thanks Bill!
I want the page to have the primary sidebar as well. Is there anything special I need to do?
Bill Erickson says
It should use that sidebar automatically unless you’ve made modifications to how the sidebar works.
Annie Anderson says
Thanks again Bill. I appreciate the help!
Annie Anderson says
Hi again Bill,
A couple more questions – I can’t get the content to NOT display on the grid. I just want the content to show on the featured posts only, not on the grid posts. For those, I just want image and post title below. I’ve got the title below, but there’s still the excerpt. I have the grid_content_limit set to 0 and I don’t know what it should be to remove the grid excerpt.
Also, I don’t want the comments number etc to show and I can’t seem to modify the code correctly to remove that.
Can you help?
Site is at – http://asamedialabs.com/dev10/
Thanks!
~Annie
Shannon @ aka design says
I am so green at this: just switched to genesis last week. Can you tell me what I need to do just to have the post count show after each post and so that people can click on it to go to the ‘leave a comment’ section on that post?
Thank you!!! I am so lost!
Shannon
Bill Erickson says
Use the post_comments shortcode. You’ll need to modify the post info, either using code (shown in this post) or a plugin like Genesis Simple Edits.
Elle says
I’m using the Balance theme and wanted to customise the grid loop to show the excerpt on the featured posts instead of the content limit – your function worked perfectly (with a few tweaks) so THANKYOU very much 🙂
JSaeler says
I’m in the process of revamping a site using a modified streamline theme. I will need to have more than one grid loop in order to split out specific types of content. So I created a page template with the loop on it. I don’t want the loop to pull everything, so I am specifying the cats to pull from.
In different instances I will need to pull diff cats – which is where I’m out of my league. Is it possible to accomplish this with a filter/custom field, or should I create a template page for each instance? If possible can you point me in the right direction?
Bill Erickson says
I wouldn’t use the grid loop for this since it is meant for the main query (you’ll have pagination links below each of them). I recommend creating a custom page template which contains custom WordPress queries: https://www.billerickson.net/custom-wordpress-queries/
chas says
How do i put a divider between the featured posts and the grid? thanks
chas says
How would i use this as my template for taxonomy, categories and tags? ie parse the taxonomy ID to the loop?
Bill Erickson says
That’s described in the Row Dividers section. Use the current_post variable to know where you are, and if you’re in a location that needs a divider, display one.
Bill Erickson says
Not sure what you mean by “parsing the taxonomy ID to the loop”. If you place this in archive.php, it will be used for all archives (categories, tags, and any custom taxonomies). By visiting the appropriate term page (ex: yoursite.com/colors/blue) it will display all posts matching that term (ex: posts tagged “blue” in the “colors” taxonomy)
chas says
ho sorry i am just coming back to wp, i copied home.php as archive.php and it looks to be pulling from all categories. help plse
Bill Erickson says
Ah yes, because the Genesis grid loop is creating a new query. There’s two ways you can fix it:
1. Add a tax_query to your query args: https://gist.github.com/3692697
2. (Preferred) Don’t use Genesis Grid Loop, use this method instead
As noted at the top of this post, I no longer support the method covered here in this post. For that reason, I’m closing the comments.
Gaurav Tripathi says
Hi Bill,
Thanks for this tutorial, I am using Genesis elevenPro Theme and want to change home page style. I would like to change home page post format from Grid to standard . Let me know how to do this.
Thanks
Bill Erickson says
I assume you can just delete your home.php file in the theme to switch it back to the standard layout, but you should check with StudioPress support. I’ve never used that theme.
Sharon Bryant says
I was wondering if there is any way to make the genesis grid loop show as ascending instead of default descending when a category option is chosen? Ideally I’d like to be able to choose how each category shows. I love the grid loop and it works extremely well on my site which has lots of archived images posted as series and grouped as such in various categories. The problem I’m running into is that some of my post “series” just do not make sense in descending order, even though the were posted as such. My website is https://rockydaleuniverse.com and I’m using child theme Foodie Pro as a web cartoon site. Thank you so much!
Bill Erickson says
Yes, you can customize the main query to change the order. See this tutorial for more information: https://www.billerickson.net/customize-the-wordpress-query/