Enabling Infinite Scroll for WordPress Theme [WordPress Tip]

By . in WordPress. Updated on .

In the Web, Infinite Scroll refers to the concept of loading the next content continuously as the users scrolling down the page. So long as there is still content available scrolling will keep showing the next line of content. You can find this kind of experience implemented in the Twitter and Facebook and many other sites.

If you have reason to implement the same experience on your website, and assuming that you built your website with WordPress, we will show you how to do enable infinite scrolling.

Installing Jetpack

Although there are several plugins and methods to achieve Infinte Scroll, I prefer using one from Jetpack. Jetpack is a plugin developed by Automattic — the guys behind WordPress. It contains a set of plugins to extend your blogging experience, including the Infinite Scroll.

This feature was first introduced in version 2.0. However, unless you are using TwentyTen, TwentyEleven, and TwentyTwelve – the default WordPress Theme, the experience might not immediately visible in your theme. Since every theme has a unique page structure, Jetpack needs a piece of your theme information for it to work.

First, make sure that Jetpack is installed and the Infinite Scroll is activated, as follows.

Adding Infinite Scroll Function

Similar to adding Post Thumbnail, Infinite Scroll is added with add_theme_support() function, and this is one of the reasons I prefer using Jetpack over the other options, as it is well integrated with the WordPress Core function.

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

First, we need to create a function for specifying the post template that will be used by Infinite Scroll to append the content. In this case, we will call content-post-standard.php for 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 content parameter in the above code specified the id that contains our posts. In this case, the Launch theme wraps the posts within id="primary".

While the render parameter specifies the template on which the content should be formatted. At this point, the effect should already be visible in your posts when you reload your website.

But, notice that the footer is now overlaying on your posts.

If this is something that does not sit well with your theme design, you can set the type parameter to click, so that the content should not be appended until the users click on a button.

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

Jetpack will append the button for users to click in order to show the next content.

Final Thought

This is merely a basic implementation of Jetpack Infinite Scroll. For most cases, this should sufficed. But, if you want to go more advanced, you can head over to the following page at Jetpack.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail