Quick Way to Add Infinite Scroll

I had a client who wanted infinite scroll for the articles on their site. Found a few posts related to Enfold and infinite scroll but nothing that was a concrete answer for what I wanted to do — using the Avia Template Builder I created a section page (it’s for a magazine) that has a blog posts content block at the bottom. I wanted that block to scroll. Turned out to be fairly simple to implement, posting this here in case it helps others.

In your child theme’s — you are using one, right ;) — functions.php file add the following:

/** 
 *  Add infinite scroll to section pages like Eat / Drink
 *  Uses https://github.com/pklauzinski/jscroll
 */

add_action( 'wp_enqueue_scripts', 'load_jscroll' );

function load_jscroll(){
    wp_enqueue_script('jscroll', get_stylesheet_directory_uri().'/js/jquery.jscroll.min.js', array( 'jquery')  );
}

function infinite_scroll() {
    global $avia_config;
        echo '<script type="text/javascript">
            jQuery( ".content" ).jscroll( {
            nextSelector: "span.current + a",
            contentSelector: ".article-grid",
            autoTrigger: true
        } )
        </script>';
}
add_action( 'wp_footer', 'infinite_scroll' );

On your page insert your blog posts element with pagination enabled. I gave mine a custom CSS class of article-grid to make it easy to target that portion of the page. In the code above you see the contentSelector parameter — that’s an optional parameter that lets you select only a portion of a page to be appended by infinite scroll. Since my page has lots of items at the top that I don’t want being reloaded as I scroll I use the custom css class to only grab the next batch of articles.

When you get to the last batch of articles you would normally see the pagination, which I didn’t want. A quick css rule takes care of that:

/** hide navigation since we're using jQuery infinite scroll */
nav.pagination{
    display:none;
}

This is a pretty bare bones example. I’m using infinite scroll everywhere so I didn’t limit this to specific pages or content types (which you could easily do by wrapping the infinite_scroll() function in some conditional checks. Ex: is_frontpage() if you only wanted this to apply to the homepage of your site.

You can grab the js file here: github link as well as see the other options available to you.

Hopefully that helps someone else get going. Works perfectly for our needs.