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.

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.

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:

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.

chat241 Comments

    • Bill Erickson says

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

  1. Ahmad says

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

  2. says

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

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

  3. Steve Hill says

    Great post thanks Bill; so simple to use.

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

    Thanks.

    • Bill Erickson says

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

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

  4. GaryJ says

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

    • Bill Erickson says

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

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

  5. Bruce M says

    Hi Bill,

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

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

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

    • Bill Erickson says

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

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

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

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

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

      • Bruce M says

        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!

        • Bill Erickson says

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

          • Bruce M says

            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.

          • Bill Erickson says

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

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

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

          • Bill Erickson says

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

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

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

      • Bruce M says

        Hi Bill,

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

        Any idea why that would be???

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

        Thanks MUCH!

  6. says

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

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

    Excuse my ignorance if this doesn’t make much sense. I’m new to coding, period! :)

    Steve

    • Bill Erickson says

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

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

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

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

      • says

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

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

        Thanks for the pointers though – this is the fun part! :)

        Steve

        • Bill Erickson says

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

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

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

          • says

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

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

            Steve

          • says

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

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

            Steve

          • Bill Erickson says

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

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

  7. Bruce M says

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

      • Bruce M says

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

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

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

  8. says

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

    • Bill Erickson says

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

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

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

  9. says

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

    • Bill Erickson says

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

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

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

    • Mike says

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

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

  10. Affan Ruslan says

    Thanks for the tutorial Bill.

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

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

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

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

    • Bill Erickson says

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

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

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

      • says

        Nice one Bill, now I got it.

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

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

  11. Phil says

    hi Bill,

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

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

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

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

    thanks

    Phil

    • Bill Erickson says

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

      • Phil says

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

        I added in the CSS tweak and it worked a treat

        cheers

        Phil

  12. Affan Ruslan says

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

    • Bill Erickson says

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

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

  13. Jesse says

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

    • Bill Erickson says

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

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

    • Bill Erickson says

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

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

    • Bill Erickson says

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

  14. Jesse says

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

      • says

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

        Otherwise this tutorial works perfectly! Thanks!

  15. julia says

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

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

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

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

    How can I specify 60 teasers for only the gridloop?

    • Bill Erickson says

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

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

  16. julia says

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

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

  17. A. Tate Barber says

    Hey Bill! Great tutorial.

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

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

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

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

    Thanks!

    • Bill Erickson says

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

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

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

      • A. Tate Barber says

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

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

        Thanks for the help!

  18. says

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

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

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

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

    • Bill Erickson says

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

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

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

  19. julia says

    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?

    • julia says

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

      So in my case $wp_query->current_post % 5

  20. julia says

    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”);
    }
    }

  21. says

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

  22. says

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

  23. julia says

    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?

    • Bill Erickson says

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

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

          • Bill Erickson says

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

  24. Ian says

    Hey Bill,

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

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

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

    Thanks for your time, and your epic resources on how to bend Genesis to your own will! :)

    Ian

    • Bill Erickson says

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

      https://gist.github.com/4059773

      • says

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

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

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

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

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

        Cheers,

        Ian

  25. says

    I cheated and used the plugin.

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

    Genesis rocks!

    Cheers from Italy,

    Alex

  26. says

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

  27. Amy says

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

    Thanks for the help.

  28. Amy says

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

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

    • Bill Erickson says

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

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

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

  29. Amy says

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

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

    I added this code to my functions.php file:

    https://gist.github.com/4693055

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

    • Bill Erickson says

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

      • Amy says

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

        https://gist.github.com/4694648

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

  30. says

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

  31. Greg says

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

    Thx,

    Greg

    • Bill Erickson says

      Don’t use the blog page template :)

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

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

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

      • Greg says

        Hello again,

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

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

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

        Am I making sense?

        Thanks,

        Greg

        • Bill Erickson says

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

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

          • Greg says

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

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

            Take care,

            Greg

  32. Rod says

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

  33. says

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

    • Bill Erickson says

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

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

        • Bill Erickson says

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

          • says

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

        • Bill Erickson says

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

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

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

          My email is bill.erickson@gmail.com. Thanks!

  34. Greg says

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

    • Bill Erickson says

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

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

      • says

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

        • Bill Erickson says

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

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

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

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

          • Greg says

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

        • Bill Erickson says

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

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

  35. says

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

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

    • Bill Erickson says

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

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

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

      • Hina says

        Hello Bill,

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

        Thanks
        Hina

  36. says

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

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

    Thanks for your help!

      • says

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

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

      • says

        Hi again Bill,

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

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

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

        What am I doing wrong?

  37. Richard Buff says

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

    • Bill Erickson says

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

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

      I’m sure I could use Soliloquy for these as well, but I’m used to my ways :)

      • Richard Buff says

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

        • Bill Erickson says

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

  38. Bruce Munson says

    Hi Bill,

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

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

    Thanks much!

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

  39. Kearin says

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

  40. says

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

  41. says

    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:
    http://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.

    • Bill Erickson says

      Best place to look is in the plugin itself.

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

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

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

      • says

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

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

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

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

  42. says

    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.

  43. says

    Hi Bill

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

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

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

    Gemma

    • Bill Erickson says

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

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

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

      • says

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

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

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

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

    • Bill Erickson says

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

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

      • says

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

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

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

  44. says

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

  45. Qing says

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

    • Bill Erickson says

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

  46. Daniella says

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

    • Bill Erickson says

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

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

  47. Greg says

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

    Thanks,

    Greg

  48. Greg says

    Hi Bill,

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

    Thanks,

    Greg

  49. says

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

    • Bill Erickson says

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

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

  50. says

    Hi Bill,

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

  51. says

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

  52. Tracy Scherrer says

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

  53. says

    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.

    • Bill Erickson says

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

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

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

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

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

  54. Hina says

    Hello Bill,

    Many Many thanks for this wonderful tutorial.

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

    I am using your plugin I used this code to remove the content on teasers:
    http://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

    • Bill Erickson says

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

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

  55. says

    Hello Bill,

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

    Any tips would be greatly appreciated! Thanks so much!

  56. Nathan says

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

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

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

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

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

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

    • Bill Erickson says

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

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

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

  57. says

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

    • Bill Erickson says

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

      Hope that helps

      • Brandon says

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

  58. says

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

      • says

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

      • says

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

        function excerpt_read_more_link($output) {
        global $post;
        return $output . ‘ID) . ‘”> 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.

  59. says

    Hi Bill,

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

    http://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.

  60. says

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

  61. Robin Rowell says

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

    • Bill Erickson says

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

    • Bill Erickson says

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

      • NIKS2456 says

        Your method worked . I also tried this one

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

        This also works . Which one should I use ?

  62. mmj says

    Hello Bill

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

    Thanks

    • Bill Erickson says

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

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

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

        • Bill Erickson says

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

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

          • Renuka says

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

          • Bill Erickson says

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

  63. says

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

  64. says

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

    • Bill Erickson says

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

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

Leave a Reply

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.