Masonry and Infinite scroll with Genesis

Reader Interactions


  1. Brad Dalton says

    Hello frank

    I saw you tweeting about this several weeks ago so i assume you have put in alot of time and effort to work out this solution.

    I’m working on something similar and also filtering the post class but might build a new loop rather than use the custom loop. Don’t think i’ll add the infinite scroll though.

    Demo looks great.

    Good luck with sales of your theme!

    • frank says

      Hi Brad,

      Thanks! It took some time to get everything to work. The documentation of both scripts helped me a lot. After i’ve got everything into the theme, the tutorial was quickly written.

      I’m curious about your solution.


  2. Brad Dalton says

    Hi Frank

    I published a post about it today. Works perfectly when using Chrome but slight problem in Safari. Didn’t add CSS for Media Queries but looks like a bit of work to get the responsiveness perfected. I didn’t use columnWidth: either. Didn’t use a custom loop or filter the post class. Just used CSS for the width. I think it will need images loaded if i add featured images so still some work needed for that. Looking forward to seeing your theme when its finished.

  3. satrap says

    Thanks for this Frank.

    Is there anyway to display the posts in a brick style–Have one post display full width, then two posts under it each covering 50% of the width, and repeating this set up over and over?

    Like so:

    first post full width
    2nd post 3rd post
    4th post full width
    5th post 6th posts]
    and so on…

    I assume it has a lot to do with the css, but I am not that advanced. Thanks.

    • frank says

      Hi Satrap,

      I think that can be done with some extra CSS. You can use the CSS pseudo-selector nth-child to achieve the result you want. With this pseudo-selector you can for example every second and third brick.

      For more information have a look at:


      • Satrap says

        Thanks very much Frank.

        Yeah, that’s a little over my head. And since I need this quickly, I am going to have to hire a developer to do it.

        Meanwhile, thanks for the link. It will be a great resource for me to start learning about it little by little. Thanks.

  4. Dustin says

    Just curious. If you did not want to use infinite scroll and just wanted to use pagination how would you accomplish that? Thanks for the article!

    • Frank Schrijvers says

      Dequeue the infinite scroll script. And change the css so the page navigation is visible. Without testing I think that’s all.

      • Roberto says

        Great work! it was very helpful. I’m interested in use a paginator too, and I commented the infinite scroll script and I changed the css, but if I click “next page” it send me to the correct page “../page/2/” but always show me the content of the first one.

        I tried commented too the line:

        $paged = get_query_var( ‘paged’ ) ? get_query_var( ‘paged’ ) : 1;


        ‘paged’ => $paged,

        But it’s still don’t working. I’m going to keep trying, but maybe you could have an idea of what happen. Once again, thank you for the post.

        • Frank Schrijvers says

          Hi Roberto, I’ve tried this is a local environment and it work when I disable the ‘custom_infinite_scroll_js’ function. You have to leave te $paged variable as it is. So I’m not sure why it does not work for you.

          • Roberto says

            Thank you for your answer. I just figured out that my problem only happens when I select the masonry page as “front-page” in the wordpress settings, so maybe could be a configuration problem of my site.

          • Roberto says

            Hi, I found a solution. This is a general problem of wordpress, it happened me even with other blog-pages and I’m not very sure why, but it’s related to the use of ‘paged’ and ‘page’ in the loop.

            By accident I changed the script to this:
            $paged = get_query_var( ‘page’ ) ? get_query_var( ‘page’ ) : 1;

            And it’s works 🙂

            So, I search an explanation of what I do and I found this (in the static front page section:

            Note: this is only necessary if the blog-page is used as static page, if not with ‘pageg’ works fine.

  5. Dustin W. Stout says

    Thanks so much for this tutorial! I’ve been wanting to try this out for a while but hadn’t found a good walkthrough until now. However, despite following everything perfectly it doesn’t seem to want to work on the Altitude child theme. Worked perfectly on the Genesis Sample child theme, so I’m guessing it’s some sort of Javascript conflict. Not sure yet– Javascript and PHP aren’t my wheelhouse.

  6. subversiv says

    Hi, Great Tut. How hard would it be to put an overlay over the image and to put the title below. Thanks

    • Frank Schrijvers says

      If you’re familiar with the Genesis hooks and CSS this is not that hard. I guess you have to remove the content of the posts on the blog page with the Genesis Hooks (remove_action).

      For the overlay add some html (div or span with a class) above the featured image (this can be done with the add_action). This div or span you can style as a overlay.

  7. Dianne says

    Hi Frank,

    I really admire this tutorial it really helps me alot however I couldn’t get the height of the #container to work when I load the page. I used the manual trigger but when I load the page, the height doesn’t adjust. can you help me?

    • Frank Schrijvers says

      The height is set by the script. So my best guess is that you have already set the height of the #container in your style.css.

  8. Julia says

    hello! thank you for this.

    I do have a question though.. how do i go about creating an infinite scrolling masonry on an inner page, not the front page.. is it somewhat the same as what you have detailed here?


    • Julia says

      oh nevermind! sorry i missed the part where you said i could use it as a template on any page. way cool i will try this now! 😀

  9. Micki says

    Will this work for woocommerce using Genesis connect for woocommerce plugin? Thanks

  10. Brandon says

    This is a great tutorial, and I’ve been working on something to have some bricks 2 column, and maybe even 3 column. The problem is the bricks all then show left: 0 and stack rather than fill in the space. Any thoughts on a fix?

    • Frank Schrijvers says

      Hi Brandon,

      Not really, it could be a CSS or a Javascript issue. Did you enqueued every script? And can you access the script in the source code? If every thing is set, I guess it’s a CSS issue.

      • Brandon says

        I think it might be best to set up a “staging/dev” site so I can show you. I went a lot off your tutorial, and I believe everything is queued. When I open Dev Console I’m not seeing a JavaScript error thrown. Once I get the staging/dev site set so I can give an example, would you be willing to take a look and offering up a suggestion?

  11. Doris says

    Hi, I’m trying to follow along with this and think I have a general idea of how to make it work, so please bear with me since I’m new to developing, but where does the “masonry-scroll.php” file need to go? Do I just upload it into the theme’s folder without a subdirectory? I appreciate any input! Thank you!!!

  12. Candiss says

    Awesome tutorial. I have the Plastic theme and love it.

    How would you add a filter section at the top of the grid. If someone wants to see just things in the photography category or illustration category, how can I add this feature? Thanks.

  13. Candiss says

    Great link. I also discovered wpclips. I will try this tomorrow and see how it goes. Thanks for the great tutorial.

    • Frank Schrijvers says

      Hey Thomas,

      If I look in the console I see you’ve got some 404 error’s on your site. It fails to load the jQuery files, so I think something is wrong with the path or you didn’t include the masonry-isotope, init-masonry and infinitescroll files?