This tutorial provides the steps to use Metafizzy/Desandro's Infinite Scroll Javascript in Genesis to replace the standard pagination on the Posts page and archives with a "Load more posts" button which when clicked loads the next set of posts below the existing ones and so on.
We are going to
- create a `content-archive.php` template part having the code to 1) add `content-archive` body class 2) wrap the posts in a custom container 3) add Load more posts button below the posts 4) ensure that the button does not appear when not needed 4) load Infinite Scroll js and initialize it on the posts container
- call the template part from `home.php` and `archive.php`
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme
Step 1
Upload 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 the following:
I’m trying to make this work with >
https://sridharkatakam.com/posts-grid-genesis-using-css-grid/
Almost have it, but I can’t get they images to display properly on the load.
They load… but they come in a height:0px;
Therefor they don’t display.
Any ideas?
Hey Sridhar, There seems to be an issue with images loading on iOS, both iPad and iPhone when the “load more” button is clicked. The posts load, but the images are missing. I tested this in Chrome and Safari on both iPhone and iPad. Any ideas? Thank you in advance.