Genesis Grid Loop

This post has now been updated to Genesis Grid Loop Advanced. The below post is kept for posterity only.

While the simple example of how to use the Genesis grid loop might be enough to get you up and running, there are far more advanced ways you can use the grid loop to really get the best out of it.

This tutorial will go through the steps to adding a variable column balanced grid for any archive page on your site. If you just want the code, skip to the final section. All of the code snippets go at the end of your child theme functions.php file, just before any closing ?> there might be, except for the CSS which will go at the end of your child theme style.css (or css/custom.css for Prose) file.

This tutorial requires Genesis 1.5 or later to work. Adding it to a child theme while running an earlier version of Genesis will kill your site, so go ahead and update Genesis first!

Using A Grid Loop

The first thing we need to decide, is on which pages we want the grid loop to run. The simple example tells you to put the loop helper function straight into home.php, which means it won’t run on category, tag, monthly, or other archive pages.

This function uses the conditional tag of is_single(), preceded by the negation operator (!) to ensure the grid loop is not used on single posts, custom post types or attachments, and is_page() preceded by the negation operator to ensure it is not used on Pages either. That leaves it free to be used everywhere else.

The next three lines of code are quite logical – we remove our normal loop and add in our grid loop, which we’ll define in a moment. We also make reference to a filter that will add a few CSS classes which we use to style the columns.

Preparing The Grid Loop

Now we need to set up our grid loop. The genesis_grid_loop() functions takes an array of values, which we can configure.

There’s a lot there, so lets go through it. Firstly, we pull in a couple of global values that WordPress has created and populated for us. We need these later in the function, so we need to be able to access the values of them.

Next we take the normal query arguments for that page (like the category ID, tag ID, custom post type name or something else that defines what set of posts we want) and put them into an array. The simple example didn’t need to include this, as the home page was just showing all posts, in the default date order. Now we’ve enabled the grid loop on other archive pages, this is needed.

Then comes the main configurable section for how we want the grid loop to run. See the Understanding the Parameters section on the simple example to know what they all mean. The only changes made here, are the number of features, number of posts_per_page, and the more link text.

The bit after that about balancing needs a little bit of explaining. In the simple example, the number of features was equal to the number of columns, meaning that on page 2 and later of the archives, the grid was always complete (except maybe for the final page). However, we want something more flexible that allows, say, 3 columns, and 1 feature post. If we set our posts_per_page to be an exact multiple of the number of columns, then on page 2 and later, the grid is balanced, but page 1, where one of the posts is a feature, means we’ll have an unsightly gap at the end of the grid. If we increased the posts_per_page so the page 1 looked right, then there would be one extra grid post on it’s own on all later pages.

What we do, therefore, is adjust the total number of posts to also include the number of feature posts we want, just for page 1 (props to Jen for identifying this issue and coming up with a simple fix). Unfortunately, this causes an overlap where the last post(s) (equal to the number of feature posts) on page 1 are repeated at the start of page 2, so we add an offset in, and WordPress starts pulling posts from the database at the right spot. Phew!

Finally, we take the first array of query values, merge it with our provided grid loop values, and send it all off to Genesis to create the grid loop itself.

Only Show Grid on First Page

One alternative you might want here is to only show the features and grids on the first page of the archive, and go back to normal posts on page 2 and later. If so, switch the final line:

for:

Styling The Grid Loop

In terms of styling, the simple example focused on the case when you have two columns – float one left, float one right, give them both a width of just under half, with some padding in between. However, if we want more than two columns in our grid, we can’t make use of the even and odd class names, so we’ll add our own, using the function we defined earlier on.

By the time this function is run, we’re inside the grid loop, about to start showing individual posts. Specifically, this is run when it comes to adding classes to each post.

We start by pulling in another couple of global variables – one created by Genesis when it was creating the loop, and another from WordPress that identifies how far through the loop we’ve got; for each post that is displayed, $loop_counter gets increased by one.

The next line is so simple, yet is probably my favourite – once the CSS is set up (we’ll get to that shortly), it’s just this value you need to change to alter between two, three, four or more columns on the grid. Beautiful

We then come to adding our extra classes. As we only want them on our grid posts, we skip over this section if we’re outputting a feature post. For grid posts, there are two classes being added. The first adds a numbered class, indicating which column we’re in; this allows you to style all of the third column posts, say, via .genesis-grid-column-3 { color: red; }. The second class adds a size1of3 class (when $columns = 3), and this is used to specify the width of the column.

Suggested CSS

Taking our lead from some of the Genesis 1.5 style sheet styles, we come up with the following:

All of the grid elements are floated left and have some padding added. The grid posts in the first column are set to stop floating, and move on to a fresh new row, with the left padding removed. Finally, all the column widths are added (for up to 6 columns) based on work that Brian did on the Genesis 1.5 style sheet.

If you want different amounts of padding, then you’ll need to adjust the width percentages, else you’ll either have noticeable gaps, or the last post in a row wrapping around to below the others in the same row.

Putting it Altogether

Here’s the final PHP code to drop in to your functions.php file (and don’t forget to put the CSS above into your style.css):

Summary

Even after all of this, there are still more ways you can go extend grid loops – the code above can be adapted so that you have differently configured grid loops running on different archive pages, or using a grid loop that uses a custom loop to output the posts in some special way (think images + post title caption for a portfolio). Go ahead and experiment!