Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Easy Genesis Grid Loop for Your Theme

*Updated: 8/21/13

Since Genesis 1.9 came about there’s been a lot of talk about the Genesis Grid Loop. It seems that there are many different ways to accomplish it.

The most popular I’ve seen has been Bill Ericksons Easier, Better, Grid Loop. His grid loop works flawlessly when implemented. I think it may have just been a little too advanced for me.

I created a new Genesis Grid Loop that you can use on any theme you like. The concept is exactly like Bill Erickson’s, but the code is very different.

Now before I get into this, understand that I am not a hardcore PHP programmer. If there’s anything that needs to be added or edited, please let me know in the comments, and together, we can perfect it!

Here’s the code:

I tried to put the comments in so it’s easier to understand but I’ll break it down a bit more.

First take notice that I’m not making any edits to the loop itself. The code works by adding and removing classes. It targets the posts you want effected, makes the class change and also specifies which image should be used for the featured image. The classes are based on what’s already in the Genesis Framework Style Sheet (with one exception and I’ll get to that).

The Loop Counter

I couldn’t find anything in the codex, I’m sure it’s there somewhere but the loop counter is a global variable that counts the amount of posts in your loop.

Using the loop counter you can add classes based on the amount of posts showing. For instance, the following code will target the amount of posts you want featured. It does this by only adding the ‘one-third’ class to every post after the first two.

If you want 3 featured posts, then change it to three and so on.

The .last Class

We add the .last class by using the % sign in PHP.

What the % sign does is get the remainder. But here’s the kicker, the loop counter starts at 0. Keep that in mind because if there are 4 posts, the number being output is actually 3. So in the example above, I used 5 posts to test. 5 posts will actually put out the number 4 because it starts at 0. 4 divided by 3 is 1 with a remainder of one. So now, anytime there’s a remainder of one, the .last class will be added.

It may sound a bit confusing but it’s really just a number game.

Keep in mind that this value has to be adjusted according to the amount of featured posts you have. If you have more featured posts, or less featured posts, then you’ll have to adjust the number accordingly. The above code is for 2 featured posts.

If you just want one featured post, use the following:

That means, 3 divided by 3 is 1, with 0 remainder.

Modified CSS

Here’s the modified CSS with the .last class added. I like this better than adding a “.first” class, just seems more logical to me.

Here’s the Video

Just in case this post is a little confusing, I made a quick video to show you how it works.

DISCLAIMER: I did this video very quickly in one take. THE CSS IS NOT SET UP IN THE VIDEO. You’ll still see how the code works though.

Why is this awesome?

Well for starters, we’re not doing anything with the actual loop to get this effect. In fact, this gives you much more control over the loop, because now, you can edit it as you would any other loop! This means you can easily remove the post meta, edit the featured image, move the title, etc. Whatever you want to do will now just use standard Genesis Functions.


The more I figure out, the more I’ll add to either this post, or the gist file I created. If you have anything to add, please share.

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on Easy Genesis Grid Loop for Your Theme

  1. Looks good to me. The reason you won’t see anything in the Codex about $loop_counter is it’s only in Genesis. If you look in /genesis/lib/structure/loops.php at the genesis_standard_loop() function, you’ll see the code Genesis uses for generating a loop.

    But WordPress already provides a loop counter in the $wp_query object. That’s why my code snippets use $wp_query->current_post rather than $loop_counter – it’s a WordPress core feature and can be used on any theme.

    For those who want to have a grid loop without writing any code, I recommend checking out my Genesis Grid Loop plugin. It uses the same code as my tutorial, but lets you control everything from an options page.

    1. Jonathan says:

      OOoo, didn’t know that!Thanks Bill! Thanks for commenting too!

  2. Keith Davis says:

    Hi Jonathan
    I can’t comment on your coding but I can congratulate you on a great post and a super video.
    Thanks for sharing with the community.

    1. Jonathan says:

      Thanks so much Keith! Really appreciate the comments and tweets!! =)

  3. Winterburn says:

    Tada, all I need is your great post.
    Thank you so much for your kindness.

    1. Jonathan says:

      Your very welcome!

  4. Brad says:

    I love this! I’m looking for a way (within the Genesis framework) to create a grid with the most recent post from selected categories as featured posts. Ideally with the categories in a fixed order. I’m thinking 6 fixed grid cells for the categories with the most recent post of each category populating them. On other pages I would like to use teasers so I need to be able to support multiple grid configurations.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top