A better, and easier, grid loop

Don’t feel like coding? I built a plugin that does this for you.
See the Genesis Grid Loop plugin.

Note: This technique can be used by all WordPress themes. I’m proposing it as a replacement for the Genesis-specific grid loop, so aspects of this post might be Genesis-specific.

A popular request is to list posts in multiple columns. I do it on my blog, and do it often on my clients’ sites.

Genesis developed a Grid Loop, which you can utilize inside your Genesis themes for this effect, and is how this blog does it. While very useful, it can be difficult to set up. I believe this is because they combined two separate functions: what content to display (your query) and how to display it.

By breaking those two functions we can use another feature of Genesis, the column classes, to build grid loops easier. You can also copy that CSS to any WordPress theme and make it work too.

For this example I’ll be using a Gallery theme I recently built. On the archive pages, it displays posts in three columns. See the screenshot above, or click here) for an example.

Step 1: Multiple columns using post_class

The post_class filter lets us customize the classes applied to each post in the loop. Since I want this to only apply to archive pages, I’m placing it in archive.php.

* Archive Post Class
* @since 1.0.0
* Breaks the posts into three columns
* @link http://www.billerickson.net/code/grid-loop-using-post-class
* @param array $classes
* @return array
function be_archive_post_class( $classes ) {
global $wp_query;
if( ! $wp_query->is_main_query() )
return $classes;
$classes[] = 'one-third';
if( 0 == $wp_query->current_post % 3 )
$classes[] = 'first';
return $classes;
add_filter( 'post_class', 'be_archive_post_class' );
view raw gistfile1.php hosted with ❤ by GitHub

The first line adds a class of ‘one-third’ to all posts. Then I grab the current post counter out of $wp_query, and if this is the first post ( 0 == $wp_query->current_post ) or if the remainder of the current post divided by 3 is zero (this tells us the current post is the first in a row), apply a class of “first” as well.

That’s it! You now have your content broken into multiple columns. If you want two columns, use ‘one-half’ and divide the current post by 2. If you want four columns, use ‘one-fourth’ and divide the current post by 4.

Step 2: Customize the Query

When I view the archive page now, it’s in three columns but it’s only displaying 10 posts. The last post sits by itself in its own row. I’m going to modify the main query to show 27 posts per page. You could use any number you want, just make sure it’s a multiple of columns. For more information on customizing the main query, see this post.

add_filter( 'pre_get_posts', 'be_archive_query' );
* Archive Query
* Sets all archives to 27 per page
* @since 1.0.0
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @param object $query
function be_archive_query( $query ) {
if( $query->is_main_query() && $query->is_archive() ) {
$query->set( 'posts_per_page', 27 );
view raw gistfile1.aw hosted with ❤ by GitHub

This code must go in functions.php, since the main query runs before it reaches archive.php (it checks the query to figure out what template to load).

Even easier sitewide

If you’re using this for all listings of posts (home, archive, search…), it is even easier to set up. Put the post_class filter in functions.php so it runs sitewide, and add a conditional to check if it isn’t singular:

* Archive Post Class
* @since 1.0.0
* Breaks the posts into three columns
* @link http://www.billerickson.net/code/grid-loop-using-post-class
* @param array $classes
* @return array
function be_archive_post_class( $classes ) {
// Don't run on single posts or pages
if( is_singular() )
return $classes;
$classes[] = 'one-third';
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
$classes[] = 'first';
return $classes;
add_filter( 'post_class', 'be_archive_post_class' );
view raw gistfile1.aw hosted with ❤ by GitHub

And instead of the function to customize the number of posts, go to Settings > Reading and tweak it there.

Advanced Example

The code snippet below (added to functions.php), modifies the blog’s homepage and archive pages to display 5 features and 6 teasers (in three columns) on the first page. On inner pages, it displays 0 features and 12 teasers (in three columns). It also updates the post image to use image sizes specifically created for features and teasers.

The first function, be_grid_loop_pagination(), is where we control the grid loop. Under the comment that says “Sections of site that should use grid loop”, you can modify that list to specify where you want the grid loop displayed. Right now it is running when is_home() or is_archive() is true. The second part, under the comment that says “Specify pagination”, is where you specify how many features and teasers to show on the homepage and subsequent pages.

The second function, be_grid_loop_query_args(), doesn’t require any customization from you. It uses the pagination information you added to the previous function to tell WordPress how many posts show up on each page.

The third function, be_grid_loop_post_classes(), applies relevant classes to each post. It’s adding a class of ‘feature’ to each feature post, and column classes to the teasers. The only thing that you’d need to change is the teasers sections if you want something other than three columns. Here’s what you’d need to change if you wanted two columns.

The fourth function, be_grid_image_sizes(), specifies the two image sizes. Change these to whatever size you’d like. If you don’t want images, you can leave out this function and the last one, be_grid_loop_image(). Also note that you need to have “Include Featured Image” checked in Genesis > Theme Settings > Content Archives.

The fifth function, be_grid_loop_image(), overrides the image size set in Genesis > Theme Settings > Content Archives with the image sizes we created in the previous function. No changes need to be made to this function.

The sixth function, be_fix_posts_nav() does as its name implies. The post navigation (Older/Newer, numerical links to posts pages…) uses $wp_query->max_num_pages to know how many pages there are, and this is based on the current page’s posts_per_page. So if you have less posts on your homepage than inner pages, the post navigation on the homepage will be off (this is noticeable if you’re using numerical links). This code changes the max_num_pages based on the grid args.

* Grid Loop Pagination
* Returns false if not grid loop.
* Returns an array describing pagination if is grid loop
* @author Bill Erickson
* @link http://www.billerickson.net/a-better-and-easier-grid-loop/
* @param object $query
* @return bool is grid loop (true) or not (false)
function be_grid_loop_pagination( $query = false ) {
// If no query is specified, grab the main query
global $wp_query;
if( !isset( $query ) || empty( $query ) || !is_object( $query ) )
$query = $wp_query;
// Sections of site that should use grid loop
if( ! ( $query->is_home() || $query->is_archive() ) )
return false;
// Specify pagination
return array(
'features_on_front' => 5,
'teasers_on_front' => 6,
'features_inside' => 0,
'teasers_inside' => 12,
* Grid Loop Query Arguments
* @author Bill Erickson
* @link http://www.billerickson.net/a-better-and-easier-grid-loop/
* @param object $query
* @return null
function be_grid_loop_query_args( $query ) {
$grid_args = be_grid_loop_pagination( $query );
if( $query->is_main_query() && !is_admin() && $grid_args ) {
// First Page
$page = $query->query_vars['paged'];
if( ! $page ) {
$query->set( 'posts_per_page', ( $grid_args['features_on_front'] + $grid_args['teasers_on_front'] ) );
// Other Pages
} else {
$query->set( 'posts_per_page', ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) );
$query->set( 'offset', ( $grid_args['features_on_front'] + $grid_args['teasers_on_front'] ) + ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) * ( $page - 2 ) );
// Offset is posts on first page + posts on internal pages * ( current page - 2 )
add_action( 'pre_get_posts', 'be_grid_loop_query_args' );
* Grid Loop Post Classes
* @author Bill Erickson
* @link http://www.billerickson.net/a-better-and-easier-grid-loop/
* @param array $classes
* @return array $classes
function be_grid_loop_post_classes( $classes ) {
global $wp_query;
// Only run on main query
if( ! $wp_query->is_main_query() )
return $classes;
// Only run on grid loop
$grid_args = be_grid_loop_pagination();
if( ! $grid_args || ! $wp_query->is_main_query() )
return $classes;
// First Page Classes
if( ! $wp_query->query_vars['paged'] ) {
// Features
if( $wp_query->current_post < $grid_args['features_on_front'] ) {
$classes[] = 'feature';
// Teasers
} else {
$classes[] = 'one-third';
if( 0 == ( $wp_query->current_post - $grid_args['features_on_front'] ) || 0 == ( $wp_query->current_post - $grid_args['features_on_front'] ) % 3 )
$classes[] = 'first';
// Inner Pages
} else {
// Features
if( $wp_query->current_post < $grid_args['features_inside'] ) {
$classes[] = 'feature';
// Teasers
} else {
$classes[] = 'one-third';
if( 0 == ( $wp_query->current_post - $grid_args['features_inside'] ) || 0 == ( $wp_query->current_post - $grid_args['features_inside'] ) % 3 )
$classes[] = 'first';
return $classes;
add_filter( 'post_class', 'be_grid_loop_post_classes' );
* Grid Image Sizes
function be_grid_image_sizes() {
add_image_size( 'be_grid', 175, 120, true );
add_image_size( 'be_feature', 570, 333, true );
add_action( 'genesis_setup', 'be_grid_image_sizes', 20 );
* Grid Loop Featured Image
* @param string image size
* @return string
function be_grid_loop_image( $image_size ) {
global $wp_query;
$grid_args = be_grid_loop_pagination();
if( ! $grid_args )
return $image_size;
// Feature
if( ( ! $wp_query->query_vars['paged'] && $wp_query->current_post < $grid_args['features_on_front'] ) || ( $wp_query->query_vars['paged'] && $wp_query->current_post < $grid_args['features_inside'] ) )
$image_size = 'be_feature';
if( ( ! $wp_query->query_vars['paged'] && $wp_query->current_post > ( $grid_args['features_on_front'] - 1 ) ) || ( $wp_query->query_vars['paged'] && $wp_query->current_post > ( $grid_args['features_inside'] - 1 ) ) )
$image_size = 'be_grid';
return $image_size;
add_filter( 'genesis_pre_get_option_image_size', 'be_grid_loop_image' );
* Fix Posts Nav
* The posts navigation uses the current posts-per-page to
* calculate how many pages there are. If your homepage
* displays a different number than inner pages, there
* will be more pages listed on the homepage. This fixes it.
function be_fix_posts_nav() {
if( get_query_var( 'paged' ) )
global $wp_query;
$grid_args = be_grid_loop_pagination();
if( ! $grid_args )
$max = ceil ( ( $wp_query->found_posts - $grid_args['features_on_front'] - $grid_args['teasers_on_front'] ) / ( $grid_args['features_inside'] + $grid_args['teasers_inside'] ) ) + 1;
$wp_query->max_num_pages = $max;
add_filter( 'genesis_after_endwhile', 'be_fix_posts_nav', 5 );
view raw functions.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions


  1. Jo Waltham (@MagentaSkyUK) says

    Thank you for this. I’ve been wondering how to make genesis_grid_loop responsive so that on mobile phones it goes to one column. It will be easier this way. Won’t it?

    • Bill Erickson says

      Yep! The column classes are percentage based, so everything will scale down proportionally as the site gets smaller (assuming the rest of your site is responsive). Then in a media query you can say something like “at 600px wide, .one-third goes 100% wide and doesn’t float”. Here’s what I’m using in my gallery theme: https://gist.github.com/2046892

      • Mario says

        That’s great, but I’ve encountered another problem. In fact, even if I can show the grid columns in full size, the images of grid posts looks very bad on mobile since they are displayed in a lower resolution than featured posts. So, my question is: is it possible to dynamically change the loop in order to show only featured images on mobile while keeping the columns on desktop homepage?

        • Bill Erickson says

          You can use the wp_is_mobile() conditional to test whether you’re on a mobile device or not. Something like

          $image_size = wp_is_mobile() ? ‘featured-mobile’ : ‘featured’;

  2. Ahmad says

    Great tutorial.
    At first I thought this will be a custom post type for gallery, but it’s only for archieve.
    Tried searching for tutorial on building a custom post type (portfolio/gallery), specifically coded for genesis, but couldn’t find one. Hopefully you’ll be able to post a tutorial on that if you’ve some spare time πŸ˜‰

  3. Adam W. Warner says

    Very cool Bill, I’ve been using the grid loop for some time and as a non-programmer I’ve struggled.

    Is there any opportunity to roll this into a plugin with associated options on where to apply this grids? I’d be happy to donate to the development of this plugin:)

  4. Steve Hill says

    Great post thanks Bill; so simple to use.

    I have a slight problem with the second part of the tutorial – changing the number of posts shown in the query. I’m using the code in an Archive template for a Custom Post Type and this part doesn’t seem to be working for that. Would you be able to let me know how I can adjust this code to account for the CPT?


    • Bill Erickson says

      Make sure you’re using the default loop (yoursite.com/cpt) and that the cpt had ‘has_archive’ => true, when registering it.

      Place the query modification function in functions.php (required for any query modification). Then just change the conditional to is_post_type_archive( ‘cpt’
      ). Of course change cpt to your post type name.

  5. GaryJ says

    Well that’s considerably simpler than the current grid loop tutorials. Makes you wonder why the grid loop in Genesis exists in the first place (I guess, when you want a *second* loop running on the page, or at least one that’s different from what the page query args would otherwise be).

    • Bill Erickson says

      I use the same technique for custom queries, except I manually specify the output with the classes rather than use the filter (I don’t run any of the actions in my custom loops).

      Personally I think the grid loop and query_args custom field should go away, but for legacy reasons we should just deprecate it and recommend better approaches.

  6. Bruce M says

    Hi Bill,

    I’m having trouble making this work with a CPT. I have this in functions.php https://gist.github.com/2140665 and this in my page template (page-books.php) https://gist.github.com/2140697

    The query runs, and I don’t see any issues in debug, but it returns nothing to the page. I have quintuple checked my post type name, etc. and the normal grid loop runs fine if I use that instead. But I need to make your method work, because I am having the dreaded pagination issue with custom taxonomies with the grid loop.

    Using Genesis (not that that would make any difference).
    I will gladly pay you to help me with this.

    • Bill Erickson says

      Don’t use a page template, use WordPress’ default archive for the post type.

      – When you register the post type, make sure 'has_archive' => true
      – Go to Settings > Permalinks and click “Save”
      – Rename your file archive-wps_books.php

      You’ll be able to access the archive at yoursite.com/wps_books.php . To get a cleaner URL, add this to your register_post_type function: 'rewrite' => array( 'slug' => 'books' )

      Using a page template is NOT using the default query, since the default query in that case is the page. is_post_type_archive() will return false because the main query is a page, not a post type archive.

      If you must use a post type archive (ex: want to control the text at the top of the page, or this is just a secondary query on the page), then manually build the markup for the custom query. You don’t want to use post_class() as that should be reserved for the main query. Example: https://gist.github.com/2140818

      • Bruce M says

        That worked great. My ignorance on main query versus page. I’m a bit new at this, and have struggled for DAYS trying to understand it.
        Thank you VERY much for your help.
        I’ll be hanging on my chair watching for your next post πŸ™‚
        Thanks again!

        • Bill Erickson says

          No worries, it is a difficult concept to grasp because no one ever talks about it, and you can do so much with WordPress without completely understanding what’s going on under the hood. It wasn’t until recently that I really understood it well, which is why I try to help others figure it out faster πŸ™‚

          • Bruce M says

            I don’t have any pagination, but I assumed that the ‘posts_per_page’ => 12 arg would handle that?
            Do you have any idea why I wouldn’t have pagination (controls do not show up at the bottom).
            Default number of posts in WP is set to 10.

          • Bill Erickson says

            Have you tried adding the pagination function, genesis_posts_nav(), after your endwhile? https://gist.github.com/2158296

            Genesis adds it automatically to the default loop but you’ll need to add it to your custom one. But even this might not work because its a page template and somewhere in there I think it checks to make sure is_singular() == false before it displays pagination.

            On my gallery, the “Galleries” link originally was a page template that listed all posts, but I couldn’t get it to paginate either. So I ended up just making a category called “All” that I put everything in, and just linked to that (so it would be using the main query, and pagination would work).

          • Bill Erickson says

            Actually, after posting that it bugged me enough to dig in and see exactly what was happening. I’ve figured out how to do pagination on a custom loop:

            1. Remove the default pagination: remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
            2. Build your custom loop $args, and include 'paged' => get_query_var( 'paged' )
            3. Overwrite wp_query with your new one. So instead of $loop = new WP_Query( $args );, you use global $wp_query; $wp_query = new WP_Query( $args ); Since all the conditional tags like is_singular() are really a wrapper for $wp_query->is_singular(), this changes all conditional tags to be based off of your custom query.
            4. After your endwhile, place genesis_posts_nav();. This will render the navigation you have set in Genesis > Theme Settings
            5. After your endif; place wp_reset_query(). This will revert $wp_query and $post to the original query.

            Here’s an example with it all in place: https://gist.github.com/2158395

      • Bruce M says

        Hi Bill,

        That worked in getting the pagination, but with one small problem. When paging to the next page, it displays the same 6 posts (I have post_per_page =>6) on EVERY page…??
        Actually the 6 most recent…

        Any idea why that would be???

        If YOU had a tough time with the pagination, I NEVER would have found the solution! πŸ™‚
        (I tried several different methods and couldn’t make it work)

        Thanks MUCH!

  7. Steve says

    Wow – infinitely simpler than the grid loop. One question though, and it’s not a game changer. In the grid loop you can specify a number of full width posts, and a number of grid posts. With this code you specify the number of columns only.

    If I want to add a full width (one column) post I can add a widget easy enough, but is there a way to specify that in this code, or add another grid loop?

    Excuse my ignorance if this doesn’t make much sense. I’m new to coding, period! πŸ™‚


    • Bill Erickson says

      Yes, this is definitely doable – I actually just finished doing it for a project (site’s still under construction so can only provide a screenshot: http://twitpic.com/900pbd )

      Here’s part of the code I’m using. I’m giving all the full width posts a class of ‘feature’ and the grid posts a class of ‘teaser’. I’m also alternating between ‘left’ and ‘right’ classes on the teasers. Finally, I’m adding a class of ‘last’ to the last post.

      On a simpler site you could do it all with column classes instead of the left, right, and last class. It’s just that the design I’m working with is pretty complex and I didn’t want to mess with the CSS of the column classes.

      A big benefit to this approach is that you can then target code to posts based on their post classes. In this site (and provided in that code snippet), I’m doing a different post meta on teasers.

      • Steve says

        That’s good to know. So, if I were using this on the front page only, would I use this code but add a conditional is_singlular statement?

        I will play with the code, but right now it’s not working so I know I’m missing something.

        Thanks for the pointers though – this is the fun part! πŸ™‚


        • Bill Erickson says

          You could put this in functions.php and add a bunch of && !is_singular() conditionals to leave them off the single posts and pages. But I like to packaged all relevant code together in a single file.

          – I created archive.php which contains all of this ( https://gist.github.com/2166989 )
          – In functions.php, I wrote a function that points home, archives, and search to this file. This way I didn’t have to duplicate the code in home.php and search.php ( https://gist.github.com/2166998 )

          That’s about as much code as I can give you now. I gotta finish this project!

          • Steve says

            I’m grateful for you answering the post, let alone giving me a head start on the code. πŸ™‚ I really appreciate the help / pointers, and am going to leave you alone now! πŸ™‚

            I’m going to try this out tomorrow – thanks a ton for the guidance. I’ll let you know how I get on!


          • Steve says

            Just wanted to let you know the code worked like a charm. I’m am VERY grateful for your help. I have a greater understand of why / how it works, and that is priceless also.

            Thanks again for this, and for all the other tutorials / code snippets you’ve given.


          • Bill Erickson says

            No worries, I’m glad it worked for you! We’re all learning this together so as you figure things out, contribute them back.

            If you look at my Code Snippets you can see I was messing around with grid loops and author boxes last night. I got my grid loop working as well!

  8. Bruce M says

    I hate to ask again, but now that I have pagination working in a page template, I can’t get it working in taxonomy template page. I’ve tried many variations. Everything works except for pagination, which gives me a 404.
    It’s probably something stupid on my part…
    Here’s my code for taxonomy-wps_genre.php https://gist.github.com/2173670
    Thanks, and I promise I’ll leave you alone after this πŸ™‚

      • Bruce M says

        Hi Bill,
        Finally got my head wrapped around the main query, and the use of templates, and got it working. To share and help others, here is what I did:
        1) Added the Post Class code from your Step 1 above, to my taxonomy-yourtaxonomy.php template.
        2) Added the query customization code from Step 2 above, to my FUNCTIONS.php (this is the piece I kept confusing with my previous usage in a page template on a cpt; I was incorrectly putting it in the taxonomy template file).

        My issue was I was confusing the page template/custom loop side with the fact that I could just let the main query and WP native functionality take care of the taxonomy piece…

        Works great now, and I learned a lot!
        Thanks again.

  9. Paul says

    how do you deal with sticky posts? they don’t count as part of the main loop it seems. so if I define the number of posts to display as 12, and there’s a sticky post, it breaks the logic.
    This is in the context of a public release theme where I can’t control whether a user will use the sticky functionality or not.

    • Bill Erickson says

      To be honest I never use, or recommend, sticky posts. It’s an outdated feature in WordPress.

      But since you’re releasing it publicly and can’t simply tell people “don’t do it”, I’d take the following approach:
      – Hook right before the main loop, and if on the blog homepage do a query for just sticky posts.
      – Keep a global post counter going of posts used. Base your grid loop on this rather than the main query’s post counter.
      – Use pre_get_posts to remove sticky posts from the main loop ( $query->set( 'post__not_in', get_option( 'sticky_posts' ) );)
      – Use pre_get_posts to offset posts. If on the first page, limit posts to post count – sticky posts (if 12 post count and 4 sticky posts, 8 normal posts). If on any other page, offset the posts by number of sticky posts + posts per page * (page number – 1).

      It’s a big hassle, but basically rebuild the main query so, if sticky posts are in use, it doesn’t mess up the post count.

  10. Elly Lammers says

    I really like this simple grid loop. Only problem I have with it is that it’s also splitting the featured page widget in two. How can I prevend that? The code if( is_singular() )
    return $classes; is in it. Is there a code to skip the featured post and page widget? Or am I the only one with this problem?

    • Bill Erickson says

      That’s a good question. I don’t use the featured page/post widget so haven’t had that issue.

      I don’t have time to figure out a solution right now, but I can hopefully point you in the right direction. The queries should be different, so in your archive post class function, start it out with something like: https://gist.github.com/2577723

      If that doesn’t work, hook into genesis_before_post_content, run this: https://gist.github.com/2577727 That will show you all the values of $wp_query in every post (both your main loop and your featured page widget loop). Look for anything that’s different between them that you could use.

    • Mike says

      I’d love to know if this was worked out, and how…

      I tried the suggested solution, but it did not resolve it. I love this grid layout, but also want to keep the featured posts widget.

  11. Affan Ruslan says

    Thanks for the tutorial Bill.

    Quick question, if I would like to use it sidewide, I know I’ve to paste the last code into my functions.php file.

    How do I specify which size of image will be use? Let say I register new size of image, like

    add_image_size( ‘home_image’, 160, 113, true );

    How do I specify that image to be used in the grid?

    • Bill Erickson says

      Go to Genesis > Theme Settings > Content Archives and check “Include Featured Image”, and select the image size.

      If you have features (full width posts) and teasers (the two columns of posts), I like to do something like this ( https://gist.github.com/3172761 ).

      Genesis has a nifty feature in the genesis_get_option function that lets you to hop in before an option is called and modify it. Before Genesis displays your featured image, it checks the theme setting to see what image size you want to use. That above code checks to see if you have a post class of ‘one-half’ (which means this is a teaser) and if it does it uses the smaller image.

      • Affan Ruslan says

        Nice one Bill, now I got it.

        Last question, I see from the screenshot above (your gallery theme), the title is above your picture. However, I can see from your current gallery that you swap the position of title and image.

        How do I do that? (I’m asking since I couldn’t find the code from the github link you provided above. Most probably that one was the earlier version of the theme? πŸ˜€ )

  12. Phil says

    hi Bill,

    I was trying the SITE WIDE option which displays the posts in 3 columns – works really well.

    as an experiment I adjusted the code you had to try to show 2 columns instead [by using the class one-half instead of one-third and changing the current post query to 2 instead of 3]

    seemed to work except the excerpt text seemed to be wrapping along the right side of the thumbnail images instead of sitting neatly below the images as was the case with 3 columns.

    how can i fix it so it works for 2 columns instead of 3?



    • Bill Erickson says

      I’d have to see the site to provide specific styling, but my guess is that the image size you have is smaller than the width of the column. Genesis makes the post image float left, so if the image is less wide than the column the text will float to the right of it. You could override it with something like this: https://gist.github.com/3298352

      • Phil says

        Thanks Bill – you were right – image was slightly smaller than the column width.

        I added in the CSS tweak and it worked a treat



  13. Affan Ruslan says

    Thanks for adding the Advance Example.
    When you said three column, do you mean three column with a sidebar, or three column full width? Or it doesn’t matter since it uses percentage?

    • Bill Erickson says

      It doesn’t matter. It’s three columns within the #content column. Your site might be full width ( just a #content column), two columns ( #content and #sidebar) or three columns ( #content, #sidebar, and #sidebar-alt).

      If you take a look at the Column Classes CSS, you’ll see that .one-third makes something 31% the width of its containing element

  14. Jesse says

    This seems to mess the pagination up. It makes it think there are way more pages than there really are when you use numeric pagination. Does that make sense? Any ideas what needs changed?

    • Bill Erickson says

      There shouldn’t be any way to mess up the pagination using this technique. That’s one of the main reasons to use this technique over the Genesis’ grid loop, which does mess up pagination.

      Can you post the code you’re having an issue with?

    • Bill Erickson says

      How many posts do you have? The math suggests 758-767 posts.

      One of the reasons we modify the main query in be_grid_loop_query_args() is so that the pagination is correct.

    • Bill Erickson says

      I recommend digging into the numerical pagination function and see where that number is coming from. It could be a bug with my code (although I haven’t seen that issue before), an issue with some other code running on your site in your theme or plugins, or a bug in a WP core function.

  15. Jesse says

    I just realized that it only does it on the first page, so it must be using the number of posts on the page to calculate the total pages for the pagination. That makes sense. So the only way to make this work correctly with Genesis’ numerical pagination is to make all pages have the same number of posts?

      • Terran Birrell says

        This last function (be_fix_posts_nav) doesn’t seem to quite work. It gets the total number of pages right on the first page, and the last page, but the interior pages are low by one. Removing if( get_query_var( ‘paged’ ) ) return; does the trick, so basically having this run on all pages, not just the first page. Am I missing some problem this might cause?

        Otherwise this tutorial works perfectly! Thanks!

    • Gretchen Louise says

      Nevermind, I finally figured out I needed more than this, I needed to actually change the loop. Now it’s working!

      • Ben says

        What did you change in the loop to get the posts to go from full post content to summarized. I’ve gone into Reading and chose Summarized and that didn’t change it. I added excerpts and that didn’t change it. BTW, how would I get excerpts to show instead? And how would I summarize or show only 140 words, for example, of each post instead of all of the post content?

  16. julia says

    How can I specify the pagination for only the grid loop?

    I used the advanced example and specified the gridloop with:
    if( ! ( $query->is_home() || $query->is_category( ‘5467’ )))

    And I specified the pagination as follow:
    return array(
    ‘features_on_front’ => 0,
    ‘teasers_on_front’ => 60,
    ‘features_inside’ => 0,
    ‘teasers_inside’ => 60,

    The gridloop is now there for that category and shows the 60 posts but the other categories are also showing the 60 posts instead of the ‘normal’ 10.

    How can I specify 60 teasers for only the gridloop?

    • Bill Erickson says

      Hmm, it should only be affecting that specific category. Your other categories are displaying 60 posts but not in a grid? The exact same logic that determines if the grid loop is used, determines if we should change the number of posts. I don’t see how, using the code above, you could have one but not the other.

      Are you sure there’s no other code in your theme or plugins that could be causing this? Did you try anything else to increase that category to 60 posts?

  17. julia says

    You are totally right. I forgot that I changed the Read settings.

    Thanks alot. Great code. It works brilliantly with Genesis.

  18. A. Tate Barber says

    Hey Bill! Great tutorial.

    On the front page of my blog (a blog template), I have a custom post type called “home_column” being displayed after the Genesis #header and before the latest blog posts in the Genesis #content. Here is the Gist: https://gist.github.com/3862002

    I am trying to incorporate your grid loop function (advanced) into the displayed posts. Worked like a charm! However, I also trying to customize the post content. Here is the Gist: https://gist.github.com/3862034

    I have input that into your grid loop function. When I do that, this manually edits the content of all of my home_column posts to “Test Front Page Feature Content”. I thought that when displaying my home_columns by using get_posts, it would operate smoothly as get_posts is supposed to be used outside of The Loop and my use of the_content filter would operate inside of The Loop (or so I thought).

    Of course I am sure the solution is simple, as I am not as familiar with the WP_Query and The Loop as I would like to be, but maybe you could offer a quick solution to save me some time.


    • Bill Erickson says

      ‘the_content’ filter is always applied to the_content() function. the_content() is actually just get_the_content() with ‘the_content’ and a few other things ( see /wp-includes/post-template.php: https://gist.github.com/3862103 ).

      I’m not sure what your end goal is, but if you must use ‘the_content’ filter, limit your modification to posts in the grid loop. See my changes here: https://gist.github.com/3862125

      Your original code was checking if the grid loop was applied to the main query on the current page (returning true for the main query AND any custom queries on the current page). This checks if the current post is in the grid loop, or more specifically, if the current post has a class of ‘feature’ or ‘one-third’, which it could only get by being in the grid loop.

      • A. Tate Barber says

        Well, mostly, I was simply experimenting with your grid loop for some learning material to work on and better my knowledge of WP + Genesis. I guess the best use of the grid loop that comes to my mind is to have the featured posts display a longer string of characters and the teaser posts to display a shorter string of characters (or using the excerpt). With your changes (by helping me understand the content loop as well at the wp_query), I think I figure out how to use some Genesis hooks to get the result I need.

        Also, I was trying to play around with the jQuery isotope plugin (http://isotope.metafizzy.co/) and jQuery infinite scroll plugin (http://www.infinite-scroll.com/) to incorporate them into a “Pinterest-looking” style of blog page that is animated and responsive as well as page-less. By using the grid loop (or just being able to edit the classes), I was trying to make it so that the teasers were the only things that the plugins were effecting.

        Thanks for the help!

  19. Reid Crandall says

    Great tutorial. It was exactly what I was looking for. Still learning WordPress and Genesis, it really helped. I am wondering about styling the posts. I see that you’ve got the images on your blog styled and always seem to have a the image in the thumbnail (for both feature and grid) sized and cropped very neatly, showing a nice view of the image. Are you using the thumbnail from WordPress to choose what part of the image shows in on the front page? I’m having a little trouble figuring out what my options are and how to get to them. Just editing the CSS for post-image isn’t getting me what I want exactly.

    Also, is there a way to add a class to the image for each type of post so that I can style the feature and grid images differently than all of the post-images inside the single pages?

    Is there a way to set the images sizes to be responsive instead of just setting the height and width in pixels?

    Sorry if this is a lot of stuff. I’m full of questions and am in the “soaking up info” phase here.

    • Bill Erickson says

      Yes, I’m uploading a large image for each post, and it’s being resized to 500×333 (used at top of single post and on features in the archive) and 212×56 (for the teasers in the archive).

      I’m letting WordPress do the crop. If you don’t like how WordPress is cropping it, try using my Image Override plugin. It lets you upload alternative images to use for certain image sizes. But make sure you’ve manually cropped it because WordPress won’t crop the images you use in these overrides (that’s the whole point).

      I don’t believe you can add a class to the image itself, but you’re adding classes to the whole feature and teaser, so use those: https://gist.github.com/3867171 (I’ve also made the images responsive in this code)

      • Reid Crandall says

        Thanks Bill. Just had a chance to sort this out, and all seems to be headed in the right direction. Much appreciated.

  20. julia says

    I tried to get a gridloop with five next to each other. So I changed one-third to one-fifth but this doesn’t work. I tried one-half which works. But one-fourth, one-fifth and one-sixth all don’t work.

    Any suggestions where to look?

    • julia says

      Sorry, wasn’t reading it closely enough. I forgot that I had to divide it too.

      So in my case $wp_query->current_post % 5

  21. julia says

    I was trying to get a sort on a custom field with posts that are in my grid loop. I added this function to the functions.php of genesis, but probably this is not the right way?

    It interfers with the grid loop because now it only shows the ‘default’ number of posts instead of the defined number in the grid loop.

    I added this code right after the grid loop code:

    add_action(‘genesis_before_loop’, ‘custom_sort’);
    function custom_sort () {
    if (is_category(‘5467’)) {
    global $query_string;
    query_posts($query_string . “&orderby=meta_value&meta_key=sort_plek&order=desc”);

  22. Dario says

    Hi Bill!
    sorry for my bad english.
    I’m using Education Child Theme.
    How can I show only one category on the homepage?

    Thank you,

  23. Mark Ratledge says

    Bill, Very nice grid setup, and I’d like to use it in a non-genesis theme, but I’m not having any luck putting the advanced example in functions.php and having it work. I’m using the standard loop in index.php. But it’s not hooking in and working; any ideas on what do I need to try to get this to work in a non-genesis theme?

  24. Mark Ratledge says

    Bill, Well, you can delete that last comment of mine. I did get it to work; don’t know what I forgot! But I find I need to use much different CSS because I need to use text (from the_excerpt) rather than images. And each text block will vary in size, and the CSS and loop in your code doesn’t display an even grid with uneven amounts of text. I’m working with another post grid system. Thanks anyway, Mark

  25. julia says

    I added something so that the gridlooppage doesn’t look wierd on a mobile responsive theme (genesis):
    remove_action( ‘genesis_meta’, ‘prose_add_viewport_meta_tag’ );

    But would it be possible to make it specific for the grid loop category so the other pages would have the mobile responsive design? Where in the code should this line then be placed?

    • Bill Erickson says

      I recommend you update your responsive CSS so that the grid loop looks good on mobile devices, and all pages of your site look the same.

      But to address your question about how to remove that action only if the grid loop is being used, try this code: https://gist.github.com/4024820

          • Bill Erickson says

            No, I don’t typically place HTML in the editor. The approach I take depends on their needs. Sometimes I’ll create a ‘rotator’ post type if they have a lot of information for each slide (image, title, subtitle, link, button…). Sometimes I’ll add a checkbox to the media uploader “Include in Rotator” and build a rotator with all images attached to the current page marked that. And sometimes I’ll create a metabox for them to manage the rotator.

  26. Ian says

    Hey Bill,

    This is a fantastic tutorial. I know enough to be dangerous so this has really helped.

    One thing I’m trying to figure out but can’t so far…

    How do I change the class of the featured and teaser images from alignleft to aligncenter? I’m using the Genesis Sandbox theme which means I changed the one-third class to fourcol and it is wrapping the titles around the image, but if I change the class to aligncenter in Chrome, it works.

    Thanks for your time, and your epic resources on how to bend Genesis to your own will! πŸ™‚


    • Bill Erickson says

      Genesis hardcodes the ‘alignleft’ class in there, so the best thing to do is unhook the Genesis Post Image function and rebuild it as needed. I pulled the code from /lib/functions/post.php. I changed it to check to see if ‘one-third’ is in the current post class; if it is, use aligncenter; if it isn’t, use alignleft.


      • Ian says

        Thanks for this bill, it worked perfectly for what I needed.

        I also wanted to ask, you suggested the following snippet to show only posts from a specific category on the homepage:

        * Limit homepage to one category
        function be_home_query( $query ) {
        if( $query->is_main_query() && $query->is_home() && !is_admin() )
        $query->set( ‘category_name’, ‘sample-category’ );
        add_action( ‘pre_get_posts’, ‘be_home_query’ );

        When I implement this, the featured post image size is the same as the grid image size. Is that normal behavior? And if so, how would one go about amending it to the larger image size?

        Thanks again for all your work on this. It never ceases to amaze me how skilled you are!



  27. Alex says

    I cheated and used the plugin.

    Big thanks for it and this code. Am hoping to see higher page views because of grid archive presentation.

    Genesis rocks!

    Cheers from Italy,


  28. Mike Dutton says

    Massive thanks for all this.
    I have learnt such a lot from your posts.
    I have a quick question about how to deal with targeting just one category.
    Looking at the section starting “Sections of site that should use grid loop”
    I am changing is_home() to is_category() which works to target categories and not home
    but when I then try to specify a category as “is_category(4) ” or using the category name or slug
    I can’t seem to target one particular category.
    As an aside to this what do you think the best way to apply different grids to different categories is.
    Thank you again for your tutorials.Mike.

  29. Amy says

    Hi Bill,
    Thanks for this code and the plugin as well. I works great but I am really stuck on how to style my text in the teasers. All my h tags are ignored as well as the strong tag.

    Thanks for the help.

  30. Amy says

    Following up on my comment, the html tags are being output as text as seen below:
    p>Services: Detailing, Fabrication, Joist & Deck, Sound Wall, Safety Line

    I am sure I am missing something – the text should be able to be styled.

    • Bill Erickson says

      (my comments allow HTML so you should break it up before commenting, ex: < strong > )

      What you’re seeing is how WordPress is designed to work. See the Codex: Also in the latter case, HTML tags and graphics are stripped from the excerpt’s content.

      If you display full post content and use the more tag, HTML tags will NOT be stripped out.

  31. Amy says

    Hi Bill,
    There is the word “grid” just below the title and above the image when displayed in a grid.

    I made the following changes to remove the links from the title and image as all there is no need to click through to another page.

    I added this code to my functions.php file:


    Thanks for the insight you may have to remove the pesky “grid” word!

    • Bill Erickson says

      The code you provided did not contain the word ‘grid’ so it’s not responsible for that. Search through your whole functions.php to see if you can find the word ‘grid’ anywhere.

      • Amy says

        I took a look through my functions file and revised the line that brings the image back in. The new section of code looks like this:


        Thanks for your help! It looks great now on the archive page with no title or image links to a single post.

  32. Dorian Speed says

    Bill, thanks so much for this detailed code. I’ve used it on a couple of sites already. I may be missing something, but is there a way to assign different character limits to the features and to the teasers?

  33. Greg says

    The code in the “advanced example” does not seem to apply to the built in Genesis blog page template . Any hints to make the teasers and features settings apply to that as well?



    • Bill Erickson says

      Don’t use the blog page template πŸ™‚

      The blog page template removes the default loop and replaces it with its own. The only way to make it apply is to delete everything in that page template, or just don’t use it.

      There’s no reason for using that template to begin with. The only reason it is in Genesis still is for legacy support.

      If you want your blog on a page other than the front page, do the following:
      – Go to Pages > Add New and create a page called Home and one called Blog
      – Go to Settings > Reading, set the front page to “Home” and the posts page to “Blog”

      • Greg says

        Hello again,

        As the page_blog.php file is part of the core Genesis framework and can’t be removed, is there a way to make it display the default loop instead of it being replaced?

        I’m thinking of a circumstance where a child theme includes a home.php file. Users of child themes appear to be accustomed to the home page just working with out choosing a home page in the reading settings. Then they create their blog page with the built in template.

        While this may not be ideal and it is advisable to not use page_blog.php altogether, if there was a way to make the template just load the default loop, then there would not be a need for special user instructions.

        Am I making sense?



        • Bill Erickson says

          You can create a file in your child theme named page_blog.php, and it will replace the one in Genesis. But keep in mind you’ll need to build a custom loop in there. The code described above is designed for modifying the main query (the proper approach). You’ll need to do this on a custom query.

          A better approach would be to rename home.php to front-page.php (as it should’ve been done in the first place). Then you can create a Home and Blog page, set them up in Settings > Reading, and the main blog loop will be used on the Blog page.

          • Greg says

            Thanks again. I’d like to do things the proper way when advised so I’ll get this working with the with front-page.php and the reading settings.

            I get so used to doing things the StudioPress child theme way that sometimes I don’t realize that their approach out of the box is not always what is most recommended.

            Take care,


  34. Rod says

    Hi Bill,
    Grid post layout looks fantastic. I’m trying to do something like this for archive pages (search, tags, categories) on my website using WordPress with slightly customised Twenty Twelve theme (changing css, child theme, layout) . Being new to WordPress coding I tried following instructions, but grid does not seem to work. I guess it will only work with Genesis out of the box? Any hints on how this could work with default WordPress theme?
    Thanks in advance

  35. T.Marquez says

    I’ve been trying to implement the β€œAdvanced Example” in my functions.php and have set my β€œBlog” in Reading Settings, however when I load the Blog page, nothing appears. I’m not quite sure what I’m missing. I did see any posts above we are not to use page_blog.php as a template to make this work (though I could have misunderstood that). I’m not seeing the results of what I put into the functions.php on any of my pages (archives, etc.).

    • Bill Erickson says

      Have you tried using the plugin listed at the top of the post?

      I’m sorry but I can’t troubleshoot this issue with the information you’ve provided.

        • Bill Erickson says

          Based on the body classes of that page, it looks like you haven’t set up that page as the Posts page in Settings > Reading. It is just a standard page right now.

          • T.Marquez says

            Wow, I had no clue having the default home.php template in the Enterprise1.1 theme I use would cause me this many hours of grief. I won’t pretend to understand why this was causing our issues, though I’m a curious. Anyway, you should have my email address. I’ll assume you have a PayPal, send me your info and I will compensate you for your time answering my clueless posts. Thanks!

        • Bill Erickson says

          The home.php file is used for styling the main posts page. It’s named this way because it was created before you could have your main posts page on other pages.

          Despite my many complaints, StudioPress still builds their homepages using home.php, rather than the correct theme file: front-page.php. Any time I use a StudioPress theme I rename their home.php to front-page.php.

          This is why Genesis has that blog page template – because the way StudioPress uses home.php means you can’t have a blog the normal WordPress way.

          My email is [email protected]. Thanks!

  36. Greg says

    But if StudioPress didn’t use home.php that way, then for their users to get the demo’d home page, they would have to create a blank page and set it as the front page in the reading settings, correct? Is this perceived as too many steps/too confusing and perhaps why they won’t make the change to do it the WordPress way?

    • Bill Erickson says

      That’s exactly why they do it. They think doing it the WordPress way would result in more support requests, which is probably true. But by making it slightly easier for users who do want it done the StudioPress way, they make it very difficult for users who want it the WordPress way (you have to edit theme files)

      It’s too late for them to change it now since all their current themes and support documents reflect this way. But I like to bring it up to point out that just because a large company does it one way, doesn’t mean it’s the right way. When considering what template to use, consult the code and Codex.

      • Dorian Speed says

        I didn’t realize this because I have cut my teeth on the Genesis framework. Would it be advisable to go back and duplicate the home.php files on various sites I have built, save each duplicated file as front-page.php, and change the settings accordingly? Or should I not bother but just make sure to do it right going forward?

        • Bill Erickson says

          I wouldn’t bother going back and changing anything. It works, so no need to mess with it.

          It’s just a good idea going forward to name your theme files according to how WordPress will use them.

          Do you want this file to be used on the front page? Then use front-page.php (example: a bunch of widget areas, like most of StudioPress’ homepages)

          Do you want this file to be used for displaying blog posts, regardless of where the blog is? Use home.php

          • Greg says

            It is what it is, but would it make sense for WordPress to change how they do it, so a theme developer could force a front page layout without the user having to create a blank or “dummy” home page?

        • Bill Erickson says

          A similar feature was actually slated for 3.5. When in Settings > Reading, you could have WordPress create the page your blog was going onto (one less step). I wasn’t following it closely and was surprised when I didn’t see it in 3.5. I dug up the ticket and it was pushed for usability reasons (couldn’t figure out the easiest way to do it).

          I don’t think it’s a good idea to allow themes to force anything. But if you really wanted to, you could code your theme so that on activation it created a Home and Blog page, and then updated the database options to use Home on front and Blog for posts. I think WooThemes’ support plugin does something similar to this.

  37. Michelle says

    Hi Bill,
    I wanted to thank you so much for posting this. It has been a huge help for me as someone that is pretty much a novice when it comes to coding such things. I also have a question if you don’t mind.

    I am building a test site at kwerkykats.com with the Magazine Genesis theme. I am using the Genesis Featured Widget Amplified on the homepage to be able to setup the posts in a grid and show only the image and post title. I was wondering if there is a way to alter the grid coding to do the same for the archive pages? The archives currently show the number of comments and what the post is filed under and tagged with (I already added your coding to get rid of the excerpt) and I’d like to get rid of that if possible, leaving just the image and post title as on the homepage, but have no idea where to start.
    Thank you so much again!

    • Bill Erickson says

      Yes you can. Just hook in before the post is displayed and check the post classes to make changes.

      Let’s say on the grid posts you want to remove the post info, post meta, and post content/excerpt. Something like this should do it: https://gist.github.com/billerickson/5021632

      That code snippet assumes your grid posts have a class of ‘one-third’. If you’ve broken them into two columns, you’d use ‘one-half’.

      • Hina says

        Hello Bill,

        I am using the plugin and I need the exact functionality as per Michelle but unable to get it by above code snippet. Are there any modifications for the above code snippet for plugin users
        Please ignore my earlier comment where I posted the same problem as Michelle did.


  38. Danielle says

    Hi Bill, I have installed your plugin because I desperately want to display posts like this. My question is, is there any way to change the information displayed, without editing the plugin? I’m trying to build a visual archive, and what I’d really like to do is have the “teasers” display the featured image linked to the post, and NOTHING else (no title, no post meta, no excerpt or content.) I can even do without the “featured” part, if that’s easier.

    Is there a way to accomplish this with the plugin, or should I give up and start working on grid loop code?

    Thanks for your help!

      • Danielle says

        Thanks so much! That’s just what I want to do here (sorry about the 404 on my earlier comment, left off the end.)

        My next question is, I set up a page using the blog template, to display one category only (the non-visual-archive category). It seems no matter what settings I tweak, it too is displaying in the grid – is there an easy way to exclude just one category from the grid display? I didn’t see a way on the plugin settings.

      • Danielle says

        Hi again Bill,

        I’m still unable to get these adjustments working properly (I commented a while ago but it was moderated and never appeared.)

        Basically, following the functions.php edits above, if I leave it as:
        if( !in_array( ‘one-third’ …
        nothing is removed.

        If I change it to:
        if( in_array( ‘one-third’ …
        The title, content, meta and info are removed as desired, but for some reason they are also removed on the single post display. (No title, content, image, etc is displayed.)

        What am I doing wrong?

        • Danielle says

          Never mind, I changed the class to ‘one-third teaser’ and that fixed things right up. Thanks again for your help!

  39. Richard Buff says

    Bill, Earlier in these comments you said you use a custom Flexslider for all clients. I recently saw you mention Soliloquy on your post about consulting businesses. On the Soliloquy site is a quote from you “I used to custom build rotators for every project since I hadn’t found a tool with the flexibility I needed. Now I have Soliloquy. It works great out of the box, has an easy-to-use interface, and gives you the power to customize everything with hooks and filters.” Do you still use Flexslider or has Soliloquy met all your recent needs? I’m thinking about purchasing a Soliloquy developer license.

    • Bill Erickson says

      I use Soliloquy on a lot of projects where the client wants the ability to build his own rotators. But in the instances where I want to keep the backend as simple as possible (and not flexible, so the client doesn’t break it) I’ll often build my own slider.

      For instance, the homepage might have a rotator on it. I’ll create a metabox that shows up only on the homepage and lets them upload as many images as they want. I’ll then use WordPress to scale/crop to right dimensions, and then render as a flexslider.

      I’m sure I could use Soliloquy for these as well, but I’m used to my ways πŸ™‚

      • Richard Buff says

        Hopefully I’m not too much of a bother with this followup, but what about carousels? Particularly a carousel with custom post types? You ever have to custom build those? I’m about to need a carousel to allow left and right scrolling of Community thumbnails and titles, and I thought about trying to custom build one using the caroufredsel jquery script. It looks to me like you may have done exactly that on the bottom of this page: http://www.dcsimedispa.com/ . If so, is that something you’d recommend still? ( I also just discovered that Soliloquy apparently supports custom post types and has a carousel addon.)

        • Bill Erickson says

          For jQuery rotators that are more complex than a simple image (flexslider), I hire a jQuery developer to implement it. That’s what I did for DCSI

  40. Bruce Munson says

    Hi Bill,

    I’m using your ‘Advanced Example’ with class of one-half instead of one-third. Works great except for a conflict with the Genesis Featured Widget Amplified plugin.
    I have the GFWA set up like so http://screencast.com/t/ObJ76IDy to display two posts in a subfooter widget area I created. When your code is used, it adds ‘one-half first’ to the class of the second post (not the first) like so http://screencast.com/t/pjghDodUDE. This obviously causes a problem in display (http://screencast.com/t/clISQFmEhpPn).

    I tried to find the problem in the code, but haven’t been able to crack it. Any ideas why it is adding the extra classes to the GFWA markup?

    Thanks much!

    The code: http://pastebin.com/VLWFWKPv

  41. Kearin says

    I was looking at your blog you mentioned, one thing I am trying to do is add a separator after 3 posts so I can create nice even rows, I noticed you have after each 2 posts on your blog, I did not see how to do this in the code above, would you be able to please share with us.

  42. Mike says

    Good detail, thanks Bill. I’m actually trying to remove the grid loop. I’ve figured that out for the home page, but my ‘page 2’ of posts shows up in grid format. Strangely my domain.com/page/2 shows the grid, however my domain.com/blog/page/2/ shows up like my homepage (eg. 5 posts, 600×200 featured image, 145 text content). As the guru, any idea how to configure to remove grids on page 2? Thanks!

  43. Dorian Speed says

    Hi, Bill – finally had a chance to test this, on the site here:
    I have tried both code snippets, and I’m using the plugin. I’m working with the basic Genesis sample theme and I’ve deactivated all other plugins.

    When I try this one:
    I get “Fatal error: Call to undefined function be_grid_loop_pagination() in /home/convola/public_html/mwilby/wp-content/themes/rocketman/functions.php on line 22”

    When I try this one:
    it doesn’t seem to affect the length of the excerpts, and when you view an individual post, there’s no content.

    FWIW, I have the same issue on this site:

    I wasn’t sure if the Genesis theme settings should be set to “show content” or “show excerpt” but I’ve tried both configurations and have the same result.

    I’d appreciate it if you have a chance to take a look.

    • Bill Erickson says

      Best place to look is in the plugin itself.

      The plugin is built as a class and the functions are methods. So be_grid_loop_pagination() does not exist as a function, and your code is rightly telling you that. That code only exists if you are NOT using the plugin, but using the series of functions listed above.

      You were correct, there was an error in the second code. I needed to move the remove_action() inside the function so it only removed the content if we were providing new content. Here’s the updated code: https://gist.github.com/billerickson/4179753

      If that second code doesn’t work for you, view the source of your page and see what classes are actually being applied to your teasers. I’m assuming you’re adding a class of ‘teaser’. If you’re adding something else, like ‘one-half’, then do that. You just need to find a class that is on all teasers but not on the features.

      • Dorian Speed says

        Got it working! (have to give credit to Brandon Kraft for the assist). Here’s what was happening.

        It’s applying the class “one-half teaser,” not “one-half” and “teaser” as separate classes. So I’m guessing if I’d said I wanted three columns instead of two, I would need to change it to “one-third teaser.”

        I also changed it from get_the_excerpt to get_the_content. Since I hadn’t changed the default excerpt length of 55 words, it wouldn’t allow me to create an excerpt that was longer than 55 words. But this seems to be working. I haven’t gotten all of the styling sorted out and it may be that I need to switch back to using the excerpt and just modify the default length of the excerpt in order for other things to work right, but for now – this solution is working. Thanks again for your help.

        I’m still figuring out GitHub, so I’m not sure this link will work, but here’s the code I am using: https://gist.github.com/DMSpeed/5207985 I am also going to post this on the StudioPress forum where someone’s asked this same question.

  44. Raghu says

    Bill – I’m trying to insert Adsense after 2 Features in home page. Is there an example that I can follow?

  45. Terence says

    I am a website designer ~ not a developer ~ so any help you can give me would be much appreciated.

    Here’s a loop that displays the title and an excerpt with a link for each post in the section ~ https://gist.github.com/SocialStrategy/5270605

    How do I replace the loop in Genesis with a loop that loads post URLs rather than categories?

    The goal is to not use a blog but end up with a structure like this http://domain.com/page/comment/

    Thanks for reading this far.


  46. Gemma Wild says

    Hi Bill

    Thank you very much for posting this tutorial, works brilliantly and is a life saver for someone like me who isn’t so fluent in this kind of coding.

    Would you be able to help me just a little bit further? I am displaying the 3 grid loop on the homepage and all archive, category and tag pages, etc, and am also using the Genesis – Featured Posts widget to display 1 featured post (title and thumbnail) in the sidebar throughout the site. Of course, on the pages that display the grid loop, the widget copies the behaviour and displays a small image and the title in 1/3 of a column. On normal pages without the grid loop, it displays the featured post at 100% width of the widget, as intended.

    You have provided a way of excluding the grid if its on a singular post so I was wondering if there is a way I can ask it to ignore the grid behaviour if it’s contained within a widget?


    • Bill Erickson says

      I’ll need to do some testing to see why this happens in the Featured Posts widget. My guess is the Featured Posts widget is doing something wrong.

      Are you using the widget built into Genesis, or are you installing the “Genesis Featured Widget Amplified” plugin and using its widget?

      The code above and in my plugin is limited to the main query on the page (that’s the $query->is_main_query() part). Any secondary queries, like those in widgets, should not be affected. The Featured Posts widget must be telling WordPress that it is the main query.

      • Gemma Wild says

        I’ve double checked to be sure and yes I am using the built in Genesis Featured Posts widget and not a plugin.

        To be clear, I am using the ‘Even easier sitewide’ code given above which doesn’t appear to have the ‘$query->is_main_query’ code you’ve mentioned in your reply. Should it? =)

        My widget settings are, although you may not need them:

        All Categories
        Number of Posts to Show: 1
        Show Featured Image
        Thumbnail 150px by 150px (though it displays 54px on pages containing the grid loop)
        Show Post Title

    • Bill Erickson says

      The issue is that the image you’re using is wider than the column it is in. The column is 201px wide. The image is 202px wide (200px + 1px border on left and right = 202px).

      If you make the image 199px wide, it will be just the right size.

      • Nigel Parry says

        Thanks Bill, that had confused me for a while. Your solution worked fantastically with a quick image size add to functions.php, Regenerate Thumbnails, and reselecting the new 199 x 199 pixel size in the Grid Loop settings.

        I also noticed that the Grid Loop, when turned on, appears to override thumbnail image sizes in the Primary Sidebar (the site’s Blog teaser, an instance Genesis Featured Widget Amplified).

        When I had a full width Feature image and Teasers selected in Grid, the blog widget image in the Primary Sidebar was the full size of the Sidebar width. When I opted in Grid Loop for no Features but just Teasers (2-across), then the image in the Primary Sidebar became about 50% of the width. Is there some crossover of CSS going on here between the main page and the sidebar images? Should the Grid Loop be affecting sidebars?

  47. Mike says

    The Display Posts Shortcode plugin is brilliant! It handled the issue with the grid loop and the featured widget amplified. I was having the same issue with featured posts in the widget being formatted in grid columns. Spent three hours today trying to sort it out and finally got smart and came here. Thanks Bill!

    • Nigel Parry says

      I couldn’t agree more Mike. Thanks Bill, that plugin is just unbelievably richly featured. πŸ™‚

  48. Qing says

    Hi, Bill
    I bought and installed the “Expose child theme”. I want the exact layout structure of its home page, which might be “grid loop” (sorry, I am new for the website design). I imported its xml file, and it doesn’t work; I installed your grid loop plugin, it don’t know how to set it up. I am waiting for your kindly help. THANK YOU.

    • Bill Erickson says

      You’ll need to speak with StudioPress support. I don’t provide support for my plugins or commercial themes.

  49. Daniella says

    Hi Bill,
    Thank you SO much for this. I’m having a bit of trouble getting it to work only on the home page. I’m using Epik, a community theme. I’ve tried changing is_singular() to a few things but I haven’t found the right solution. The front page is set to Latest Posts and I have a Blog page which I don’t want to have three columns, just the home page.
    Any help is much appreciated!
    Thanks again.

    • Bill Erickson says

      I’ve never used that theme before, but my guess is that they are using the incorrect theme file for the front page. The front-page.php file is to be used for custom front pages, and home.php is to be used for blog pages. This way you can make your blog page something other than the front page.

      So if you open your theme and see home.php, rename it to front-page.php. Then go to Pages an create a page called Home. Then go to Settings > Reading and set the front page to “Home” and the posts page to “Blog”.

  50. Greg says

    What if we just wanted the images before the titles for the “teaser” posts, but still after for the “feature” posts? How could we conditionally target those?



  51. Greg says

    Hi Bill,

    One more question (OK, probably not really the last question), how do you set it so the teasers show an excerpt (or content limit) and the features show the full content (but maybe broken by the ‘more’ tag if set in the editor)?



  52. Kate says

    This post is great! I’ve used a lot of what you said in the comments to customize it to exactly what I want, which has been awesome- I’m using excerpts in the teasers and the featured posts are displaying in full. My question is I wanted the teasers to have a thumbnail image, so I displayed the featured images on the excerpts, but that means that the featured image displays on the featured posts as well. Is there a way to remove it the featured image from the featured posts in the functions file? I’m having trouble isolating the featured posts for some reason, I keep removing all the featured images.

    • Bill Erickson says

      You should be able to target the feature posts based on the classes you’ve added to them. View the source of your page and see what classes are on the feature posts. In the code above I’m using the ‘feature’ class.

      Then you can build your own function that adds an image based on which class it is. if( in_array( 'feature', get_post_class() ) ) do this. Go through the examples in the other comments on here – I’m sure I’ve written the code already.

  53. Amber @ Au Coeur says

    Hi Bill,

    I was wondering if you had noticed an error or issue with using this code in Genesis 2.0? I copied the grid loop code from one of my old sites to one I am playing around with that is running 2.0 and I’m getting errors. Have you experienced this?

  54. Sandeep says

    Hi Bill,
    Thanks a lot for publishing this tutorial, it really is a great help. I have previously been using your plugin as well and there is one place where I am stuck up and would request your help. When I enable the plugin/code in functions there is a place on the homepage that remains blank. Its mainly after the seventh post where the numeric pagination showed up. Although I have made the navigation disappear the blank space continues to remain. You may find that on the homepage of my blog(TopNetTools[DOT]com).
    I’d appreciate if you could help me out here. I’m sorry if I am repeating the question although I couldn’t find any relevant answer in the comments above.

  55. Tracy Scherrer says

    Thank you so much for both the tutorial & the plug-in. I am moving sites from Thesis 1.85 to Genesis. I have been hacking solutions to my display-archives-in-a-grid-like-Thesis-teasers problem for two days. Your site is a goldmine – again, thank you!

  56. Cliff Smith says


    Does this code work with Genesis 2.0? I notice there isnt an archive.php but a page_archive.php.

    When I paste the 1st code into the page_archive.php it’s not creating any columns. Just wondering if the code needs to be updated, or if it’s something I’m doing.


    • Bill Erickson says

      Yes, all the code works in both Genesis 1.x and 2.x.

      Make sure you only edit your child theme, not the actual Genesis theme files.

      page_archive.php in Genesis is the “Archive” page template, used for displaying recent posts, pages, authors… That’s not the right file for these changes.

      If there’s no archive.php in your child theme, you can create one.

      I recommend you use the plugin instead of the code. The code is here more as a proof-of-concept, to show people how and why it works. For actual implementation it’s easier to just install the plugin.

  57. Hina says

    Hello Bill,

    Many Many thanks for this wonderful tutorial.

    I am trying to achieve the look as per your Gallery theme http://photography.billerickson.net/sets/all/

    I am using your plugin I used this code to remove the content on teasers:

    I have almost acheived the look except under the title it shows 3 dots (…).
    How to totally disable entry content division so that only image and title below it could be seen?

    Thank you for your help in advance.


    • Bill Erickson says

      This plugin (and the code displayed in the post) is designed to create a grid layout, not a masonry layout.

      This theme might be available soon through StudioPress. But you can still view the code (masonry args) to see how he’s done it.

  58. Janet Atkinson says

    Hello Bill,

    Thank you for your informative website!
    My question is this:
    I need to create a grid display for 3 separate category sections of all posts on the home page.
    How do I create a separate query for each category? I’ve used your post-class code in my functions.php and have got my 3 columns setup to display all at the moment. Just need to subdivide by category. I can create a separate home.php file if necessary.

    Any tips would be greatly appreciated! Thanks so much!

  59. Nathan says

    Great tut. Will this work in the ‘genesis_after_entry’ filter on a single-custom_post_type.php page? I’m trying to make a grid that displays related posts from the same taxonomy as the current custom post type, and I’d like to incorporate this into my template. Essentially, I’m trying to build a ‘related products’ grid that pulls items from the taxonomy the current custom post type shown is from.

    Where I have some confusion: Does a single post/page template have a loop run in it, or does it output only a single page/post? If no loop, natively, I’m guessing I probably need to:

    1. Call a genesis loop into the genesis_after_entry hook.
    2. Then add an action to the loop to begin entering you function/similar to achieve what I’m trying to do?

    I’m guessing I will have to figure out how to query the taxonomy and then write something to eliminate the existing post ID from displaying in that loop feed, but I’m just having some trouble trying to figure out where to start with this. I really want to try to keep this contained to this template file only, where it will serve its purpose.

    Any tips or ideas to push me in the right direction?

    BTW, thanks for the great tuts… your blog has been very helpful as I am trying to learn how to edit my themes’ php files.

    • Bill Erickson says

      No, it will not work on the ‘genesis_after_entry’ hook. This only applies to the main query on the page, not to custom queries.

      The loop on the single post/page is what outputs the single post title and content.

      For what you’re looking to do you’ll need to do a custom query. When looping through you posts, wrap them in column classes to break it into multiple columns. Here’s an example: https://gist.github.com/billerickson/7271816

  60. Brandon says

    Hi Bill,
    Thanks for the great tutorial! I’m hoping you can help me solve a responsiveness issue I’m experiencing with this method. I would like for the posts to be in two columns once the screen size gets to a certain width. I’ve achieved this by changing .one-third to 42%. The problem is that after every third post, the next post starts a new row. So the format ends up like
    this: instead of this (what I want):
    Post 1 Post 2 Post 1 Post 2
    Post 3 Post 3 Post 4
    Post 4 Post 5 Post 5 Post 6
    Post 6
    Do you have any thoughts on how this could be fixed? The problem can be seen on the site that I listed in the comment form.
    Thanks a lot, Bill!

    • Bill Erickson says

      The way I’ve done this before is different classes. Use one-third and first for the desktop view. Then use tablet-one-half and tablet-first for lower resolutions.

      Hope that helps

      • Brandon says

        Thanks for the response. I was actually able to get it to work by removing the clear: both attribute from the .first class.

  61. Heidi @ One Creative Mommy says

    Hi, Bill. I absolutely love your plugin! Thank you so much for creating it. In reading through all of these comments, I’ve found lots of tweaks that I can implement on my site. Before I knew about the plugin, I started with a free chlld theme that included the loop function (Adaptation). I couldn’t get the loop to look right, so I deleted that plugin’s home.php file (the place where that theme included the loop functionality) and added your Genesis Grid plugin instead. It worked fantastically! I just have one problem. I can’t figure out how to get any of the posts (the full-width or the teasers) to show a [read more] link. I have one full-width teaser followed by grid teasers. If you’d like to see my site, it’s OneCreativeMommy.com. Thanks so much!

      • Heidi @ One Creative Mommy says

        That’s weird. It worked perfectly on my test site, but on my real site, it only adds the read more text to the smaller excerpt post and not to the full-size feature. They both have exactly the same functions.php file. I must have something different in the settings somewhere. I’m happy to have it partially working, though. Thanks again.

      • [email protected] says

        I figured out the problem. It’s the posts with a manual excerpt included that won’t show the read more text. I’ve been fiddling with it, but it’s too advanced for me. I had this code working (although I hated the styling)

        function excerpt_read_more_link($output) {
        global $post;
        return $output . ‘ID) . ‘”>
        add_filter(‘the_excerpt’, ‘excerpt_read_more_link’);

        but when I checked back on my site a little while ago, all the text of the posts disappeared. I put your code back. I guess I’d better just be happy with what I have. Maybe I’ll just quit putting in excepts! Thanks again.

  62. Chris says

    Hi Bill,

    This was the exact bit of code I was looking for to go into a current project. I have the advanced version of your code working like I need it and have added in the custom excerpt length code which you have here:


    The last bit that I’d like to do is add the formatting and so forth back to the excerpts for the featured posts and add in a read more link as well.

    I have a rather long excerpt on the featured post and it just looks like one massive slab of text at present so really hope you have some magic up your sleeve that can point me in the right direction.

  63. Drew | The Hungry Partier says

    Hi Bill,

    Great Tutorial!

    I am using Grid Loop on my homepage of my blog, and it is only showing 24 posts, when I want it to show 35. I have tried everything and I just can’t seem how to change this!

    Can you please offer any advice?

    Thanks so much!


  64. Amy @ Wildflower Ramblings says

    Hi, Bill, this is so helpful (as I am very new at coding if I can call it that) — I want to put post features and snippets like you’re doing, but above them I want two full posts. How can I do this? Thanks for any help you can give!!!

  65. Robin Rowell says

    Bill, this has got me banging my head against the wall trying to extend things. Using your “Easier Sitewide” example, I am trying to figure out how to make the class “one-half” if there are 2 posts and “full” (or no class at all) if the post count is one. Have you done something like this? Thanks in advance if you can help.

    • Bill Erickson says

      You can use global $wp_query; $wp_query->found_posts to see how many posts have been returned by the query.

  66. Melissa @ SoFestive says

    Hey! Thanks for a great plugin. I’ve searched through all the comments and can’t find any answers to my question. My grid loop is showing up, but the alignment is off and I can’t seem to get rid of the meta info and date. I just want to show the title and image. Could you help me with this?
    Thanks in advance!

    The specific page is: http://sofestive.com/category/holidays/easter/

    • Bill Erickson says

      You’ll need to clear the float before the page numbers show up. Something like .archive-pagination { overflow:hidden; width: 100%; }

      • NIKS2456 says

        Your method worked . I also tried this one

        .archive-pagination, .entry-pagination {
        clear: both;

        This also works . Which one should I use ?

  67. mmj says

    Hello Bill

    I’m using your genesis grid plugin and I was wondering whether there’s a way to wrap the columns into a row div container. this would allow me to set the columns to equal heights using a jquery plugin – I don’t see any other way to have the columns next to each other equal height, do you?


    • Bill Erickson says

      You could hook in before each post is displayed and, based on the post count, output

      , but I don’t really like that approach. The simpler one is to just set a minimum height for the entries using CSS that’s taller than any post could be. So if your image + title + excerpt maxes out at 350px, set min-height: 360px.
      • Renuka says

        Where should I put it ? I pasted it into functions.php file . Nothing happend .And there is no archive.php file in my child theme .

        • Bill Erickson says

          If you place it in functions.php, you’ll want to add a conditional tag at the top to limit it to the areas of your site using the grid. I’ve updated the code snippet assuming its on your blog home ( is_home() ) and archive pages ( is_archive() ).

          You’ll also have to write CSS to style it. I’ve added some sample CSS to the snippet but you’ll want to customize this to match your theme.

          • Renuka says

            Still doesn’t work . I have installed your grid loop plugin . Enabled on everything ( Blog Home ,Category Archives ,Tag Archives ,Date Archives ,Taxonomy Archives ,Author Archives ,Search Results ) . Running Genesis 2.1.2 with Magazine Pro theme .

          • Bill Erickson says

            I’m sorry, I don’t provide free support and have already provided all the code you need. If you need more help, I recommend hiring someone at Codeable.io

  68. Amber @ Au Coeur Design says

    I had the exact same thought, Amy! Bill, all your posts and comments are so appreciated! I actually found myself thinking the other day that I would love to buy you a cup of coffee for all that I have used your plugins or tutorials on websites. I don’t suppose you have a PayPal account I could send $5 over to?

  69. kita says

    Hi Bill, I am using the grd loop plugin on the main blog page and I love it, but I would like to show one ‘featured post’ before the grid loop starts. How would I do this? Forgive me if it is already mentioned in the comments.

    • Bill Erickson says

      This plugin displays “features” (full width posts) and “teasers” (posts broken into columns). You can specify how many features you’d like in the Grid Loop Settings page.

      If you’re looking to feature an alternative post – one that’s not the first post in the main query – you’ll want to write a function that hooks into ‘genesis_before_loop’ and displays your post.

  70. AnitaC says

    Hi Bill, I decided to try this with a theme that doesn’t have a home page. It worked nicely, however, when I put a featured post widget in the sidebar and set it to 2 – it’s putting one full post in there with two smooshed underneath it. Anyway to get this to work so that when using it in a widget area such as the sidebar, the Featured Post or Page doesn’t inherit the grid loop? Thank you in advance for your response.

  71. Edward says

    Does this loop work also for the newer themes? I tried it but doesn’t seem to work for me. I noticed the loop part is now contained in a file called “front-page.php” instead.

  72. Mario says

    I tested your advised code also on my website using it in my “front-page.php” file:

    ‘grid_image_size’ => wp_is_mobile() ? ‘full’ : ‘medium’,

    It works in local environment but not on the server, how is that possible?

    • Bill Erickson says

      Do you have a caching plugin in place? If so, you’ll need to make sure it does a mobile cache as well. That’s the only thing I can think of

      • Mario says

        Yes, I have W3C. How can I tell to the plugin to keep also a mobile cache? I thought that since the URI is different (“image.jpg” and “image-widthxheight.jpg”) there was no problem.

        • Bill Erickson says

          I don’t know, I don’t have experience configuring W3C. This is why I recommend hosts that have caches pre-configured, including a mobile cache.

          The issue isn’t that the image has a different URI, it’s that your caching plugin does an entire page cache. When someone hits yoursite.com, they’re delivered a static HTML version that was generated by the caching plugin.

          • Mario says

            I use SiteGround as my host which actually has the Varnish Static Cache, but nothing for a separate mobile cache. I think I will abort the idea for the moment.

  73. Mario says

    Just to share, I managed in the end to create a separate mobile cache using W3 Total Cache. It’s very simple: Performance -> User Agents Group -> Enable the default “high” group containing all the mobile user agents, and it will create a separate cache only for them. πŸ™‚

  74. AnitaC says

    Hi Bill, I am trying to assist another developer with the plugin version of your code. She’s getting this message:

    Warning: Division by zero in /nfs/c03/h07/mnt/52073/domains/HER-DOMAIN-NAME.com/html/wp-content/plugins/genesis-grid-loop/plugin.php on line 262

    She displaying the output so that only the featured image shows up – no titles or text, for her portfolio pages using categories. It looks great but we have that one error showing up on the last row. The plugin doesn’t give us any check boxes to eliminate the text and post info, so we are configuring that in the Genesis Settings.

    She’s displaying 4 across but the last row only has 3. In the spot where the 4th one would go – is that line of error code. Is there any way to fix this? I have started using the plugin on several things but this is the first with this error.

    Also if you plan to update, is there any way you might consider adding option boxes to use the content and post info?

    Thanks in advance.

    • Bill Erickson says

      Here is the line that error message is referencing: https://github.com/billerickson/Genesis-Grid/blob/master/plugin.php#L262

      That part of the code fixes the pagination in case you have a different number of posts on front page and inner pages. If you had 10 posts, homepage set to 2 posts per page and inner pages set to 8, then on homepage you’d see there’s 4 more pages of posts, and clicking to the next page you’d see there’s no more pages of posts. This corrects the issue.

      There’s only two ways I can see you getting a “Division by zero” issue.
      1) In Genesis > Grid Loop you have the features and teasers for the inner pages set to 0. Don’t do this, make sure there’s at least one post per inner page
      2) You’ve made some customization to the grid args using the 'genesis_grid_loop_args' filter and it’s caused issues.

      Can you take a look at your implementation and see if either of these are the case? If the second one, share the modifications you’ve made so I can look for errors.

      I don’t plan to add options to eliminate the content and post info. Genesis already provides you these options in Genesis > Theme Settings, so I think it would be confusing to duplicate these. Also, any modifications you’ve made to the theme (like moving post title or info to new location) would make it so I can’t remove them since I wouldn’t know where they are located, leading to a poor user experience. I’d get support issues like “I turned off post titles but they’re still showing up” and then look into their theme to see they’ve moved the post title.

      This plugin is supposed to provide a simple interface for breaking your posts down into a grid. No more, no less. Customizations to the output of your posts belong inside your theme, just like if you were customizing the output of the posts without a grid loop.

      I provide a helper filter that tells you if you’re in the grid loop or not: if( apply_filters( 'is_genesis_grid_loop', false ) ) You can then use this in your theme or core functionality plugin to make customizations that only apply to the grid loop

  75. AnitaC says

    Thank you for responding so quickly. I will run back over to the dashboard and also ask her about the changes she might have made to the code. I will let you know!

  76. Patrick McCoy says

    Hi Bill, as many have noted above, great tutorial!

    I just read through every comment/question and didn’t see the one specific question I have. As @Joy Waltham above asks about the responsive code moving to 1 column on mobile devices, my question pertains to getting the grid to show in a responsive rotator and not just a 1 column display.

    For example, if we have 4 columns, 4 rows of a gallery (16 images), can your code be modified to convert to a 16 image rotator on mobile devices, so the user will just swipe left/right to view rather than having to have a lengthy up/down scroll? The goal of this would be to eliminate the long up/down scroll of all those images when viewed on a smartphone. Any thoughts? Thanks in advance and hope my question makes sense.

    • Bill Erickson says

      I don’t think there would need to be any changes to the grid code, other than changing out the image sizes for mobile (you’ll want features and teasers to all have the same image size in the rotator). You’ll just need to write the proper CSS and jQuery to achieve the functionality you’re looking for.

      Or you could replace the whole content area if wp_is_mobile() with a Flexslider rotator containing the content of your posts.

  77. Amitabha says

    Hi Bill,
    Thanks for this great code. I was wondering for few days to have this grid view, but one question I have. Can it be built in a non-Genesis theme?

    • Bill Erickson says

      The basics apply to any theme. You can add the functions that filter post_class and pre_get_posts and this will work on non-Genesis themes. You’ll need to add the Column Class CSS to the theme’s stylesheet.

      The advanced example uses Genesis functions to customize Genesis’ output (ex: change image sizes), so that’s not applicable.

  78. David Alexander says

    I am trying to use this with the epic theme for a custom post type index which is created by a plugin.

    The post type is courses and thus creates an index of courses at site.com/courses however gaining control over this is difficult and creating an archive template for this using your above code just crashes it to a white screen. Any ideas?

  79. Mario says

    I’d like to modify the Genesis’ excerpt behaviour; specifically I would like it to behave in one of these two ways:

    1. Once the defined word limit is reached, show everything until it encounters ?, ! or . characters
    2. Show the first paragraph

    I’ve found this http://wordpress.stackexchange.com/questions/141125/allow-html-in-excerpt/141136#141136 which actually works like a charm for a normal WP theme, but not for Genesis. Indeed Genesis seems to generate its featured-posts excerpt in a different way from grid-posts and also the read-more text which you can actually modifying using the filter must be generated in a different way. So, my question is: do you have one of your great snippets to share in order to have a clean excerpt for the front-page? Thank you in advance.

  80. Bas says

    Hello Bill,

    At first I’d like to say thank you for all these awesome guides, scripts and snippets that you’ve put out.
    They definitely helped me on my way with tackling the thing called building my website.

    I’ve downloaded your plugin, and I’m wondering: Is it on any way possible to do the following things:

    – Move the title of a post below the thumbnail.
    – Make it so that the title only is below the thumbnail (So that if you have a long title that it will not continue until the next box)
    – Keep the excerpt of the featured/main post, but remove the excerpts of all non-featured posts

    I hope to hear from you,

    Thank you!

    • Bill Erickson says

      Yes it is possible to style the featured posts and teasers however you like. Use this to determine if you’re currently in the grid loop (so your code doesn’t apply to non-grid looped posts):

      $in_grid = apply_filters( 'is_genesis_grid_loop', false );

      You can then look at the post_class() function to determine if it’s a teaser or feature. Ex:

      if( in_array( 'teaser', get_post_class() ) ) .. do teaser code

      For more guidance, see the snippets here: https://www.billerickson.net/code-tag/genesis-grid/

      • Bas says

        Hello Bill, thanks for your quick response!

        I managed to get the following things done:

        – Set excerpt length for featured post
        – Remove excerpt for teaser posts
        – Remove the “…” which you get once you set excerpt length to 0.

        This is the code that I fixed together, might not be “Best practice” (I don’t know that much about coding…at all) but it works.


        now to just figure out how to get the titels to show below the thumbnails and I’m done for that section πŸ™‚

        • Bill Erickson says


          You can of course strip out the unnecessary Genesis 1.x stuff assuming you’re using HTML5 in your theme.

          For future reference, go to /genesis/lib/structure/post.php to see where everything in the loop is hooked. If you want to move something you just remove_action() whatever you see in there, then add_action() it somewhere else.

          To see all available hooks, go to /genesis/lib/structure/loops.php. genesis_standard_loop() is used for HTML5, genesis_legacy_loop() is used for HTML4.

  81. Adam says

    Hey Bill,

    Thank you for the article. I have a question. Why not just enqueue the Unsemantic grid ( http://unsemantic.com/ ) and then modify the HTML divs with the appropriate classes inside a custom hook function? I’m new to Genesis and trying to figure it out.

    • Bill Erickson says

      You definitely could do that. But this post was designed for Genesis, and Genesis has its own built-in column classes. If you are enqueuing an alternative CSS framework then you can follow the tutorial here but use that framework’s CSS classes.

      Personally I don’t recommend using CSS frameworks with Genesis. Most frameworks depend upon specific classes on site elements, which means you’ll be writing a ton of functions to change or add to the existing Genesis class names. It’s much easier to simply build upon the existing Genesis CSS, or create your own CSS framework based upon it. If you like the column classes from unsemantic, copy over just that part (don’t enqueue everything else).

      In my base child theme I copied the table styling from Bootstrap, but I don’t enqueue the whole Bootstrap stylesheet.

  82. jezza101 says

    Just wanted to say thanks for your writing on this and the tips in the comments. I couldn’t have achieved my goal without this help. I was looking to make a dynamic AJAX type grid on a Genesis powered site and ended up using the technique here to get it going. A little jQuery magic allowed me to change the contents of the grid.

    Took some time to figure it all out but got there in the end. If anyone else is looking to do the same I have made a tutorial, linked via my name in the comment!

    Thanks Bill.

  83. Lauren says

    Hi Bill!

    Thank you so much for this. I’ve gone the plugin route, and was able to use some of your coding advice to move the thumbnail over the post title… Perfect…

    But now I’m wondering.. Is it possible to have the post title OVER the thumbnail on just the featured posts, but not the grid?

    Grid = Title underneath image,
    Feature = Title over image…

    Any advice would be amazing! Been picking away at this for a while now.. thanks πŸ™‚

      • Corinne Kelley says

        I think I almost cried after finding this solution. You are amazing. I used your grid layout, but the layout of the grid page was all over the place, because if the post had a long title it would push the thumbnail down which made the rows look all off. Now with this solution, at least all of the thumbnails are in a nice neat row, no matter the post title length. Is there also possibly a way to limit the amount of lines or even characters a post title can be in the grid layout, cutting it off with a … ?

          • Corinne Kelley says

            Hi Bill,

            thank you so much for your response. You are amazing to take the time to respond to these questions. I know how much time it can take up. Many thanks.

  84. Lorand says

    Thank you so much for such a useful plugin, is the first time I used and is exactly what I was needed. I don’t want to bother you but I looked everywhere for a solution and I didn’t find one that really works… is any chance to insert an AD by replacing a teaser, for example the first position in grid to be a banner instead of a post? Thank you!

    • Bill Erickson says

      You can use a similar approach as outlined in the above post, but you won’t be able to use this plugin. Basically you’ll need to create your own custom counter rather than relying on the post counter in $wp_query. So at the top of your loop, do something like: global $be_counter; $be_counter = 0;. Then after each post do $be_counter++ to increment it upwards.

      Then, before the post displays check to see if the counter equals some specific number (ex: $be_counter == 2 for the 3rd slot), and if it does, display the ad and increment the counter upwards.

      • Temitayo Boboye says

        Did you get this to work Koran, I have tried wrapping my head around it but couldn’t. If you did find a work around it would be nice to share

  85. Chris says

    Hi Bill, love this plugin thank you. I currently have a 1600px banner set as my featured image in posts, however this shows up extremely small as a grid teaser image. How can I assign different sizing to my teaser images, is there a teaser class I can specify and add some CSS for the desired effect e.g. teaser_image_size {height: auto; width: 100%;} ? Thanks!

  86. Chris says

    Thanks Bill! I appreciate the pointer, worked like a charm.

    Question about cropping, I sometimes use this handy plugin called Manual Image Crop for cropping after an image has been uploaded. However without the aid of any plugins, is the only way to achieve a secondary teaser crop 270px x 300px of a featured image, but uploading a new featured image?

    Thanks again

  87. Ivan says

    Hi Bill. I am really glad I found your blog. Great information.
    Since this post was published about 3 years ago I just wanted to check with you if this is still valid and best way of doing it with the current version of Genesis 2.1.x.

    Second, how would you recommend displaying different info from the post instead of the regular Title, excerpt, cat, tags, etc. … I need to display the featured image along with a few custom fields for a custom post type.

    Thanks in advance.

    • Bill Erickson says

      Yes, this is still the best way to build a grid for the main loop.

      You can always unhook the functions you don’t want running in the loop (see /wp-content/themes/genesis/lib/structure/post.php); or if everything will be completely different, unhook the whole loop ( remove_action( ‘genesis_loop’, ‘genesis_do_loop’ ) ) and build your own custom loop.

  88. Torben says

    Hey Bill,
    thanks for sharing the valuable input on your page. I find it very useful in many aspects.

    I used some parts of your code above and it works really well, but I have one question left:
    When using the above mentioned code for the grid, is there any possibility to create a hook/custom html code which will be inserted in the transition from featured posts to the grid/teaser view? I want the grid/teaser view to have a headline.

    Would be really glad if you have an answer to that. Have a nice weekend.

    • Bill Erickson says

      Hook into ‘genesis_before_entry’, and check the post count. If it’s the first post that’s supposed to be in the grid loop, you know you can output the grid/teaser headline.

      If you have 2 feature articles and 8 teasers on the first page and 10 teasers on the subsequent pages (so no headline needed), the code might look like this: https://gist.github.com/billerickson/7e1c1de1e6ff592aa14a

      • Torben says

        Ha. Quite simple. Sometimes you just don’t get it when sitting in front of the screen for hours.

        Thanks. Works like a charm πŸ˜‰

  89. Torben says

    Hey Bill,
    I have another question related to the grid loop which may be useful for others too:

    How can I achieve that the featured image of a post is displayed in different content sections dependent if its a feature or a teaser?

    In the features I want to achieve the following order:
    – Posting date
    – Headline
    – Excerpt
    – Image

    The teasers should look like:
    – Image
    – Posting date
    – Headline
    – Excerpt

    I tried it with:

    With this solution the features are shown in good order, but the teasers have an image at the end of the entry_header, which is the wrong order, and an image at the end of entry_content which I in general think its weird because the post_class “one-half” does not have a class “feature” – So the after_entry_content should not be fired if its a “one-half” teaser.

    Do you have a hint how you would solve this? Would be great. Have a good Sunday.

  90. Amber @ Au Coeur Design says

    Hi Bill,

    For some reason, when I add your code, as written in the advanced example, to a website running the Beautiful child theme, the pagination disappears (on both the home and categories). Any idea why this might be?

    Thank you!

  91. AnitaC says

    Hi Bill,

    Using the plugin… for some reason the pagination is missing on one site and on another site the pagination is there but it’s out of place way at the top in between two posts. I see another person on the plugin page having the pagination issue as well. I think it happened after the last WP update.



    • jodie scott says

      Ive done another dev site test running 4.1.1, this time with only the grid plugin installed…. nothing else. The pagination now appears at the bottom of the page, however the plugin is ignoring all settings such as 2 columns, posts per page etc. The image size also isnt responding, it will put the size image up that is set in the theme settings only.


    • Bill Erickson says

      It sounds like you’re having a clearing issue in your CSS. Try adding this to style.css

      .archive-pagination { overflow: hidden; width: 100%;}

  92. AnitaC says

    Thanks for responding Bill. On my demo site using Modern Studio the pagination isn’t showing up at all. I added the CSS to my demo just to see if it would show up and it hasn’t. When I reveal source, I don’t see this “” as I do on the regular blog page, like it’s missing. Here is a screenshot using Firebug where I can see the DIV on the pagination of the blog archive page – http://goo.gl/QMZHge. Here is the screenshot of the grid layout without the DIV – http://goo.gl/e4pE0N. I deactivated all plugins too.

    • Bill Erickson says

      Have you done anything to modify the WordPress query on those pages? Or have you used the ‘genesis_grid_loop_args’ filter?

      Pagination functions look at paraemters in $wp_query, specifically the total posts and posts per page. Since this plugin can have a different number of posts per page on the homepage and inner pages, I had to rebuild how it calculates this number so it won’t be off. See here. I’d start your debugging there.

  93. Eva says

    Hi Bill,
    Thank you for the plugin, I have installed it and I do hope it will help me to achieve what I want πŸ™‚
    I would like to use it together with Easy Content Types by Pippins Plugins to show an unlimited number of book covers (features images) in 4 columns on the home page of an editor with a right sidebar.
    Do you think that would be possible?
    I hope to hear from you.
    Thanks in advance,

    • Bill Erickson says

      I’ve never used Easy Content Types, but yes this plugin should work with any custom post types you develop. In the backend of your site go to Genesis > Grid Loop and you’ll see a list of checkboxes for areas of the site. Your custom post types will be listed there. Check the “book covers” post type (or whatever you’ve called it), and set features to 0 and teasers to 4 columns.

      • Eva says

        Hey Bill, thanks for your prompt reply! That’s what I did, but unfortunately it does not show anywhere. I guess I have to create a special template to show the custom types. I am using the stripped Genesis Sample Theme by Sridhar Katakam, which gets rid of Genesis Page Templates. Easy Content Types doesn’t support automatic template files when using a child theme, so I guess I have to create a template… By the way, when that’s done, can I set the number of teasers to 200 or even more to show all covers, or would there be a better way to do that?
        Thanks again for your time. Highly appreciated!!

        • Bill Erickson says

          Yes. If you’re using the default WordPress query (ex: custom post type archive), pre_get_posts will let you change the posts displayed on each page (tutorial here). If you’re using a custom WordPress query in a page template, you will specify the ‘posts_per_page’ in the query arguments (tutorial here).

  94. Torben says

    Hey Bill,
    I use your grid loop on multiple websites. It has been very useful in the past. Thanks for that.
    Since the latest updates of the Genesis Framework and WordPress, the latest posts which are released are not be displayed as the first post on the page. I have to set them as “sticky” in order to show them at the first position.

    Do you know if something relevant has changed and I might have to add?

    if( $query->is_main_query() && $query->is_archive() ) {
    $query->set( ‘orderby’, ‘date’ );
    $query->set( ‘order’, ‘desc’ );


    • Bill Erickson says

      You shouldn’t need to modify the query in any way. Genesis Grid Loop doesn’t affect the WordPress query other than to change the number of posts per page.

      You can disable the plugin to confirm it is caused by something else. Then look for any plugins or code in your theme that might be modifying the query.

  95. Torben says

    Hey Bill,
    thanks for the quick reply. I will investigate – however I do not use the Genesis Grid Plugin, I use the code above within the functions.php. I am just wondering because I have not changed anything, just updated WP, Genesis and Plugins.

  96. Lindsay says

    Hi Bill,
    Your code to output my genesis grid loop as two or three columns works like a charm, but it’s also effecting my featured-posts widget on my home page, so that the image and text of the widget is forced into either half or one-third the space of the widget area.

    I am not adept with PHP — can you tell me how to add a conditional statement so that the layout modification does not apply to the home page?

    Thanks very much for all your help!

    • Bill Erickson says

      Are you using the most up-to-date version of the code? In the first code snippet the $wp_query->is_main_query() check is specifically so that it doesn’t affect the Featured Posts widget.

      If you’re still having issues, I recommend you remove all the code you added and use my Genesis Grid plugin instead. It’s the same basic code, but you can tweak the settings in Genesis > Grid Loop instead of by editing code.

      • Lindsay says

        Hi Bill,

        When I use the code from the first snippet it crashes my site (500 error) and I have to go into my host account file manager to delete the code.

        I’ve been using the code you recommend for site-wide application (this one): https://gist.github.com/billerickson/2046751#file-gistfile1-aw

        Like I said it works great; it just also works on the featured posts widget! Is there a way to create a conditional tag that excludes just the front page?


          • Lindsay says

            That did it! Thanks so much Bill πŸ™‚

            Just curious — is it possible to make *only* the first post on each page display horizontally (photo to right and text on left) and the rest of the posts display in columns of three (photo above, text below)? Can you do this with PHP?

  97. Lindsay says

    Hi Bill,
    I spoke too soon. Actually, adding the code

    if( is_singular() || is_front_page() )

    just deactivates the whole code, so the blog page is no longer in columns.

    It seems like it should work regardless of my Reading settings. What do you think is going wrong here? Much thanks for your help!

  98. Lindsay says

    Hi Bill,

    I tried

    if( is_singular() || is_home() )


    if( is_singular() || is_active_widget() )

    but neither of these solved my problem. So I downloaded your Genesis Grid Plugin. It works like a charm on my category pages, but NOT on my blog page. I can’t figure out why after spending 1.5 hours looking at my settings and the code.

    I suspect it is because I set up a custom blog page template so that I could add static material to the top of my blog page.

    If you have any suggestions at all, I will be most appreciative.
    Thank you

  99. Ferlin says

    Hi Bill
    I used your code, works very well, thanks.

    Only 1 question, how can I add a text box with some content above the Feature Post (top of the page but under header)?
    I tried adding through content area on WP, not luck. I sifter through the gridloop code, is there something to add there?

      • Ferlin says

        Hi Bill
        I’m using Genesis Sample theme, added the “Advanced Code” above to functions.php. All works.
        I created a page called “Blog1” and made that my Blog page through Reading> Posts Page > Blog1
        That works .

        The link you suggested to add content to the top of the blog page says create a home.php file and add new code. When I do that and change the Posts page to Home (using home.php) the blog page is blank.

        I must be doing something wrong. Is my code in functions.php to be replaced with the first code blocks?

          • Ferlin says

            Now works – thank you!
            I think before I also might have created the new Blog Page and ascribed the home template to the blog.

            Bill, I see your area is more involved coding but appreciate you still helping those of us with the basics – great model for paying it forward. The code snippets do make a difference, so thanks very much.

  100. Ivan says

    Always use an Genesis theme file as your starting point. For example index.php.

    In your case you are probably missing genesis() function that echo the html code.

  101. Deborah says

    Hi Bill, the plugin works wonderfully! However, I’m a PHP novice and can’t figure out how to change the number of columns for specific category archive pages (without changing the global number of columns). I’ve tried creating an Archive.php page in the child theme, plus adding this to the functions.php, but it’s not working — throws an error or just displays a blank page: https://gist.github.com/billerickson/1999b06362cc10e27d19

    Any help would be greatly appreciated. Thank you so much!

  102. Gene Whitehead says

    Hi Bill,

    After some issues with the Grid Loop plugin, I found this tutorial which does fix my issues. The one problem I’m having is my teasers are staggered.

    I did change to 2 columns and I changed the amount of featured and teaser posts displayed. I’ve searched all over and read almost all of the comments here but didn’t come across this issue.

    Here’s what I have on functions.php: https://gist.github.com/anonymous/c2c15514f0f9cec2ce22

    And here’s the site: http://genewhitehead.com/

    Thank you for any advice, and happy new year!

    • Bill Erickson says

      I’m not seeing anything wrong with the grid. Did you solve the problem? If not, can you provide a more detailed description of the issue?


      • Gene Whitehead says

        My apologies, I turned the plugin back on temporarily yesterday, it’s now off again and I put this code I shared back in.

        The teasers are not aligning vertically, they are staggering, leaving a gap between some of them. The other thing I noticed, and it may somehow be related, the pagination on the second page is in the middle of the page and the teasers are very sporadically placed.

        I messed with this for quite some time and I just cannot fix it! That’s why I jumped back to the plugin last night. I’ll leave it like this now, I certainly appreciate your help!

      • subversiv says

        Thanks! yeah I see they are full width now after I employed the code on this page, before with the grid loop plugin they were aligned to the left with spacing to the right and some words from the excerpt on the right as well. Odd after I added the code on this page that it is now full width. Some of the images on the front page still show spaces to the right of the images however. http://420rebel.com/

        For the image sizes I used 300 x 100, they all appear to be different sizes.

        I added the advanced code to my functions, On that homepage I currently have the featured widget home-top, and middle left. I wanted to display the middle-left in a 2 column grid instead of how it is currently, one below the other. If I place the code on the front page, would it be able to do that or would it overwrite the widget section. thanks again.

  103. Ben says

    I’m desiring to use a two-column post grid on the homepage, but also want a two-column post grid on three separate Category Posts pages where only a specific category shows on the page. Is that possible with this grip loop?

    • Bill Erickson says

      Yes. If you’re using the plugin, go to Genesis > Grid Loop and make sure “Blog Home” and “Category Archives” are checked.

  104. Ben S says

    I have decided to use the Genesis Grid Loop plugin and have all page types checked. I chose two-column.

    The homepage is setup to show “Your latest posts” and Category Pages are being added to the main menu by Appearance > Menus.

    A /blog page has been created and correctly set with the template of Blog, but this one doesn’t appear visually with the two-column layout, instead is shows a single column layout. Why is that and can it be included to become a two-column layout as well?

    Also, I created Category Pages via Custom Fields method just to see, and these are also showing a single column layout. Why is that and can it be included to become a two-column layout as well?

    • Bill Erickson says

      Like this, but remove line 13 and 17 (which limit it to just teasers), and after the ‘remove_action’ add an ‘add_action’ to place the title where you want. Ex: add_action( 'genesis_entry_content', 'genesis_do_post_title', 9 );

  105. Brian says

    Thanks, Bill! I implemented the “Even easier sitewide” option above. It works perfectly, but I need to add a sidebar (widget area) above the “genesis_before_content_sidebar_wrap” for each category to show a featured post. I am able to achieve this with the usual code in functions.php, but the new widget area is displaying a column. Any ideas on what hook i should use or how to get a new sidebar (widget area) added above the archive posts and outside the columns? Thank you in advance for any assistance.



    • Bill Erickson says

      Can you post a link? It shouldn’t matter which hook you use, only the posts display in columns.

        • Bill Erickson says

          Ah, you’re using the Featured Posts widget and the column classes are being applied to it too.

          In the first code snippet (the one that adds column classes to post_class filter), at the beginning it checks $wp_query->is_main_query(). Make sure that is included in your function. It limits the post_class filter from running on custom queries, like the Featured Posts widget.

          I had forgotten to include that in the advanced example, but have just updated the code.

          • Brian says

            Thanks, Bill. Just to be clear… You updated the code in the β€œEven easier sitewide” example above and I can just snag that now and replace what I originally used?

          • Bill Erickson says

            Yes, I’ve updated it so you can use either. I was pointing to the earlier code because it’s shorter and easier to read.

          • Bill Erickson says

            The only recommendation I can make is to not use the Featured Posts widget. I thought they had fixed this issue but obviously it isn’t fixed.

            The issue is with that widget using the post_class function which should only be used in the main loop. I remove it from every site I build so haven’t had an issue with it.

  106. Torben says

    Hey Bill,
    I used this setting to change the number of posts on archive pages:

    add_filter( ‘pre_get_posts’, ‘be_archive_query’ );
    function be_archive_query( $query ) {
    if( ( $query->is_main_query() && !is_admin() && $query->is_archive() ) || ($query->is_main_query() && !is_admin() && $query->is_search() ) ) {
    $query->set( ‘posts_per_page’, 16 );

    The first page of the archive shows 16 posts, when I navigate to the second page the first 8 posts are the last 8 from the first page. Why is this the case, do you have an idea?

    Thank you!

    • Bill Erickson says

      I’m assuming you’re either using this code, or you’re using the Genesis Grid plugin which uses this code.

      Take a look here. Because the first page can have a different number of posts per page than the rest, we’re using an offset on subsequent pages. The numbers used here come from lines 26-31, right above it.

      If you’re using the plugin, go to Genesis > Grid Loop to specify the number of posts you want on the first and subsequent pages. If you’ve manually coded it, modify lines 26-31 to use the number of posts you want.

      • Torben says

        Hey Bill,
        thanks. However I have the issue, that I have the following structure on the front page:

        – Last post
        – Second Last post
        – Grid view of all other posts

        I have therefore something like this:
        return array(
        ‘last_post_on_front’ => 1,
        ‘features_on_front’ => 1,
        ‘teasers_on_front’ => 6,
        ‘features_inside’ => 0,
        ‘teasers_inside’ => 12,

        How do I have to change the offset? I have some issues currently, that the last 3-4 posts of the first page are the first ones on the second page etc. Can you help me? Thank you!

        • Bill Erickson says

          ‘last_post_on_front’ isn’t a parameter in my code. Is that something you added?

          Based on your current settings you should see 7 posts on the first page and 12 on subsequent pages. Page 2 should start with Post #8.

          • Torben says

            Hey Bill,
            this is a parameter that I would like to add, because I display one additional post on the front page, before the grid loop starts, but I thought I have to tell the grid loop that there is one additional post on the front page in order to calculate the offset correctly. Currently it is not working properly, because the grid loop does not now about this additional post on the front page… I would like to add this piece of information to your code, but currently I am stuck with the offset calculation.

  107. Isela Espana says


    For hours I have been reading all the comment and suggestions to try and figure out what I am doing wrong but have yet to figure it out.

    I am trying to hide the excerpts. I only want the titles and images to show up but everything I have tried is not working.

    Here are my settings:
    post page is my home.php This is what I have in there: https://gist.github.com/anonymous/a53df08be1ca85acc8c5e3f7199ffa08

    This is in my theme functions:


    If you see any ruminants of the grid plugin, I was going to initially use, but I have since deactivated it.

    Any thoughts?

    Thank you,

    • Bill Erickson says

      The code you’re using is really old. It’s designed for Genesis pre-HTML5. You need to use the more modern hooks (ex: genesis_entry_content instead of genesis_post_content). Look at the genesis_reset_loops() function in genesis/lib/structure/post.php to see a list of all the HTML5 hooks and their old counterparts.

      But more importantly, you’re using the built-in genesis_grid_loop() function, and this whole article is about why that’s not a good idea. It’s easier and better to simply filter the post classes rather than change out the main loop like that.

  108. Isela Espana says

    Hello Bill,

    Thank you for your quick reply.

    I think that code was just copied pasted from somewhere while I was trying to get it to work as I wanted. I know basics when it comes to php to be honest.

    I was actually trying to use the plugin but couldn’t get to do what I was looking to accomplish so I gave this snippet you have here a try.

    Do you suggest I just try something else then? Is there no easy fix to what I already have?
    I feel like it’s soooo close to working, but just not there.

  109. Gene Whitehead says

    Hi Bill,

    I’ve been using your work here for well over a year without issues and I’m thankful for that!

    Sadly, today I noticed that my featured images are no longer full width. I can’t for the life of me find any recent changes that would cause this.

    Here’s the grid images section from my functions.php, but nothing changed. Am I looking in the wrong place?


    * Grid Image Sizes
    function be_grid_image_sizes() {
    add_image_size( ‘be_grid’, 175, 120, true );
    add_image_size( ‘be_feature’, 570, 333, true );
    add_action( ‘genesis_setup’, ‘be_grid_image_sizes’, 20 );

    * Grid Loop Featured Image
    * @param string image size
    * @return string
    function be_grid_loop_image( $image_size ) {
    global $wp_query;
    $grid_args = be_grid_loop_pagination();
    if( ! $grid_args )
    return $image_size;

    // Feature
    if( ( ! $wp_query->query_vars[‘paged’] && $wp_query->current_post query_vars[‘paged’] && $wp_query->current_post query_vars[‘paged’] && $wp_query->current_post > ( $grid_args[‘features_on_front’] – 2 ) ) || ( $wp_query->query_vars[‘paged’] && $wp_query->current_post > ( $grid_args[‘features_inside’] – 1 ) ) )
    $image_size = ‘be_grid’;

    return $image_size;
    add_filter( ‘genesis_pre_get_option_image_size’, ‘be_grid_loop_image’ );

  110. Gene Whitehead says

    Good gosh. My apologies, Bill, it was Photon in Jetpack that suddenly decided to act up. Nasty plugin >.<

  111. stacey says

    Hi – thanks for the tutorial! I almost have it figured out, but I can’t seem to get the counter to work (to add “first” class to every third post). I’ve created a custom post loop, it seems to be bringing in my “one-third” but the “first” is not injecting where it needs to. Any help would be greatly appreciated!

    Here is the code I have so far: https://gist.github.com/anonymous/25f49e54b5a4c5dc0777ac481655bf19

      • stacey says

        YES – it works perfectly! Thank you so much.
        I’m wrapping my head around it now. Thanks for the explanation!

  112. Temitayo says

    Hello Bill, thanks for such a nice work here. I have tried reading the comments here all through the night, but here is something quite tasking on my end, I would like to make a post an advert among the teasers, say 2 features and 8 teasers, let teaser 4 be an ad, and teaser 8 be an ad, also on the following page same concept still applies.
    Also, will this concept still work with the infinite scroll
    Thanks in anticipation.

    • Bill Erickson says

      In the above code we’re using the $wp_query->current_post as our loop counter. You’ll need to change this to your own custom loop counter. So start by declaring a global variable (Ex: global $be_loop_counter), then after outputting each post add to it (ex: $be_loop_counter++;).

      For your ads, check the current loop counter, and insert the ad if you’re at the right spot.

      Here’s an example with all the code: https://gist.github.com/billerickson/394cb3328f2020e56fcf55678a261d3d

      Yes, this concept will still work with infinite scroll.

    • Bill Erickson says

      If you check “Taxonomies” it will use the grid on any taxonomy term archive pages – anything where is_tax() returns true.

      If you want to be more specific about where it applies you can use the genesis_grid_loop_section filter.

  113. ml says

    Hi Bill,

    I encounter a problem that seems like it is a simple fix but I just can’t figure it out. Before I implemented the Advanced Example, everything works perfect. But when I implemented the Advanced Example such that I have only 1 featured post and 3 teasers below, and modify the code accordingly, 2 problems came up:
    1. Featured post is not full width.
    2. Instead of 3 posts in a row, teaser posts is displayed in 2+1 manner (2 above, one below) though each teaser post width seems correct (the 1/3 width).

    I tried to use the plugin instead of doing the manual code just to be sure nothing I did wrong, but it displayed exactly the same.
    Any pointers or help is greatly appreciated!!!

    • Bill Erickson says

      I’d have to see a link to the site. For #1, make sure your CSS is making the featured post 100% wide. For #2, make sure the .first class is being added to the proper posts (the first one in each row).

  114. jason says

    Upgrading to WP 4.7 seems to have broken the Better Grid Loop on my site. I was wondering if anyone else is having this problem. I’ve done the basic troubleshooting already but not a heavy coder so not certain if it’s the grid loop itself or something else in my theme functions causing the problem. When I inspect source, I don’t see any reference to the Grid Loop at all but if I revert WP it’s back and working properly.

    • Bill Erickson says

      I’m running 4.7 and the latest version of Genesis on my local testing environment and can’t find any issues with the Genesis Grid plugin (which uses the same code as the snippets in this post).

        • Christoffer says

          Hi Jason,

          I had the exact same issue as you. It seemed as if the Grid Loop plugin simply wasn’t executed upon loading the blog page.

          Now I am not quite sure what the issue was, but after creating a new blog page the grid loop was working perfectly.

  115. Daphne says

    Hi Bill,
    I’m wondering if this can also made to work with Twentyseventeen theme…
    I thought I’ve read at the beginning that this will work with all WP themes, but I can’t even install the plugin. Any suggestions?

    • Bill Erickson says

      This plugin only works with the Genesis theme because it depends upon Genesis’ column classes. The general idea, though, could work with any theme. First you’d add column classes to your theme. Then you’d use the ‘post_class’ filter to add those classes to posts, as illustrated in this post.

  116. Niels says

    Hi Bill, great code, works like a charm and implemented in a few projects now. Now busy with a new implementation and was wandering if the numbers here:
    ‘features_on_front’ => 2,
    ‘teasers_on_front’ => 4,
    ‘features_inside’ => 0,
    ‘teasers_inside’ => 12,
    can be made dynamic in combination with ACF Pro. I made a menu called archive options where my client can set these values without touching the php code. In the code I retrieve the values, made vars, put them in the above code and on the website it throws an error: Fatal error: Maximum function nesting level of ‘500’ reached, aborting!

    Can what I want to achieve be accomplished with acf pro? Any Ideas how?

    Best regards

    • Bill Erickson says

      Yes, you can use ACF post meta or site options to control those. It sounds like there was an issue with your code though.

  117. ml says

    Hi Bill,

    I am using your Genesis Grid for my home.php and archive-cpt.php. Genesis Content Archives is set to display “Entry Excerpts” . I am trying to replace the ‘…’ with a ‘read more’ button. I used

    add_filter( ‘excerpt_more’, ‘new_excerpt_more’ );
    function new_excerpt_more( $more ) {
    return ‘ … Read More‘;

    It did add a ‘read more’ after the auto excerpt from content, until I needed to add character limit to the CUSTOM excerpt using your code :
    function be_grid_content() {

    // First, we make sure we’re in the grid loop.
    if( ! apply_filters( ‘is_genesis_grid_loop’, false ) )

    // Change length if teaser
    if( in_array( ‘teaser’, get_post_class() ) )
    $length = 25;
    $length = 25;

    echo ” . wp_trim_words( get_the_excerpt(), $length ) . ”;
    // Remove default content so we don’t get both
    remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’ );


    add_action( ‘genesis_entry_content’, ‘be_grid_content’, 9 );

    Then, I just couldn’t get the ‘read more’ button back, despite trying a few other ways. Any pointers or help is greatly appreciated!!!

  118. Karan M says

    Referring to the comment about having a min-height so that teaser posts in the grid are of equal heights – how do you maintain this when the window resizes? I have been trying to use display:flex but can’t for the life of me get it working correctly. Hoping for some help here.

  119. Alejandro says

    Hi! First of all thanks a lot, this is all i was looking for.

    Everything is perfect, but i have the same 2 problems with pluging and code.

    1- I set 11 entries and in blog page it show 12 and in category pages 11.
    2- I added new image size but it take featured post image size anyways.

    Thanks, Alejandro.

    • Bill Erickson says

      1. Either your theme or a plugin is modifying the number of posts per page. I’d search your theme’s functions.php and home.php files for `posts_per_page`, and if you don’t find anything, start disabling plugins to see which one is causing it.

      2. Images are generated when they are first uploaded. If you add a new image size, all the existing images won’t automatically be resized to it – only new images. You can fix this by using Regenerate Thumbnails.

  120. martin allman says

    Hi Bill
    I wish to show 2 cols on my home page but 3 cols on my archive pages – could I use something like this:
    global $wp_query;
    if($wp_query->is_home()) {
    $cols = 2;
    $cols = 2;
    if( ! $wp_query->is_main_query() )
    etc etc

  121. Ferlin says

    Hi Bill
    Gridloop code is working very well, thank you.

    1 issue: For featured images added to the post, when I start to shrink the webbrowser down to 1 column (initial is 3 columns showing vertically) the featured image expands to a large size to the width of the 1 column (which is wider now since it’s only 1 column, not 3).

    Is there a way to stop the columns reducing from 3 to 1 until the browser window is very small? or another solution to this? I have regenerate thumbnails added, no effect as I can see.


    • Bill Erickson says

      The column class CSS Genesis includes goes to 1 column at 767px. You can edit the media query to make this a lower number.

  122. Hoang says

    Hi Bill, is it possible to insert content after first row of the grid? How to do it please?

    Thank you.

    • Bill Erickson says

      The code above customizes the WordPress archive pages to display a grid. WordPress doesn’t have archive pages for the “page” post type.

      That said, you could use a similar approach in a custom template to list pages. When outputting your custom loop, simply use the column classes (ex: .one-half, .one-third) around your pages to display them in columns.

Leave A Reply