Display search results in grid layout on Genesis Framework

Learn with this tutorial how to display the entries in grid format on the search results page in any 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:

Find out how to achieve this effect below.

Instructions for displaying grid format posts in the search results page for Genesis Sample

1. Modify the functions.php file

Add the following code in functions.php:

With this snippet you generate a class .entry-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 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, insert this fragment at the end of style.css:

With this snippet you also adjust the paging element to be displayed closer to the results.

Now all you need is 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 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 results of the search page will be displayed in a grid layout on screens over 960 pixels wide.

You might want to combine this tutorial with the one on improving search in Genesis.

Conclusions

Now you know how to display search results in grid layout on a 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? I read you 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. 😉