In this article I show how Nick Croft's Related Posts with Thumbnails in Genesis code can be laid out in Pinterest style using Masonry jQuery script (WordPress comes in-built with Masonry).
What the Related Posts code does
Quoting Nick,
First, it finds the tags a post is assigned to then tries to find other posts using that same tag. If it gets enough posts, it stops. Otherwise it checks the category for more posts to finish out the total number of related posts Iām going to show.
Bricks Steps
Step 1
Create a file named masonry-init.js in child theme directory/js having the following code:
Nice tutorial! Just wanted to say thank you for all the amazing tutorials you do and paying it forward.
Nice theme, want to ask if its Possible to display related post with thumbnails without plugin?
Yes. http://designsbynickthegeek.com/tutorials/related-posts-genesis
Tried that but there is Problem with the code, keep displaying different amount of related post
Sridhar
Great tutorial as always…I’m trying to have related posts appear with a custom post type using the tutorial above. I have both posts and the CPT (‘programs’) using tags, but for now the related posts don’t seem to be filtering out posts without the matching tags.
Is there something I may have missed here?
Thanks
How do you move the post meta above the related post. I see that you are using the same code on your website to show related post. However, I think that it would be more logical for the post-meta to be above the related post. Thanks. By the way, awesome site, I have used or modified some of the codes that you have shared on this website.
Hi Sridhar,
I have a https site and the related post plugin I like doesn’t work on https sites (I have asked), so I tried your code as I love the layout!
I am wanting to display related ‘portfolio’ items as they are my main content.
Is it possible for you to advise here how I can do that? If not, please email me as I am happy to hire your services.
Thanking you,
Susan
Hello, Sridhar!
Thank you for the tutorial! Right now it only shows related posts. Is it possible to make it show both posts and pages?
Thank you very much!
For this I recommend using Related Posts for WordPress Premium plugin. I am going to write a tutorial on how to set it up in a similar Masonry style in a day or two.
[…] the comments section of Pinterest-style Related Posts in Genesis using Masonry article, a user […]
Slightly of topic but is it easy to apply the Masonry setup to the WordPress Gallery. Many thanks Sridhar.