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:

Jetpack Infinite Scroll activated

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".

Primary container for posts

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

Loading new content

However, notice that the footer now overlays the posts.

Footer overlaying 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.

Button for loading more 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.