Add Infinite Scroll to Your WordPress Theme Using Jetpack

Scroll Forever, Or Until There’s No More Posts

It’s no secret I’m a big fan of Jetpack. A single plugin adds so many options, not only for end users, but for we developers too! An excellent example would be infinite scroll.

Jetpack is a very popular plugin, so supporting Jetpack-specific features in your themes will end up just making your users happier. Kind of like an added bonus they didn’t realize they could use if they’re using your theme and Jetpack.

Infinite scroll is incredibly easy to add to “well-crafted” themes. The Twenty Twelve theme is a great example. Enabling infinite scroll is slightly more complicated with not-so-well-crafted themes, but it’s still pretty easy.

Enable Infinite Scroll in Well-Crafted Themes

Just add the following to your functions.php file.

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
) );

Enable Infinite Scroll in Not-So-Well-Crafted Themes

Activate Infinite Scroll

Add the following to the functions.php file for your theme.

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'rootdip_infinite_scroll_init' );

Setup Function for the Render Parameter

The render parameter specifies a function, in this case, mytheme_infinite_scroll_init. That function uses the WordPress loop to load additional posts to be shown for infinite scrolling.

To hook this all up, add the following to your functions.php file.

add_action( 'init', 'mytheme_infinite_scroll_init' );
function rootdip_infinite_scroll_render() {
    get_template_part( 'loop' );
}

In mytheme_infinite_scroll_init, the ‘loop’ parameter value defines the file where your wordpress loop sits. It should be very basic and only contain markup and PHP you want to be included with every post. Have a look at the loop.php file from Rootdip for an example.

That’s It

There’s more options that you can play with that are described on the Jetpack Infinite Scroll page, such as styling specifics and JavaScript events.

That’s really all there is to it. With the above code you’ll have a working Jetpack Infinite Scroll in your WordPress theme. Whether you’ve got a well-crafted theme or not, you should be able to add infinite scroll via Jetpack fairly easily.

I’d suggest adding an option to your theme options to allow users to enable or disable Infinite Scroll.