Add Infinite Scroll to WordPress via a Plugin called Ajax Load More

Is there anything more addictive than the Facebook News Feed. I mean, I'm sitting here trying to write this post, but that addictive little bugger just keeps scrolling…and scrolling…and scrolling. Now, it's 30 minutes later and I still haven't started.

That's (partially) because Facebook uses something called infinite scroll, AKA endless scroll, for the News Feed. Rather than having to click a "Read more" or "Next" button, the content just keeps loading as you scroll down the page.

And guess what? You can get that same effect for your WordPress blog by adding infinite scroll.

In this post, I'll discuss some of the pros and cons of infinite scroll and then I'll show you how to set up infinite scroll for WordPress using a plugin called Ajax Load More.

Benefits of WordPress Infinite Scroll

Plenty of big brands have experimented with infinite scroll, which gives us the benefit of being able to look at their data. Here are some of the benefits sites experienced when adding infinite scroll:

More Pageviews – NBC News found that desktop users visited 20% more pages per visit with infinite scroll. Similarly, Time also found that 21% of users moved onto a second piece of content with infinite scroll.

Lower Bounce Rate – Time also lowered their bounce rate by 15% when they moved to infinite scroll.

User Experience Benefits – Caveat, not everyone agrees. BUT, some experts have stated that infinite scroll boosts UX by offering users more content exposure, requiring users to click less, and just generally offering a better mobile experience.

I can't say for certain you'll get the same results as the big brands, but if you have lots of blog posts of equal importance, infinite scroll is definitely a good option.

Most social networks rely on infinite scroll for this reason – the tweets and posts on them are all of equal weight.

Additionally, some major news organizations, most recently Slate, have latched onto the infinite scroll trend.

Negatives of WordPress Infinite Scroll

It's not all roses with infinite scroll. There are definitely some potential negatives you want to consider:

No Footer – This is a big one – you lose out on your footer when you move to infinite scroll. Definitely not a deal-breaker, but you'll want to consider this if you use your footer for important information. E.g. if you use your footer to display affiliate disclosures, you will need to find a new way to display that information.

Bouncing scroll bar is bad user experience – Because the site keeps loading, users' scroll bars will keep jumping back and forth. This can make some users feel like they're being tricked and lead to a negative user experience.

No feeling of "completion" – No, this isn't innuendo. Nielsen researchers found that users actually like the sense of "completion" they feel when they reach the end of the page. Infinite scroll makes this feeling impossible.

Additionally, in the "Benefits" section I said infinite scroll is good when you have many blog posts of equal importance. Well, the opposite is true as well:

If your blog posts are of unequal importance (e.g. some are massive 2,000 word guides and some are 300 word quick posts), then infinite scroll probably isn't a good idea for your site.

How to Add Infinite Scroll to WordPress

To add infinite scroll to WordPress, you can use a free plugin called Ajax Load More. The plugin includes tons of premium add-ons that can boost its functionality, but the free version should be enough to add simple infinite scroll to your site.

The basic plugin works by generating a shortcode that you add to a page. This page will then display your blog posts in an infinite scroll. There are some other small steps you'll also need to complete along the way. Here's how to get everything set up:

Install Ajax Load More and Set Your Repeater Template

You can find Ajax Load More on the wordpress.org repository. Install and activate it like you would any other plugin.

Once it's activated, you'll see a brand new Ajax Load More option. Go to Ajax Load More → Repeater Template to build your repeater template.

Your repeater template is the template for how posts should look when they infinite scroll. Editing it requires knowing some PHP. BUT, the default template should be fine for most users:

The only important thing to note is that the default repeater template will only show post excerpts, not full posts. If you want to display full posts, you need to replace the_excerpt() with the_content().

If you know your way around PHP, you can further change this template. Otherwise, it's totally fine to leave the default repeater template.

Build Your Shortcode to Display Infinite Scroll Posts

Next, you need to build the shortcode you'll use to display your infinite scroll. Go to Ajax Load More → Shortcode Builder:

There is a lot you can configure here. You're basically going to build out exactly what content to include in your infinite scroll and how it should function. I can't go over every single item, but here are some of the boxes you'll definitely want to fill out:

Post Types – The default is to only include posts. But you can also include pages or custom post types.

Category – You can either only include certain categories, or you can only exclude certain categories.

Author – This is a cool feature where you can add an infinite scroll for a specific author.

Posts per Page – Set how many posts Ajax Load More should load each time it refreshes.

Pause – This is definitely an important feature. For true infinite scrolling, you should make this False. If you mark it True, users will have to click an ajax Load More button to get more posts.

Scrolling – The important thing is that you enable this feature so that posts automatically load as readers scroll down. I didn't change any of the technical details because to be honest, I didn't want to break anything!

You should give everything a look over. But at the very minimum, make sure you configure the above.

Once you've configured everything, copy the shortcode on the right side of the page:

All you need to do is add this shortcode to the page where you want your infinite scroll to appear. For example, you could add it to a page called Blog to make it your default blog page:

When you publish that page, you should see your brand new WordPress infinite scroll!

Wrapping Things Up

Infinite scroll is not right for every single WordPress site. But if your site publishes content of equal importance, you may be able to improve your bounce rate and pages per visit if you implement infinite scroll. At the very least, it's worth testing.

Of the plugins out there, Ajax Load More is probably the simplest way to add infinite scrolling to WordPress. You don't need any of the premium add-ons if you're just using it for basic infinite scrolling. Installation is also easy and it shouldn't take much more than 15-30 minutes to get your WordPress site up and running with infinite scroll.

Has anyone successfully or unsuccessfully implemented infinite scroll on their WordPress site? I'd love to hear some personal experiences in the comments!

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also find him on Twitter.

Does WPLift load fast for you? That's because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Source: Add Infinite Scroll to WordPress via a Plugin called Ajax Load More