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