How to add Infinite Scroll to the Easy Posts element

Step 1

Go to this page to download the minified version of the JS file: https://infinite-scroll.com/
Upload and enqueue the JS file :

wp_enqueue_script( 'infinite-scroll-js', plugin_dir_url( __FILE__ ) . 'assets/js/infinite-scroll.pkgd.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

In the options of your Easy Posts element, be sure that you have the same settings for the Query / Count :

Step 3

Edit the Blog pages show at most in the Readings Settings :

Step 4

Just under your Easy Posts element, create a new button and add this class to it: .view-more-button

Step 5

In a Code Block, add this JS code :

(function($) {

    $('.oxy-posts').infiniteScroll({
        path: '.next',
        append: '.oxy-post',
        history: false,
        hideNav: '.oxy-easy-posts-pages',
        button: '.view-more-button',
        scrollThreshold: false,
    });

})(jQuery);

All the Easy Posts templates have the same structure, so this code will work for all of them. Except if you have created your own template or changed some existing classes.

Note

If you don't want to use a button, you can load the pages automatically while scrolling :

(function($) {

    $('.oxy-posts').infiniteScroll({
        path: '.next',
        append: '.oxy-post',
        history: false,
        hideNav: '.oxy-easy-posts-pages'
    });

})(jQuery);

For more information, don't forget to check the official website :

https://infinite-scroll.com/