Enabling Infinite Scroll for WordPress Themes

On the web, Infinite Scroll is a technique that loads content continuously as users scroll down a page. As long as there is more content, it will keep appearing. This experience is common on platforms like Twitter, Facebook, and many other sites.

If you want to create this feature on your own website, and you are using WordPress, we’ll show you how to enable infinite scrolling.

Installing Jetpack

While there are several plugins and methods to achieve Infinite Scroll, I prefer using the one from Jetpack. Jetpack is a plugin developed by Automattic – the team behind WordPress. It includes a set of plugins to extend your blogging experience, including Infinite Scroll.

This feature was introduced in version 2.0. However, unless you’re using TwentyTen, TwentyEleven, or TwentyTwelve – the default WordPress Themes – the experience may not immediately work on your theme. Since each theme has a unique page structure, Jetpack needs information about your theme to function correctly.

Ensure Jetpack is installed and Infinite Scroll is activated as follows:

Adding Infinite Scroll Function

Similar to adding Post Thumbnails, Infinite Scroll is added using the add_theme_support() function. This is one reason I prefer Jetpack over other options, as it integrates smoothly with WordPress’s core functions.

In this example, I’m using the free WordPress Theme from ThemeZilla, Launch.

First, we need to create a function to specify the post template used by Infinite Scroll to append content. In this case, we use content-post-standard.php as the template.

 function zilla_infinite_scroll_render() {
 get_template_part('content-post', 'standard');
 }
 

Then, we can enable Infinite Scroll this way:

 add_theme_support('infinite-scroll', array(
 'container' => 'primary',
 'render' => 'zilla_infinite_scroll_render',
 ));
 

The container parameter specifies the ID that contains the posts. In this case, the Launch theme wraps its posts in id="primary".

The render parameter specifies the template format for the content. At this point, the effect should be visible when you reload your website.

However, notice that the footer now overlays the posts.

If this doesn’t fit your theme design, you can set the type parameter to click, so content only appends when users click a button.

 add_theme_support('infinite-scroll', array(
 'type' => 'click',
 'container' => 'primary',
 'render' => 'zilla_infinite_scroll_render',
 ));
 

Jetpack will add the button for users to click to show the next content.

Final Thought

This is a basic implementation of Jetpack’s Infinite Scroll. For most cases, this should suffice. However, if you want more advanced options, you can visit this page at Jetpack for additional resources.

Note: This post was first published on August 5, 2013.