Customizing the Genesis Grid Loop Content

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:

  1. 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.
  2. Moving the thumbnail in the grid posts from below the title to above it.
  3. 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:

chat40 Comments

  1. 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()) )

  2. 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!

  3. 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 < ?php )
      /* Template Name: Grid Template */

      Just put your standard WP_Query args in the genesis_grid_loop. Ex:

      'features' => 2,
      ‘post_type’ => ‘products’

  4. 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;
      }

      • 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

  5. 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

  6. 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.

  7. 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.

  8. 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.

      • 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!

  9. 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

  10. 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

  11. 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

  12. 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 :)

  13. 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

      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.