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