How to Add Infinite Scrolling to Your WordPress Site

How to Add Infinite Scrolling to Your WordPress Site

Infinite scroll allows you automatically load new content into view when a reader approaches the bottom of the page.

Twitter is a great example of how this feature lets you minimize effort and distractions for your users, creating a seamless user experience.

Adding infinite scroll to WordPress is easy, especially if you have a “well-crafted” theme. If your theme isn’t well-crafted, enabling infinite scroll is more complicated but not impossible if you’re happy to get stuck into code.

In today’s Weekend WordPress project I’ll show you how to enable infinite scroll with the Jetpack plugin.

Infinite scroll
Add infinite scroll to your website with Jetpack.

Enable Infinite Scroll in Supported Themes

Infinite scroll is one of 33 modules included in Jetpack, but unlike other modules, infinite scroll only works with themes that support it.

If you have a “well-crafted” theme, like one of the default WordPress themes, just add the following code to your functions.php file:

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

Enable Infinite Scroll in Unsupported Themes

Developer Tyler Longren offers a neat solution for themes that aren’t as well crafted as Twenty Eleven or Twenty Twelve.

First, let’s activate infinite scroll. Add the following to your functions.php file:

1
2
3
4
5
6
7
8
function mytheme_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'mytheme_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'init', 'mytheme_infinite_scroll_init' );

Next, the render parameter specifies a function, in this case mytheme_infinite_scroll_init. This function uses the WordPress loop to load new posts for endless scrolling.

To put this all together, also add this snippet to our functions.php file:

1
2
3
function mytheme_infinite_scroll_render() {
get_template_part( 'loop' );
}

Infinite Scrolling is Still Not Working

If you can’t get infinite scrolling to work with the code above, don’t fret! It just means your theme hasn’t been coded like many newer themes to support infinite scrolling.

You may want to check out this solution by developer Samuel Wood, aka Otto, which explains how to separate your posts from the WordPress loop so you can enable infinite scrolling. It’s a solution that assumes you’re familiar with PHP, so only check it out if you’re comfortable with code.

Infinite Scroll is Working!

The code above is just a basic implementation of how to use Jetpack’s infinite scroll.

There are more options you can play around with that are described in details on the Jetpack website, such as Javascript events and posts per page.