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.
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.
I realize this is an old post but the last paragraph is wrong. Infinite scroll works fine on my archive pages.
“It is important to note that this only works on your blog’s homepage. It will not work on category/tag archive pages.”
No idea if that held true in 2012 but for those reading this today it is incorrect.
What is the final Input for infinite scroll for post…
my theme does not load the js file of this plugin. Any way to fix it?
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
Same here. it’s not working on my custom theme.
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!
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!
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!
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.
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.
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.
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?
Are you sure that you have the settings for all users and not just administrators?
@rekordyguinessa There is a setting that you have to change to make sure that it works for everyone.
Where is that settings… I could not find it.
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?
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/
@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.
Doesn’t seem to be working on WP 2011 Theme. I tried many suggested solutions but no luck.
Will this plugin effect SEO at all?
@JaredHeinrichs No it does not, because the search engines / non-javascript users see the normal site.
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.