Learn in this tutorial how to display entries in grid format on the Genesis Authority Pro child theme blog page using code.
If you want to display the blog entries in grid format you have 2 options:
- Use Bill Erickson’s popular Genesis Grid plugin.
- Or choose the lighter solution… Read on. 😉
Although we already saw how to create it for Genesis Sample, and therefore for many other Genesis child themes, some themes require some modifications in the code.
In fact, one subscriber proposed me to adapt it for the child theme Authority Pro.
Do you want something like that? Well, keep reading. 😉
Instructions to display the posts in grid format on Authority Pro blog
1. Modify the functions.php file
Add the following code in functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
With this you generate a class .post-wrapper that 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 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:
To see this and another 1097 code snippets of this website, login or subscribe here.
By inserting these lines of CSS you ensure that the posts are displayed in a 2-column grid on screens over 1200px wide.
Due to the shadow of the featured image I do not recommend using 3 columns or applying it to lower resolution screens, as they will most likely overlap with each other.
But, if you want, you can play with the CSS to see if the result convinces you.
Now you only need to take care of 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:
- Under “Select one of the following” choose the Entry excerpt.
- If you choose “Entry Content” I recommend limiting the number of characters (200 for example).
- Check the box “Display the featured image?”
- Under “Featured image size” choose Grid (or blog-featured-image).
- For “Featured image alignment” choose Center.
Of course, this is a simple example to guide you, but I encourage you to change the settings to your liking.
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 posts will be displayed in grid format on screens over 1200 pixels wide.
Conclusions
Now you know how to display entries with a grid layout on the Genesis Authority Pro child theme blog page.
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. 😉
