Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Infinite Scroll to your WordPress Blog

Last updated on by
Follow WPBeginner on YouTube
How to Add Infinite Scroll to your WordPress Blog

While talking with Matt Mullenweg at WordCamp Atlanta, he told us that they were adding infinite scroll to some VIP Partner websites on WordPress.com because the results were staggering. He suggested that we should try adding that on our List25 project. Well, after doing a little bit of research, we found out that it was quite easy to implement it. It took us less than 1 minute to install Infinite Scroll in WordPress. In this article, we will show you how you too can install Infinite Scroll in WordPress.

Update: We have taken this plugin off our site. During high traffic times, this caused our servers to crash. Anytime a lot of users started doing infinite scroll, we noticed our memory was exhausted which caused the server to be unresponsive. This would probably work great for smaller sites.

What is Infinite Scroll?

Traditionally, the user would have to click on next page or previous page to visit older post content. However, recently there is a new trend started by popular sites (such as facebook and twitter) in which they automatically load the next page content once the user hits the bottom of the post. This technique has proven to show an increase in time spent on page by the user because the new content loads automatically.

If you use facebook, or twitter, then you have seen the live preview of this already. However, if you want to see how this looks on a WordPress site, then check out List25.

How to Add Infinite Scroll in WordPress

First thing you need to do is install and activate the Infinite Scroll plugin.

Upon activation, a new menu option will be added under your settings tab called Infinite Scroll. On almost 90% of the blog sites, this should work without changing a single setting. However, if you have a relatively custom designed blog, then you will need to adjust the “Selectors”. Go the plugin’s setting page and click on the selectors tab.

Infinite Scrolls Selectors

The plugin will pre-fill the selectors based on the standards. The content selector would be the div that wraps your content on the main page. In our theme, it was #content. This is very standard and most theme author’s use it. We did not have to change this part. Posts Selector by default was #content div.post which is standard on most blog style sites however, we wrap our posts with an extra div called .post-container. This allows us to split our thumbnail and the site content in two separate grids. When we first installed the plugin, the plugin worked however it wasn’t loading our thumbnails. It turned out the reason it wasn’t loading thumbnails was that the post selector was not what we wanted.

For Navigation selector and Next Page selector, you most likely will not have to change it because those are very standard parameters and almost 99% of the themes use it (or so we hope).

In the General options screen, you can customize the loading image, loading text, the end text etc.

This is a very cool plugin that we just installed. If you are looking to add infinite scroll to your site, then this plugin is for you.

It is important to note that this only works on your blog’s homepage. It will not work on category/tag archive pages.

Get Infinite Scroll plugin


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • sujitha

    I am using Mystile theme in my woocommerce site. I used infinite scroller plugin. But not able to work . Not working in product listing page. How to list . please help

    • kapil

      Same here. it’s not working on my custom theme. :(

  • Benjamin Robinson

    Thanks for recommending this plugin, it works great! One thing that I thought could have been clearer in their documentation for it was what format exactly was required for the selectors. I generally build my themes from scratch, so I found it frustrating that they (the plugin authors) kind of just say “it works with lots of themes, you probably won’t have to change yours,” because if you’re working with your own theme, or a theme that doesn’t necessarily have post navigation links set up by default, it’s annoying not to have them specify exactly what is required.

    The list of different containers by theme on github is kind of ridiculous… I feel like everybody is barking up the wrong tree trying to catalog all of the possible themes you could use this with, that’s nuts, because it’s not that complicated to figure it out with “inspect element.” I thought I’d specify more clearly here what they mean by the selectors, and what you might have to change about your theme to make it work:

    Content Selector: The main wrapper of the post content. The div or section tag that wraps, but is outside the primary loop of posts being displayed. It will be wrapping around (outside) the PHP that looks something like “while(have_posts()) : the_post(); … endwhile;” It is standard for it to be given the ID “#content,” but by no means is that a rule. Every theme author has a slightly different approach, especially non-premium themes.

    Navigation Selector: A div (or other container) wrapped around the function “posts_nav_link();” — this is the part I felt they should have specified better. If your theme is not using this function to display Next/Previous posts links, you’ll need to add this function in where you want the link to appear. The actual selector should not be the link generated, but the container (probably a div), in some cases give the ID “#navigation.”

    Next Selector: The actual “next” link generated by the (above) “posts_nav_link();” function. Basically, you can probably find this through the container ID/class and just add “a” for link. If the ID of the container is “#navigation,” the link is specified “#navigation a”

    Item Selector: I kind of think this one would be more logical as the second selector listed. This is the class (at least it should be a class) of the individual post container. This one should be inside the main loop. (As in the first one — while(have_posts()) : the_post() … endwhile;) So this one, instead of being outside the while loop, will be inside, between while and endwhile. Often, the class name is “.entry” — but be careful to make sure you specific the type of tag, too. Usually, the container is a “div,” but with HTML5, the container might logically be an “article”, so when listing the item selector, it should be “div.entry” or “article.entry”

    One more important note: The navigation links should be outside of the Content Selector container. If they are inside of it, new posts will show up below the “next” link when loaded with infinite scroll. I may write my own post about this at keokee.com/blog. Feel free to get in touch with questions!

    • Brad Cedergren

      Benjamin,

      Thanks for clarifying this, unfortunately, I am still not sure how to implement this plugin in a custom theme. Is there any way that you could post a sample code snippet that could clarify this a little more?

      Thanks!

  • Hernan

    My main container is a ul layer and my posts are li layers. However, the CSS of the li layer depends on this call:

    which is done at the beginning of each while loop iteration, such that:
    <li class="post post- clearfix”>
    However, the plugin disregards the php call, and gives the posts that show up the wrong formatting. I had the same issue with Auttomatic’s jetpack. Is there a way to fix this or has somebody had this issue? Any help is welcome!

    • Hernan

      Actually, I made a mistake. The infinite-scroll plugin does load right. However, the initial posts on my blog page have a jQuery function that changes the color of some images if the uses hovers over them.

      The new posts loaded by the plugin do not follow the jQuery function anymore.

      • Michal Kleiner

        In older versions of jQuery it was the live plugin to be used for dynamically loaded content. Try to use .on binding with new jQuery which should work well.

  • http://www.wpbeginner.com Editorial Staff

    We are on a dedicated server with 8GB Ram, Intel Xeon 3470+ Quad Core Processor, and 10TB Bandwidth. WPBeginner and List25 both are hosted there.

  • rekordyguinessa

    I have a problem with this plugin. When I’m log in as administrator, the plugin works, but when I’m not log in then it doesn’t. Does anybody has the same situation?

    • http://www.wpbeginner.com Editorial Staff

      Are you sure that you have the settings for all users and not just administrators?

    • http://www.wpbeginner.com/ wpbeginner

       @rekordyguinessa There is a setting that you have to change to make sure that it works for everyone.

      • Mashiur Rahman

        Where is that settings… I could not find it.

  • ChampionRoper

    I would love to implement this plugin and have been trying for a few hours. It works great on every device, but I run into an issue on Android. Every time it shows, “loading more posts”, it send me back up to the top of the page once posts are loaded. I, by no means, am excellent at JS so I do not know of a hack to keep me on the div once posts are loaded. Any ideas?

  • http://raanan.com/ Raanan

    Hello, Raanan here at Automattic / WordPress.com. We have a massive VIP on WordPress.com running this now, so we know it scales. Could be some kind of configuration or other issue om your server that we’d be happy to help with. Feel free to drop me a note here: http://raanan.com/contact-me/

  • tharitm

    @retlkpr It did work. First you need to go to preset manager and then update db. And you’ll need to turn it on from the main page as well.

  • http://www.lighthousememories.ca/ retlkpr

    Doesn’t seem to be working on WP 2011 Theme. I tried many suggested solutions but no luck.

  • JaredHeinrichs

    Will this plugin effect SEO at all?

    • http://www.wpbeginner.com/ wpbeginner

      @JaredHeinrichs No it does not, because the search engines / non-javascript users see the normal site.

  • http://voodoopress.com/ Rev. Voodoo

    Well ain’t that a cool trick! It’s nice that you can find the selectors in the settings for twentyeleven, I set it up on VoodooPress to check it out.