Sridhar Katakam

Genesis and WordPress Tutorials

Masonry in Genesis

by 52 Comments

Updated on September 18, 2020

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

In this tutorial we are going to apply Masonry for Posts page and all archives in Genesis.

While the tutorial has been written for Genesis Sample 3.3.1 (and Genesis 3.3.3), it should work with a few adjustments in any Genesis theme.

Step 1

Add the following in child theme's functions.php:

// Registers a custom image size for image thumbs on content archives.
add_image_size( 'masonry-image', 500, 0, true );

Regenerate thumbnails.

Step 2

Create a directory named js in the child theme directory.

Inside that, create a file named say, masonry-init.js having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hey, thanks Sridhar! This solution may work. I tried it. My child theme is the Dynamik Website Builder, which already has a home.php. I’m unsure if I should try to merge the two home.php files or what.

    Love masonry, though, so it would be nice to get this to work on my blog template! Thanks again for your work.

    Reply

  • Thanks for this update! I’m using this on one of my sites and might have been very lost to see my masonry stop working suddenly (had I updated immediately). I’m inserting a .entry “grid-sizer” to allow for some full-width posts across the top, and just needed to update my .js and change the CSS of my grid-sizer. Can’t have display: none on your first item anymore.

    Reply

  • Dear Mr. Sridharkatakam, what a great Tutorial. I used it today on my theme and it worked out just perfect. NOW I have two questions: 1. is it possible to show the latest post thumbnail bigger than the older posts? 2. Ist it possible to define 1 (or more) thumbnails to always show ?
    Thank you very much!!! regards, AoVoKo

    Reply

  • I cannot seem to get my pages post (“articles”) that uses the blog template to display more than 1 column.

    I’m getting the masonry effect, but it’s only one column, leaving the entire 3/4 of the right-hand side of the page blank.

    Any guidance in this regard would be greatly appreciated!

    Reply

    • Hi Jason, I had the same Problem … I then used the “old” version of this Tutorial… and removed the infinite scroll. Than I calculated the maximum width of the pictures as shown in the tutorial.. the wider they are the less coluns you will have… and voila- it worked out!!! I hope this helps?

      The only problem I am still having now is, that it does not show the possibility to go back on older posts… If anyone could help with this?

      Reply

      • Thanks for the advice, AoVo.

        I believe things are different for the Dynamik child theme. If you have a static homepage in Dynamik, you have to set your reading >> settings to show your latest posts — not a static homepage.

        I therefore cannot alter my blog template by putting my posts page as blog.

        I have tried reducing the width to 155 pixels even on a standard Genesis child theme, and again, I get the Masonry effect, but it’s just one column.

        Sridhar does a wonderful job … but I’m not sure this is a one-size-fits-all solution to the Masonry effect, as I’ve tested on 2 separate child themes and still get just 1 column.

        Reply

  • Hi Sridhar,

    Thank you for the masonry code, I have tried it out and it looks great. How would I got about creating a page template that allows me to use a sidebar with the masonry layout?
    Many thanks
    Tim, london

    Reply

  • Thank you so much Sridhar, this is a brilliant tutorial. You are definitely my favorite Genesis expert.

    Two questions to anyone who can help me. I am fairly new to WP/Dev

    1. If I wanted to pull a masonry feed onto my front-page template, how would i go about doing that with this method? (parallax pro is my base.)

    2. Additionally, how hard would it be to create varying size blocks? I would like my grid to be able to include different size blocks.

    Any info, tips or suggested reading on the above questions is appreciated.

    Thank you.

    Reply

    • Hi
      Thanks for the great tutorial.
      I have the same 2 questions (Front page and different size blocks).
      Can you direct me to the solution?
      Rani

      Reply

  • Hi Sridhar,

    Great post! Used it on my website and works fine. How would I go about adding a toggle function to let the user switch from masonry view to standard list view using same template?

    Thanks!

    Claude

    Reply

  • while back i saw a tut on making the masonry heights even using some js framework.
    unfortunately, i did not save it or bookmark it. are you aware of that js that helps to make the heights even up?

    Reply

  • Also – images aren’t showing up for me at all. I set “Featured Image” and insert the image in the post and it doesn’t show up like you example above.

    Reply

  • Hi Sridhar,

    Nice post. Would you please tell me how to insert banner in specific post. Let me clear i want to see a banner after 5 post.

    Thanks,
    Sajib Roy.

    Reply

  • Hi,

    thanks for a great tutorial.

    If you initialize infinite scroll with this new masonry setup there are errors, such as a single column for page 2 and beyond content.

    This has something to do with the JavaScript in masonry-init.js. Using your original masonry-init.js from Using Masonry in Genesis for a Pinterest like layout fixes this issue. Can you explain why that’s the case?

    Thanks

    Reply

    • Haha,

      I just realized that infinite scroll is a jQuery plugin and therefore we have to initialize it with jQuery. Is there another way to combine masonry with infinite scroll? How about making this masonry setup compatible with Jetpack infinite scroll?

      Thanks

      Reply

  • Is it possible to add a border to some posts but not all? Have tried .post-id .masonry-page .content .entry etc. This does not seem to work. Thanks.

    Reply

    • In your media queries I see that you are setting width only for .masonry-page .content .entry. You need to set the same width for .grid-sizer as well.

      For example in the 900px media query

      [css].masonry-page .content .entry {
      width: 40.917948717949%;
      }[/css]

      should be

      [css].grid-sizer,
      .masonry-page .content .entry
      {
      width: 40.917948717949%;
      }[/css]

      Can you make this change and let me know when done?

      Reply

      • Yep, that’s it. I noticed the .grid-sizer selector was missing but when I added it via the inspector it didn’t change anything so I thought it wasn’t that.

        Thank you very much!

        Reply

    • I’ve been playing with the .php (not that I know better) and i think I have it except for the double divider lines below each post – How do I get rid of the dotted one?

      Reply

      • Try adding

        remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

        inside the sk_masonry_layout().

        Reply

        • Just did that but no change.

          // Display Post thumbnail, Post title, Post content/excerpt, Post info and Post meta in masonry brick.
          add_action( ‘genesis_meta’,’sk_masonry_layout’ );
          function sk_masonry_layout() {
          if ( is_singular() || is_search() ) {
          return;
          }

          add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

          add_action( 'loop_start', 'sk_grid_sizer' );

          remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
          remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
          remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
          remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

          remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
          remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

          remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

          add_action( 'genesis_entry_content', 'sk_masonry_block_post_image', 8 ) ;
          add_action( 'genesis_entry_content', 'sk_masonry_title_content', 9 );

          add_action( 'genesis_entry_footer', 'sk_masonry_entry_footer' );
          add_filter( 'genesis_post_info', 'sp_post_info_filter' );

          remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
          add_action( 'genesis_before_content', 'genesis_do_breadcrumbs' );

          remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );
          add_action( 'genesis_before_content', 'genesis_do_taxonomy_title_description', 15 );

          remove_action( 'genesis_before_loop', 'genesis_do_author_title_description', 15 );
          add_action( 'genesis_before_content', 'genesis_do_author_title_description', 15 );

          remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive', 15 );
          add_action( 'genesis_before_content', 'genesis_do_author_box_archive', 15 );

          remove_action( 'genesis_before_loop', 'genesis_do_cpt_archive_title_description' );
          add_action( 'genesis_before_content', 'genesis_do_cpt_archive_title_description' );

          remove_action( 'genesis_before_loop', 'genesis_do_search_title' );
          remove_action( 'genesis_before_content', 'genesis_do_search_title' );

          remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
          add_action( 'genesis_after_content', 'genesis_posts_nav' );

          remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
          remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

          }

          Reply

      • Yes. I’d like this for all archive categories and posts. Is this version not? I notice in the code you exclude singles and search only.

        Also for above code I found an issue where title & description gets buried behind. Also run into issues on the 404.

        Added !is_404() where you excluded singles and search.

        Also added this to fix posts header inside sk_masonry_layout()
        remove_action( ‘genesis_before_loop’, ‘genesis_do_posts_page_heading’ );
        add_action( ‘genesis_before_content’, ‘genesis_do_posts_page_heading’ );

        Reply

      • Thank you for the reply. You are right, this will cause a problem since each entry can belong to more than one category.

        Reply

  • Hi Sridhar

    I was having the same IE issue with this one as I had with the “Masonry Grid on Content Archives with Title and Excerpt on Hover in Genesis” tut.

    I added “float: left;” to “.masonry-page.full-width-content .content” and it fixed it.

    Great tutorial. Thanks.

    Dom

    Reply

  • I’ve tried this multiple times on a new site that I am working on.
    The theme is Aspire but I also tried the same on the Sample theme with no luck.
    Will this not work post WP5.0?

    Here’s the dev site http://symmetrymgmt.wpengine.com/listings/
    Listings is a custom post type using AgentPress Listings – thought that might be the issue so I also created a couple of blog posts and it’s the same: http://symmetrymgmt.wpengine.com/blog/

    Any Ideas?

    Reply
    • >