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.

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

<?php
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:

<?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 ) {
// 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.

<?php
/**
* 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' ) )
return;
global $wp_query;
$grid_args = be_grid_loop_pagination();
if( ! $grid_args )
return;
$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

genesis gridloop intermediate wordpress

Receive New Posts by Email

Comments

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

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

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

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

    Thanks.

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

    1. 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. 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.
    Thanks!

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

      1. Bill!
        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!

        1. 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 πŸ™‚

          1. Bill,
            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.
            Thanks.

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

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

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

        1. Make sure you have 'paged' => get_query_var( 'paged' ). In your previous code you had get_query_var( 'page' )

  7. 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! πŸ™‚

    Steve

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

      1. 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! πŸ™‚

        Steve

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

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

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

            Steve

          3. 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. Bill,
    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 πŸ™‚

      1. 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. Pingback: Genesis Grid Loop Advanced β€” Gary's Code
  10. 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.

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

      1. Hi Bill, this was a very useful post. But when you say sticky posts are outdated and you never recommend them, do you mean there is a better way to achieve the same results? It would be very useful to me to have a couple of posts on top that I can choose, and stay on top for as long as I wish. I’m building a testimonials page based on your grid layout but I really need the most important ones not to go down the list over time..

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

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

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

      1. Well, just found one way to overcome it, if it helps:

        I added an exclusion based on a “featured-videos” category, in my case. Create a new category and add the “in_category” function.

        https://gist.github.com/3762495

        Ideally, I’d like it to just recognize that it’s in the “featured posts” widget…but I don’t know if that is possible.

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

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

      1. 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? πŸ˜€ )

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

    thanks

    Phil

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

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

        I added in the CSS tweak and it worked a treat

        cheers

        Phil

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Thanks!

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

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

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

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

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

  21. Hi,
    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?

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

  22. Hi,
    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”);
    }
    }

  23. 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,
    Dario

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

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

  26. Hi,
    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?

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

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

  27. 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! πŸ™‚

    Ian

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

      https://gist.github.com/4059773

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

        Cheers,

        Ian

        1. No, modifying the main query shouldn’t affect the image size. I’d need to see all the code to know what’s going wrong though.

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

    Alex

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

    1. All of the options for is_category() should work. See here: http://codex.wordpress.org/Conditional_Tags#A_Category_Page

      If you want to apply different grids to different categories, I recommend you use the plugin and then the filters to customize. Set the default settings in Genesis > Grid Loop, then use the ‘genesis_grid_loop_args’ filter to modify it for certain sections. See the second code snippet here: https://github.com/billerickson/Genesis-Grid/wiki

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

      1. Thanks for the quick replay! I didn’t realize that HTML tags were stripped out of excerpts. I corrected it.

        Thanks – the Genesis Grid plugin works great!

      2. What if you want to use some of the features of the grid loop like feature_content_limit and grid_content_limit rather than the excerpt or full post?

  31. 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.
    Thanks,
    Amy

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

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

    https://gist.github.com/4693055

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

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

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

      1. Thanks – I tried that yesterday, but I’m not using the plugin. I’ve added CPTs to the grid loop so I didn’t think that would work with the plugin – maybe it can, though, and I can go back and fiddle with that. But what I’m wondering is what code to use if I’m just using a version of what you’ve posted here.

        I have a feeling it just requires changing the filter, maybe? Wasn’t sure what the filter should be, though. Because I think what happened when I tried this was that it looked at the filter and said, “well, nothing on the site is doing the Genesis grid loop, so I guess I don’t need to do anything.” I wasn’t sure how to specify “if it is doing the grid loop on the page” if it’s not specifically the Genesis grid loop.

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

    Thx,

    Greg

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

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

        Thanks,

        Greg

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

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

            Greg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        Thanks
        Hina

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

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

        1. Don’t use the blog page template. The proper way of doing this is modifying the main WordPress query (the template is still in Genesis for legacy reasons).

          1. Set the page template to “Default”.
          2. Go to Settings > Reading and set “Blog” as the Posts page.
          3. If the blog doesn’t show up, your theme is probably using home.php for the homepage instead of front-page.php. Look in your theme and, if you see home.php, rename it to front-page.php.
          4. Now Blog will list all posts. You want to limit it to a specific category. Add this code to your theme’s functions.php file (without the opening < ?php): https://gist.github.com/billerickson/5021680

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

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

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

    1. 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 πŸ™‚

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

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

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

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

    1. Take a look at the Building My Portfolio post. Specifically, the be_project_divider() function.

      Yours would be simpler than that since I only wanted to exclude the line after the 6th post since I had testimonials there.

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

  44. Hi, Bill – finally had a chance to test this, on the site here:
    http://mwilby.convolare.com/
    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:
    https://gist.github.com/billerickson/4947529
    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:
    https://www.billerickson.net/code/genesis-grid-change-length-of-content-in-grid/
    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:
    patgohn.convolare.com

    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.

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

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

  45. Bill,
    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.

    Ternece.

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

    Gemma

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

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

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

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

        1. This is because the Genesis Featured Widget Amplified plugin is coded improperly (it’s using query_posts). This means that when the widget runs, WordPress thinks that’s the primary content of the page and applies all the grid code to it as well.

          If possible, just don’t use this widget.

          1. Thanks for your responses Bill. Yeah, it’s a kind of strange behaving widget sometimes. I’ve been using it kind of as a legacy option. Is there any alternative?

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

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

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

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

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

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

    Thanks,

    Greg

  51. 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)?

    Thanks,

    Greg

      1. Just a note that after pasting that code, the feature post length is still showing an excerpt. When searching for why, I noticed someone in the plugin support forum had the same result. Thanks again.

        Take care,

        Greg

        1. Dig into Genesis core and see what’s wrong. I wish I had time but I don’t. Next time a client needs that feature, I’ll hit that code and if it doesn’t work I’ll figure out what’s wrong.

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

    1. 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. 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. 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. 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. Bill,

    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.

    Thanks.

    1. 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. 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:
    https://www.billerickson.net/code/no-content-on-teasers-in-grid-loop/

    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.

    Thanks

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

      1. Hello All,
        To follow up I’d like to share my solution.
        I used Bill’s plug-in Display Posts Shortcode.
        Inserted shortcode for each categories on one static page. Worked like a charm!

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

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

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

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

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

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

      2. 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) . ‘”> Read More…‘;
        }
        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. 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:

    https://www.billerickson.net/code/genesis-grid-change-length-of-content-in-grid/

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

    Drew
    http://www.thehungrypartier.com

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

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

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

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

      1. Your method worked . I also tried this one

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

        This also works . Which one should I use ?

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

    Thanks

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

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

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

  68. 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. 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.
    Thanks!

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

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

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

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

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

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

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

    1. 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. 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. 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. 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!
    Bas

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

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

        https://gist.github.com/billerickson/94b41059f7af13856898

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

        1. https://gist.github.com/billerickson/39b8e0aeb1465e3bdf4f

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

    1. 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. 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. 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 πŸ™‚

      1. 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 … ?

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

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

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

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

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

      1. 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. 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:
    https://gist.github.com/elbsurfer/d90d729115e274c173ce#file-gistfile1-php

    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. 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? http://50.87.248.130/~fitfood6/

    Thank you!

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

    Thanks,

    Anita

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

      Thanks
      Jodie

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

    1. 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. 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,
    Eva

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

      1. 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!!
        Eva

        1. 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. 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’ );
    }

    Thanks!

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

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

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

        Thanks!

          1. 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. 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. Hi Bill,

    I tried

    if( is_singular() || is_home() )

    and

    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
    Lindsay

  99. 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?
    Thanks

      1. 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?
        Thanks

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

    1. First, look at the template hierarchy to figure out what template file you should create. If you want to apply it to a category called dog, you could create a file called category-dog.php.

      Make sure that template file has the genesis(); function in it so that it works. Then use the ‘genesis_grid_loop_args’ filter to customize the grid loop.

      Here’s a working example: https://www.billerickson.net/code/change-grid-arguments-for-a-specific-category/

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

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

      Thanks

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

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

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

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

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

    Best,

    -Brian

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

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

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

          3. 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. 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 );
    }
    }//function

    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!

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

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

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

          1. 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. Hello,

    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:
    https://gist.github.com/anonymous/fcf31890bf0a51536845a74c016b0c15

    Thoughts?

    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,
    Isela

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

    https://gist.github.com/anonymous/fae7604bb66b68d1415138a2e76f5d41

    /**
    * 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. Good gosh. My apologies, Bill, it was Photon in Jetpack that suddenly decided to act up. Nasty plugin >.<

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

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

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

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

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

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

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

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

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

  114. 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?
    Thanks!
    Greets,
    Daphne.

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

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

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

  116. 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 ) )
    return;

    // Change length if teaser
    if( in_array( ‘teaser’, get_post_class() ) )
    $length = 25;
    else
    $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!!!

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

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

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

  119. 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;
    $cols;
    $colclass;
    if($wp_query->is_home()) {
    $cols = 2;
    $colclass=’one-half’;
    }
    else{
    $cols = 2;
    $colclass=’one-half’;
    }
    if( ! $wp_query->is_main_query() )
    etc etc

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

    Thanks

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

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