Display archive pages in grid layout on Genesis Framework

Learn with this tutorial how to display the archive pages entries in grid format for any Genesis child theme using code.

Following the tutorial in which you learned how to display the search results in grid format, a subscriber asked me if I could write something similar but to use it in the archive pages (categories, tags, author…).

The answer is yes and you are about to read it. 😉

Although these snippets are created for Genesis Sample, you can apply them in any other Genesis child theme by making small changes in the code.

This is the final result:

Follow the steps below to achieve this effect on your archive pages:

Instructions for showing archived pages in grid format for Genesis Sample

1. Modify the functions.php file

Add the following snippet in functions.php:

With this block you generate a class .entry-wrapper which allows the necessary styles to be applied.

In addition, this code forces the design to be full width, and eliminates the metadata of the entries, so that the design is cleaner.

Finally, you also create a new image size called “Grid” that fits the necessary measurements.

Do you already have a suitable size? Then delete this line.

But if you keep it, remember to regenerate all the thumbnails of the images that were already in your WordPress library with the Regenerate Thumbnails plugin.

2. Customize your grid CSS

Once the changes have been made to the child theme, you only need to assign the styles to be displayed in grid format.

To do this, enter this block at the end of style.css:

With this snippet you also adjust the paging element to display it closer to the results.

Now all you need is the last detail.

3. Make adjustments to the theme

To give the finishing touches on it go to Genesis > Theme Settings > Content Archives or the same path from the WordPress customizer.

Adjust the following features:

1. Under “Select one of the following” choose the Entry excerpt.
2. If you choose “Entry Content” I recommend limiting the number of characters (100 for example).
3. Check the box “Display the featured image?”
4. Under “Featured image size” choose Grid.
5. For “Featured image alignment” choose Center.

Of course, this is a simple example to guide you, but I encourage you to change the values as you wish.

Also, if you do this from within the WordPress customizer, you will be able to see the changes in real time.

You already have it. The archive pages will be displayed in grid format on screens over 960 pixels wide.

Conclusions

Now you know how to display the archive page entries in grid layout within your Genesis child theme.

This code is created for Genesis Sample (2.8) but with a few adjustments it will work for any Genesis child theme.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂