In the previous post, we introduced you to Jetpack 2.0, and it’s new features, such as Post by Email, Photon (an advanced image loading service), Easy integration with major social networks etc, but the one which interested me the most is the Infinite Scroll feature.

What is Infinite Scroll?

Infinite Scroll is a feature similar to the one, which a lot of major websites use these days, the most prominent examples being the Facebook and Twitter timeline feature. What it does is, it automatically loads more data as soon as you reach the bottom of the page, thus, allowing you to scroll more-and-more, until the end of the data is reached. This eliminates the need to manually navigate to other pages, in order to view more content. In other words, you could say goodbye to pagination on your WordPress blog, after implementing this feature.

How to Activate Infinite Scroll?

Infinite Scroll module is a part of Jetpack 2.0, so you need to make sure that Jetpack 2.0 plugin is already installed and activated on your WordPress installation. If you already have a previous version of Jetpack installed, you need to upgrade it to version 2.0 using WordPress automatic update feature, before we proceed further.

After you’ve installed and activated Jetpack 2.0, click on the Jetpack tab (usually just under the Dashboard tab on the left), from the WordPress back-end. Make sure the Jetpack plugin is connected to your WordPress.com account. If you don’t have a WordPress.com account, you need to create one for FREE, and link it to the Jetpack plugin on your WordPress installation, before you could use it, and activate it’s features. To verify if it’s connected to WordPress.com account, the top-right corner of your screen (on the “Jetpack” page) should look something like this.

Jetpack WordPress Connect

Now, look for the Infinite Scroll section on that page, and click on the “Activate” button. That’s it! The Infinite Scroll module is now active on your WordPress site.

Infinite Scroll Activate

Manual Configuration of Infinite Scroll module

Sometimes, just “Activating” the Infinite Scroll module isn’t enough, and it may not work properly on your theme, because this module was designed on the basis of the default WordPress Theme structure, with similar ID and Class name conventions. Some themes might vary a bit from the default structure, due to which it may not work optimally. Hence, it’s easier to implement this on default WordPress themes, such as Twenty TwelveTwenty Eleven, or Twenty Ten etc because they follow the default theme structure.

So, if you’re not satisfied with the default configuration of this module, you may manually configure it for your theme specifically. This requires playing with critical theme files, so it’s recommended to ALWAYS keep a backup of your files and data, in-case if things don’t go as planned.

To manually configure the Infinite Scroll module, go to Appearance >> Editor, and open the “Theme Functions” file (usually functions.php) of your active theme. Now, in that file, you need to define an extra function, which would make a call to the pre-defined add_theme_support() function to add custom configuration settings to the Infinite Scroll module. Append the following code at the end of functions.php file of your theme, and we’ll go through the configuration keys in a moment.

/**
* Add theme support for infinite scroll
*/

function custom_theme_infinite_scroll_init() {

add_theme_support( 'infinite-scroll', array(

'type' => 'scroll',

'container' => 'content',

'posts_per_page' => 5,

) );

}
add_action( 'after_setup_theme', 'custom_theme_infinite_scroll_init' );

Now, in the above code, we defined a new function custom_theme_infinite_scroll_init(), but you could give it any name, as long as it’s unique and doesn’t collide with any other theme function, or pre-defined core function. The add_theme_support() function accepts two arguments here – module name (i.e. infinite-scroll), and an associative array (key=>value pairs) of configuration settings. We’ve used three keys here i.e. typecontainer, and posts_per_page. We’ll go through them briefly, in the next section. In the end, the add_action() function is called to attach the custom-defined function to the ‘after_setup_theme’ hook to make sure the settings are loaded every time a WordPress page is loaded. Save the changes to your theme file, and the configuration part is done.

Configuration Keys

There are quite a few configuration keys available to manually setup the Infinite Scroll module. You could refer to the official Infinite Scroll documentation page to learn more about more these configuration keys, and how to use them. The keys which I used in the above code are:

  • type – With this key, you could set the type of scrolling method you want i.e. “scroll” or “click”. If it’s set to “scroll”, the new content would load automatically as soon as you reach the bottom of the page. On the other hand, in case if “type” is set to “click”, every time you reach the bottom of the page, a button “Load more posts” would appear, clicking on which would load more posts. Default: “scroll”
  • container  – It accepts the ID of the immediate parent of all the posts in your theme. To find out the ID of the parent tag, if you’re using an HTML5 theme, look into the source code of the blog-page of your site, and find the first appearance of the <article> tag. The ID of it’s immediate parent tag is the value of the container here. In case of themes using an older version of HTML, the <div> tag would be there, instead of the <article> tag, so you need to carefully find out the <div> tag of the complete post first, and then find it’s parent’s ID. Default: “content”

    Parent ID of Posts

  • posts_per_page – With this key, you could set the number of items to load in one go, i.e. Suppose if you want your blog to load 5 posts at a time, after reaching the bottom of your blog page, you could use this key to define the limit. Default: false
The configuration part might require tweaking, and playing with various keys a few times, but in the end, it’s a kind of feature, which would add something “special” to your WordPress blog. Let us know if you face any issues, while setting it up. We’re happy to help.
36 thoughts on “How to Setup Infinite Scroll in WordPress using Jetpack 2.0”
  1. Hello, I have added the following to my functions.php

    add_theme_support( 'infinite-scroll', array(
    'container' => 'middle_single',
    'footer' => 'footer-bottom',
    ) );

    However it’s not working Nothing new happens. It’s like the infinite scroll is deactivated, but it’s ON in the settings. I have also tried with your code with the ustom_theme_infinite_scroll_init(), but still nothing changes.

    I can’t figure out what’s wrong. If you can take a look I would post here my loop.
    Thanks

    1. I just looked into your blog, and it seems “middle_single” is a Class name, but the ‘container’ key requires an ID.

      You may have to specifically define an ID in your theme files for the tag. Or, you may try it on another theme. Let me know if it helps.

      1. I’ve did it on my test site .net (glamourina.net), but still nothing even though it is a div.

        However the first time I activated it and I scrolled down the blog, I could see something round “loading” something, near the page numbers. However it didn’t load up any new post.

        hmmm…Another theme is not an option 🙁 what do you suggest?

        1. That’s progress. You can already see the new transparent floating footer in place. I noticed the “loading” message as well. Could you please paste the complete code you pasted in your functions.php (Not the complete file, just the code required for this module).

  2. The code looks fine to me. Also, as it’s loading the footer section properly, the module is being hooked, so it could be a theme problem. As this is a new feature in Jetpack, there could be some issues, using this module with some themes, so I think it’d be better for you to post a query on their official support forum.

      1. That’s the only place I look for help, whenever needed.

        Sometimes, it takes a while for people to reply. Also, because this feature is new, and not many have implemented it on their sites, it could be a bit difficult in the beginning. But eventually, someone will reply.

        1. According to the change log of the plugin, the first version was released sometime in 2008… I wouldn’t call that new.

          http://wordpress.org/extend/plugins/infinite-scroll/changelog/

          I’ve spent hours searching online and still don’t understand how to implement this into my website. Most tutorials I’ve found just explain how to install the plugin, not helpful. I also found a few articles with code snippets, but then they don’t explain where or how to place them so I’m still stuck.

          1. Hi Aaron,

            It seems you are mistaken. This tutorial is about a new module in Jetpack plugin and not about the infinite scroll plugin. Both are different plugins.

    1. @Fashion Blogger….I think there could another issue. http://jetpack.me/support/infinite-scroll/

      Try using the ‘render’ key, as mentioned in the above documentation page. It could be the reason why posts on your blog aren’t rendering. The plugin uses the new style of rendering content, but for legacy theme, ‘render’ key is required.

      According to that, you need to place all your loop code inside a function, and provide that function name as a ‘value’ to the ‘render’ key. You may give this a try.

        1. Hi,

          I think you’ve got it wrong. The code inside the content.php should only contain, what’s currently inside your loop i.e. inside the “while (have_posts()) : the_post();” in your blog-layout.php file.

          So, you need to replace the code inside content.php with your loop code, and use the get_template_part() function inside the blog-layout.php file instead.

          1. Excellent!!! It works!!! WOW!! Take a look at my site .net :)))

            What do you think… what should I do in order to have the footer always visible even though new posts are loaded?

            I have tried to add 'footer' => 'footer-bottom', but it doesn’t help. Nothing changes.

  3. @Fashion Blogger…That looks great. The ‘footer’ key adds a new floating bar attached to the bottom of your site, which I can already see in-place.

    However, if you want your old footer to be visible, you may have to use CSS “position: fixed” property to stick it manually.

    Make sure you remove the footer already placed by Infinite-scroll module.

    1. hmm, I added position:fixed; to my #footer-bottom, but now the footer completely disappeared. And adding or removing 'footer' => 'footer-bottom' from the add_theme_support function doesn’t change anything.

      1. The problem with the footer section of your blog is, it’s too big because of the widgets. And so, if you float the entire footer section, it’d either display your posts, or your footer widgets. You could, however, float the copyright message by applying the position: fixed on #copyright. Also, it requires specifying position (bottom, left property), and z-index. Here’s a sample:


        #copyright {
        background: white;
        z-index: 999;
        left: 10%;
        bottom: 0px;
        position: fixed;
        }

  4. Oh no 🙁 I’ve just noticed that after these changes all the sub pages, categories, tag pages, etc. are now broken 🙁

    I don’t know why… maybe because they also use the middle_single 🙁

    This is a piece of page.php

    1. Yes, you may have to make similar changes in all your template files (containing loop code) for it to work properly.

      1. Eh, I’m getting crazy to make it work on the subpages, eg. page.php.
        I can’t understand why the homepage (blog-layout.php) works fine if I put:

        and the loop part is in content.php.

        But it doesn’t work if I change ‘content’ to ‘pagecontent’ and rename the content.php to pagecontent.php.

        It looks like that only the word content works fine 🙁

        So I have no idea how to make it work on page.php … hmm

          1. Thank you 🙂
            I was able to make it work. It’s a pain that we need to edit so many template files. Cut code from original files and create new ones :(( But it works.

            Now the problems are two. However the most important one is that module infinite-scroll adds by default a white footer. Even though we have “false” in the functions.php, this footer doesn’t disappear.

          2. Hi,

            I don’t see any footer inserted by Infinite-scroll module, anymore. If it appears again, you may try applying CSS “display: none” property on the floating-footer container, as a temporary solution for now.

  5. I’m not sure where to edit those configuration keys. Is there somewhere in the wordpress dashboard or do I have to edit the functions.php file?

    Also, I’m used to posts_per_page being set within wordpress so I can change it. Is there a way to do this or does infinite scroll require this to be defined in the code?

    1. I’m trying to implement infinite scroll into my current wordpress template, having it replace the current pagination. Help would be appreciated

      1. Hi Aaron,

        If the Infinite-Scroll module doesn’t work with the default settings (after activating it), then you may have to make modifications in your theme’s functions.php file.

        Regarding the “posts_per_page” key, it’s only necessary to define it, if you want to override the default value of 7 posts at a time (with the “scroll” method), or the value set at Settings >> Reading (with “click” type).

        For your blog, I think it should work fine if you append the following code to your functions.php file:


        function custom_theme_infinite_scroll_init() {
        add_theme_support( 'infinite-scroll', array(
        'type' => 'scroll',
        'container' => 'content',
        'footer' => 'false',
        ) );
        }
        add_action( 'after_setup_theme', 'custom_theme_infinite_scroll_init' );

        1. I think I’ve managed to get it to work, using the Infinity Scroll WordPress Plugin. Now I’m trying to figure out how to get the loading image to be in the center instead of on the left.

  6. Hey! So I’m trying to implement this on our blog, but for some reason, it seems to only half load. Any suggestions?

    1. Hi,

      Sorry, but could you please provide a little more detail as to what exactly is working and what isn’t (as you’re saying it only half loads?) Also, pasting the code, you’ve appended in your functions.php file, here would be great.

  7. I have tried implementing the code in your post into my functions.php. The sticky footer works, but when I scroll down, there’s the loading circle, but it doesn’t load any posts!

    Here’s my code:

    `function custom_theme_infinite_scroll_init() {

    add_theme_support( ‘infinite-scroll’, array(

    ‘type’ => ‘scroll’,
    ‘container’ => ‘primary’,
    ‘footer’ => ‘footer’,
    ‘posts_per_page’ => 5,
    ‘render’ => false,
    ) );
    }
    add_action( ‘after_setup_theme’, ‘custom_theme_infinite_scroll_init’ );`

  8. I really need Infinite Scroll on my website but I am not able to get it work at all.

    I added the following code to no avail:

    /*
    *Add theme support for Infinite Scroll (JetPack)
    */

    function custom_theme_infinite_scroll_init() {

    add_theme_support( ‘infinite-scroll’, array (

    ‘type’ => ‘scroll’,

    ‘container’ => ‘content’,

    ‘footer’ => ‘footer’,

    ‘wrapper’ => false,

    ‘render’ => false,

    ‘posts_per_page’ => 5,

    ) );
    }
    add_action( ‘after_setup_theme’, ‘custom_theme_infinite_scroll_init’
    );

    I was able to “activate” the Infinite Scroll using JetPack and set the “Blog Pages show at most” to “5” but nothing happens. It still loads all the posts and there is no Infinite Scroll.

    Please help.

  9. Nothing happens even after adding the code to the function.php

    function custom_theme_infinite_scroll_init() {
    add_theme_support( ‘infinite-scroll’, array(
    ‘type’ => ‘scroll’,
    ‘container’ => ‘content’,
    ‘footer’ => ‘false’,
    ) );
    }
    add_action( ‘after_setup_theme’, ‘custom_theme_infinite_scroll_init’ );

  10. I put the code for configuration in my functions.php and then, I am stuck. Activated it in Jetpack module. But what to do further. For the time being I reverted back to original code.
    Please help me. Using codilight theme by UXDE.net

  11. when iam using jetpack infinity scroll, after 7 posts it is scrolling ( at the time of scrolling it is creatung a new page) when we check that page with broken link checker tools it is creating a broken link.
    how to solve this problem

Leave a Reply

Your email address will not be published. Required fields are marked *