In the past I wrote about setting up Masonry in Genesis where I provided the code to display blog posts in Masonry Grid on the Posts page (home.php). In this article I share the code for setting up the same as a Page Template that can be applied to any static Page.
Additionally just like the Blog Template that ships with Genesis, you will be able to include/exclude categories and set the number of Posts via Genesis Theme Settings.
Let's dive in!
Masonry Initialization file
Create a file named masonry-init.js in child theme's js (create if not existing) directory having the following code:
You’re the man! This is exactly what I have been looking for and searched a lot before stumbling on your post. Thank you so much for posting this, for Genesis newbies like me, this is just priceless. Many Thanks.
Another VERY helpful piece of content — This is exactly what I’ve been looking for!
Thanks a bunch for the valuable post Sridhar 🙂
Hi again,
I followed the tutorial to the letter, but I’m having some issues:
– The masonry is showing the featured image twice for each post (http://imgur.com/Z1uOShf)
– The pagination doesn’t appear.
—
One last question: How can I make it load only posts from a specific category?
Any help will be highly appreciated 🙂
Thanks in advance.
Hi Again,
In case somebody else has the same issues / question as mine (posted above), here are the solutions that worked for me:
– The double featured image issue: I just commented the “Display Featured image linking to entry” part in the page_masonry.php Sridhar provided.
– To my question about displaying only posts from a specific category, I found this solution to be awesome:
http://www.basicwp.com/filter-posts-by-category-tag-genesis/
≈≈≈≈≈
As to the pagination issue, am still searching for a solution and might post it here later.
Please note that am no coding expert 😉
Cheers!
Hey Bader, thanks for pointing out the issue! The problem with the doubled featured images is that if you just uncomment that last part, the fitting masonry thumb size will not be used. So I went ahead and investigated how to remove the default featured image if present. Working with Dynamik here. The problem occurs only if “Display featured image” in Genesis Theme Settings is checked of course.
I found the solution right here on Sridhars site: http://www.wpstuffs.com/how-to-switch-featured-image-above-the-title-in-genesis-framework/
Paste the remove action from that code right after //* Display Featured image linking to entry, right before the add_action. That did the trick for me.
Sridhar, you might want to add that to the code (commented maybe), or an explanation.
Many thanks for that wonderful tutorial, this template is very useful indeed!
@Bader: I forgot to mention pagination: Could it be that in Genesis Theme Setting – Blog Page Template, the number of posts to show is set to something higher than the number of posts you really got? In this case, the pagination would not show up until you got more posts. To test that, set it to something lower. My pagination does show up.
(I’m not sure if my first reply attempt went through as I’m getting an error while submitting!)
@Siga: Thank you for your hints.
#Doubled featured image: indeed pasting the remove action from the code on the page you shared above, right after //* Display Featured image linking to entry worked fine for me too. Thank you a lot for the hint. Awesome!
#Pagination: the number of posts to show which (set in the Genesis Theme Settings) is actually less than the number of posts I intend to display on the masonry page.
I’m still trying to figure out how to make it work. However, if I manage to get the masonry effect (Infinite Scroll – next set of Posts to load automatically as the visitor scrolls down) from Sridhar’s tut: http://www.sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/
working, that would be fine too.
Cheers 🙂
I really like this layout and would love to use it. I have followed the steps but I am still not seeing any option for masonry page template.. Perhaps I dont have jquery on my site?
I am trying to make this layout for a static page. Any wisdom is greatly appreciated.
Hello! Thank you so much for the tutorial! It really was easy to start with.But unfortunately it won’t work.
I followed all instructions, read them many times, checked if I did not forget anything, but… the posts do not want to show in the masonry grid…
I was wondering if I need to change settings? For instance in the css part?
/* ((no. of columns) * x) + ((no. of columns – 1) * gutter width) = available width */
/* width: 373px; */ /* 3 columns */
width: 270px; /* 4 columns */
I do hope someone can help me out! That would make me very happy 🙂 I can send a link, if needed.
Thanks in advance!!
Eva
Hello again, I managed to show the posts in the masonry grid but it only shows if I set the Front page settings to “latest posts” and make an extra page (Portfolio) to show the posts. This means that I have two pages in the menu (Home and Portfolio) showing the same thing. I have tried all menu and setting options, switched of and on plugins, but this seems the only way to get the masonry grid working…
Anyone can suggest another solution? I can provide an URL.
Hoping for a solution, and thanking in advance!
Thanks for the tutorial but pagination doesn’t seem to work – can you help?
The pagination shows up at the bottom correctly but when the second/third page etc is clicked it just reloads the homepage. Pagination works fine on the other aspects of the site so seems to be something about this masonry template. I’ve checked code, disabled all plugins etc and have even tried with a new local site and fresh copy of Genesis etc to test but it just replicates the error.
Do you have any ideas?
Thanks
Annabel
I’ve done some more testing and have found that the pagination does not work when the front page is set to a page that uses the masonry template.
Changing the line below looked like it fixed it initially as the first click of the pagination (ie page 2) worked. However anything past that (page 3, 4) just continues to reload the page rather than moving on.
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
to
$paged = (get_query_var(‘page’)) ? get_query_var(‘page’) : 1;
Can you help?
Annabel
Do you want the masonry to work on your site’s homepage?
Can you share a screenshot of your Settings > Reading?
Yes, thats right. I would like the masonry to work on the homepage using your page template, sorry if that wasn’t clear Sridhar. As it stands the masonry works perfect, its just the pagination that doesn’t.
I have created a page, I’ve called it Masonry, and it uses the template Posts in Masonary grid from your tutorial. Not sure how best to share a screenshot of Settings>Reading but it is setup in the following way –
A Static page;
Front page: Masonry
I hope that helps,
Annabel
Out of the box the front page in WordPress shows the list of blog Posts. It is better to use that default loop rather than using a Page Template for showing the same list of Posts and trying to fix the pagination.
Follow http://sridharkatakam.com/masonry-genesis/ instead.
Hi Sridhar,
Thank you for your great tutorials as always. I have yet to come across a masonry tutorial for genesis that uses content blocks of different sizes. I would like to implement this, but with variable widths for the content blocks, (1×2, 2×1, 2×2, etc.) where the block sizes would match the category of the post or different post types.
Can you help?
Ahmed
Hi Sridhar,
I’m a Genesis/WP newbie. How can we apply this code to a portfolio post type?
Here you go: http://sridharkatakam.com/masonry-grid-on-portfolio-cpt-archive-in-genesis/
Thanks I’ve used a number of your tutorials to develop my site. I would still like to show some of the page content on the page. Is there a way to get that to display above the masonry grid?
Yes.
Change
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
to
http://pastie.org/pastes/10681469/text