Display posts in grid layout on Genesis Sample blog page

Learn in this tutorial how to display the posts in grid format on the Genesis Sample blog page or any other Genesis child theme using code.

If you want to display the blog posts in grid format you have 2 options:

• Use Bill Erickson’s popular Genesis Grid plugin.
• Or choose the lighter solution… Read on. 😉

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:

Do you want something like this?

Instructions for displaying posts in a grid in Genesis Sample

1. Modify the functions.php file

Add the following code in functions.php:

With this you generate a class .post-wrapper that will allow 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 the CSS of the grid

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 give some basic styles so that the title of the blog page is centered and have a better hierarchy.

Now you only need the last detail.

3. Make theme adjustments

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 that can serve as a guide, but I encourage you to change the values to your liking.

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

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

You may want to combine this tutorial with adding a banner with an image at the top for Genesis Sample.

Conclusions

Now you know how to display entries in the blog page on a grid layout for any 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.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉