Note: Check out my latest post that allows you to display related posts using CSS Grid. It’s more flexible.
In a recent post, I showed you how to display related posts without using any plugin. This post is about displaying related posts in Grid Format which is what a lot of websites tend to do these days. Showing related posts in grid view not only looks cool but it sits nicely on mobile devices. Sridhar Katakam has already written a post on how to display related posts with thumnails in Genesis. In this post, I will basically use the same code for functions.php with some tweaking to add grid display feature. Plus, I will throw in some CSS code to jazz it up.
Please, note that we will display three related posts in this demonstration. However, you’re free to show any number of related posts as long as it gels with your existing theme and makes sense to your readers.
Related Posts without Thumbnails vs Grid Format
Before we begin, here’s a little rant: I recently came across a Genesis guide that used AFC to display related posts in grid format. While there’s no doubt AFC is a great tool to customize your Genesis theme easily, personally I’d prefer doing something manually rather than using a plugin. Of course, at the end of the day, it’s a personal choice.
Ok, so here’s how you can display related posts in Grid format without any plugins on your Genesis themes.
Customary Warning: Don’t try if you’re NOT familiar with FTPAdd the following code to your functions.php file.
Add the following code to your CSS file.
That’s all! You should now see your related post in Grid View below the entry content.
Notes: Keep in mind you may have to change a few things if you want to display related posts in another location, change the number of related posts, or use a different Genesis column classes. Just search for following parts and make changes as necessary.
genesis_after_entry_content: Change genesis_after_entry_content to your preferred hook. Use this resource to choose hooks in Genesis.
$showposts=3: Change the digit to display the number of posts you want to display.
class="one-third": Change one-third and use any other column class of your choice. Check out the various Genesis Column Classes here.
If you have any questions, let me know.