This guide is just an extension of one of my earlier guides, “Display Related Posts in Grid Format in Genesis.”
In the earlier guide, I’d shown you how to display related posts in Grid Format which essentially used Genesis Column Classes.
However, this guide takes the CSS Grid approach to do the same thing.
I’ve modified the php code slightly to suit the CSS Grid and then added some fresh CSS code to apply CSS Grid to it.
Here we go:
Add the Following Code to Your Functions.php file
Add the Following Code to Your Style.css file
Refresh your single post and you should be able to see related posts in CSS Grid format.
Why CSS Grid Instead of Genesis Column Classes?
CSS Grid allows you more control to customize your display while it can be a bit complicated with Genesis Column Classes.
Please, let me know if you have any questions.
Hi, thanks for the great work and this code.
I was wondering if it’s possible to limit it to only show for a certain category? Is it possible, as long as I know the ID number of the category?
I use a former version of the code on my website atm, but I’m not satisfied that lots of ‘unrelated’ articles are featured.
Looking forward to your kind reply
Hello Espen,
Thanks for your feedback!
I’m not sure what your question is. Are you asking if this code helps you “show posts from a specific category”? This code does show posts from the same category that the article is filed under. For example, this article has been filed under “Guides” category and the related posts you see under it are randomly populated from the same category. Is there something you wanted to ask? Please, let me know!
Great tutorial, how to code the CSS for older browser fallback? Thanks in advance.
Hello Jennifer, Short answer is: this tutorial might help you. Long answer: I will try to update this tutorial over the weekend 🙂
Hi Susanta, i also found the same website earlier, but, it was already too complicated for me. I shall wait for your tutorial. Many thanks in advance.
I think this grid does not work in earlier Microsoft edgeHTML 16, could please confirm this? Any solution?
Please, take a look: https://caniuse.com/#search=grid. Grid not supported by all browsers. I will try to update this post. Thanks!
Hi, great tutorial, but can you tell me how can show only related post from the last month or last week?
Currently, post appear from any date (2013, 2014, 2015 post)
Thanks for you great support.
Hey Mauro,
Sorry for the late reply. It looks like you would have to customize the argument in order to display posts from within a specific time frame. I need to dig into it in order to offer any solution. However, you could simply ask about it on Genesis Community on Facebook to get a faster response and different perspectives on it.
I was looking this code from a long. Today I successfully implemented it through your guide. Thanks a lot. I have one question.
When I refresh the the page, related posts are changing. How to to show a fixed post for each post, that will not change on refresh and the related posts will be from the same category.