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.
Great tutorial, thank you!
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?
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
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
Here’s a tutorial I wrote on custom post types.
I knew there was a better way!
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:)
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.
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.
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).
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.
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!
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
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!
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
It’s Awesome. Say good by grid loop
Did I say THANK You?
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.
Hi Bill,
Any idea why I wouldn’t have pagination? Here is my code for my page template https://gist.github.com/2155009
I’ve tried several things and don’t see what is wrong.
Thanks!
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).
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 useglobal $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 Settings5. 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
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!
Make sure you have
'paged' => get_query_var( 'paged' ). In your previous code you hadget_query_var( 'page' )Wow, that was it…
I had read that ‘page’ was the proper way, but that was with WP_Query -
$query = new WP_Query( ‘paged=’ . get_query_var( ‘page’ ) );
http://codex.wordpress.org/Class_Reference/WP_Query#Post_.26_Page_Parameters
Sooooo grateful for your help Bill. I really did not want to turn this into a ‘teach the noob the code fest’
Thank you sir!
P.S. – the new avatar is very… different
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
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.
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
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!
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
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
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!
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
In my post I describe why you need to break up what to display (the query) with how to display it. If you need to make changes to the default query (ex: use 6 posts per page), then customize the main query.
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.
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.
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.
great stuff Bill, I agree it’s a real hassle just to work around the sticky posts. Maybe I’ll just disable the feature.
Also, why is the grid loop functionality better than, say, just creating a custom template? Is it because of the integration with Genesis?
http://wordpress.stackexchange.com/questions/10676/is-there-a-way-to-disable-the-sticky-posts-feature
I just found this: ignore_sticky_posts
http://codex.wordpress.org/Sticky_Posts
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?
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.
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.
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.
Awesome tutorial, thank you!
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?
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.
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?
)
In my template file I created a custom loop, so I just rearranged the items in that loop.
If you’re using the genesis loop like I mentioned above, you can just rehook genesis’ image function: https://gist.github.com/3176256
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
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
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
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?
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
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?
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?
Here is the code: https://gist.github.com/3515810
It causes the total page number to jump from 54 to 77. Any ideas?
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.
Nope, 537. For some reason that query is making the pagination think there are way more posts.
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.
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?
Yep, I just figured that out too
Here’s some code to drop into your functions.php file to fix it: https://gist.github.com/3529963
When on the homepage, this resets $wp_query->max_num_pages to the correct one based on the grid args
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!
Awesome! It worked. Thank you so much for your help!
This is working great…except with Genesis Prose, it’s giving me full posts int the “teasers” instead of excerpts. (See http://ashleighbaker.net/)
Nevermind, I finally figured out I needed more than this, I needed to actually change the loop. Now it’s working!
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?
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?
You are totally right. I forgot that I changed the Read settings.
Thanks alot. Great code. It works brilliantly with Genesis.
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!
‘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.
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!
Got it figured out. Your help on the_content filter really helped me (as well as a few minutes of Google searching).
Here is the solution I came up with:
https://gist.github.com/3862990
Still working on it, though.
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.
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)
Thanks Bill. Just had a chance to sort this out, and all seems to be headed in the right direction. Much appreciated.
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?
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
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”);
}
}
Never use query_posts!
Modify the be_grid_loop_query_args() function to include your additional query args. If you used the code from this tutorial, it might look like this after your new args: https://gist.github.com/3894556
Thanks, works brilliantly.
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
Add this to your theme’s functions.php file: https://gist.github.com/3895534
replace ‘sample-category’ with the category slug you want used.
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?
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
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?
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
Thank you very much.
Bill,
I noticed the WP-Rotator is not longer being updated. What responsive slider do you recommend?
Thanks
The Genesis Responsive Slider works pretty well. But for almost every client site I build, I end up building a custom rotator specifically for their needs, based on Flex Slider.
Oh, so you put the html code in the editor in lieu of using a featured image?
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.
Bill,
I understand, Thanks!
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
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
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
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.
Strange that it’s doing that then. Obviously I have broken it somewhere.
Here is my code: https://gist.github.com/4203459
Thanks for any help you can give me
Cheers,
Ian
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
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.
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
Hi Bill,
That does the trick, thanks.
Mike.
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.
HTML tags are stripped out of excerpts. If you want to use markup, use “Show full content” in Genesis > Theme Settings and place the more tag where you want it to end. More info: http://en.support.wordpress.com/splitting-content/more-tag/
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!
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?
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
(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.
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
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.
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
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?
If you’re using the plugin version of this code, you can add this to your theme’s functions.php to change the limits: http://www.billerickson.net/code/genesis-grid-change-length-of-content-in-grid/
This does it based on words. For characters, use wp_html_excerpt() instead of wp_trim_words(). More info: http://www.billerickson.net/code/truncate-by-word-or-character/
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.
Try this instead: https://gist.github.com/billerickson/4947529
The filter in the previous link doesn’t exist in the advanced example above, only the plugin.
You can use the plugin with custom post types by using the ‘genesis_grid_loop_sections’ filter ( http://www.billerickson.net/code/limit-genesis-grid-to-specific-category/ ). I prefer to use the plugin rather than the advanced example above to keep the theme simpler.
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
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”
Thank you Bill, I sincerely appreciate your reply!
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
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.
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
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
If you add the column classes to your CSS file you should be able to use it in any theme.
Try creating a page with the following content (switch to HTML view in WordPress, then paste): https://gist.github.com/billerickson/4978875
If that works, it means you’ve set up the column classes in your CSS correctly
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.).
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.
I have the plugin installed too, but no luck for our web site. Here is what our blog page looks like: http://www.miscindiana.com/newblog/
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.
Sorry, I was troubleshooting. The Settings > Reading Posts Page is actually: http://www.miscindiana.com/2013blog/
I created a page called “2013BLOG” and it is assigned the “Default Template”. It just shows the main page.
Does your theme have a home.php? If so, rename it to something else.
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!
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!
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?
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.
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?
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
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?
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.
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!
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’.
Thanks, Bill! This worked perfectly.
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!
Yes you can. This works exactly the same as the previous comment, except you also need to include remove_action( ‘genesis_post_title’, ‘genesis_do_post_title’ );
Example: https://gist.github.com/billerickson/5021632
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.
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
I tried the code snippet to remove info from the grid loop, but it didn’t work. Here’s the code I put in:
https://gist.github.com/anonymous/a3fd877c3aee0c882d1d
And here’s the result (no change.)
What did I do wrong?
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?
Never mind, I changed the class to ‘one-third teaser’ and that fixed things right up. Thanks again for your help!
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.
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
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.)
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
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
Never mind my last comment. I found the solution in the comments above using https://gist.github.com/billerickson/2046892/raw/4bb66bb71cf4261b91a5a6030e763bb1f8bccf67/gistfile1.css
Let me know if I’m doing it wrong.
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.
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.
Will do thank you Sir!
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!
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.
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.
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.
Bill – I’m trying to insert Adsense after 2 Features in home page. Is there an example that I can follow?
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.
Sorry Bill, that should have read http://domain.tld/page/post/comments/ ~ my bad!
Thanks!
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
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.
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
Using Grid Loop, which is an amazing plugin, I am noticing that the right border on thumbnails is missing: http://66.147.244.62/~grapefr3/topic/the-golden-gallery
Presumably this is a CSS issue? I know Grid Loop does its own thing with images. Any tips?
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.
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?
PS: Sorry, the link to the blog teaser is here: http://66.147.244.62/~grapefr3/
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.
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?
It depends what you’re using it for. If you’re using it to query for posts, I recommend my Display Posts Shortcode plugin along with Shortcodes in Sidebar Widgets which will make the shortcode work in the sidebar.
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!
I couldn’t agree more Mike. Thanks Bill, that plugin is just unbelievably richly featured.
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.
You’ll need to speak with StudioPress support. I don’t provide support for my plugins or commercial themes.
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.
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”.
Great! Thank you very much.