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