In one of my earlier tutorials, I showed how to set up a button to load more posts on the same page using Infinite Scroll in Genesis. In this article, we are going to take it one step further and use Isotope script (from the same author, Desandro aka Metafizzy) to set up the posts on content archives (Posts page and archives) in Genesis to appear in a Masonry layout. In addition to the initial appearance, we are going to load/append the next page of posts in the masonry layout when the Load more posts button is clicked using Infinite Scroll script.
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.
Step 1Upload imagesloaded.pkgd.min.js, isotope.pkgd.min.js and infinite-scroll.pkgd.min.js to child theme's js directory. Create a file named say, infinite-scroll-init.js in the same location having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.