How To Add Infinite Scroll To Your WordPress Theme [ Tutorial using Plugin]

Want to make your visitors spend more time on your website?

Of course you do. Time on site correlates with good user experience- which you should always strive for.

One way to improve both user experience and time on site is infinite scroll. If you’ve ever used Facebook or Twitter, you probably already know how addictive infinite scroll is (even if you’ve never heard the term “infinite scroll”).

Because the term is a bit technical, let me explain it in plain language. Infinite scroll means that when a user reaches the bottom of a page, your site will automatically load more content. Thus, the scroll is “infinite” because a user can never scroll 100% to the bottom of a page because new content is always loading.

It has some parallels to the method of lazy loading images.

In addition to the huge social networks I mentioned, major news organizations like Time and Slate have started using infinite scroll for the articles on their sites.

In this post, I’ll show you some of the data on the benefits of infinite scroll. Then, I’ll show you exactly how to set up infinite scroll for WordPress using a plugin.

Benefits Of Adding Infinite Scroll To WordPress

Thankfully, there’s some public data about the benefits of infinite scroll.

Here’s what some sites noticed after switching:

• Lower Bounce Rates – After switching to infinite scroll, Time’s bounce rate dropped by 15%.
• More Page Views – Similarly, after making the switch, Time found that users visited a second page 21% more often than before. NBC News noticed something similar – their users visited 20% more pages with infinite scroll.

Some UX experts have also cited better user experience as a result of infinite scroll. However, this point has arguments on both sides. To really get the UX benefits, you need to use infinite scroll in the right situations.

When To Use Infinite Scroll

Infinite scroll is not for every site. You should only add infinite scroll if your posts are all of equal importance. What do I mean by that?

Let’s look at one of the main examples: Social networking sites. On a social network like Twitter, all tweets are equal. Some may be more popular than others, but there’s nothing that automatically makes one tweet more important than another. It’s the same with Facebook – all Facebook posts have the same basic importance.

Now let’s apply this to a blog. If all of your posts are normally around 1,000 words, they’re probably of about equal importance. However, if you post one huge 3,000-word post per month, and then sprinkle in 300-word posts in between, your posts are not all equal. Infinite scroll is good for the first situation, but not the second one.

How To Add Infinite Scroll To WordPress

Now that you know whether or not infinite scroll is right for your site, here’s how you can add infinite scroll to WordPress…

First, you need to install and activate a free plugin called Ajax Load More.

To configure the plugin, you need to set up something called your “Repeater Template”. True to its name, this is basically the format for how your infinite scroll should work. For example, when the plugin loads new content to add to the scroll, should it only load excerpts or should it load the full post? That’s what you’ll set here.

To set up your template, go to “Ajax Load More” → “Repeater Templates”:

You’ll need to know a little bit of code to edit the template. By default, the template will only display post excerpts when it loads new posts.

If you want to display the full post content, you just need to replace “the_excerpt()” with “the_content()” like this:

You can also remove the timestamp by deleting that specific line of code:

If you’re familiar with PHP, you can also manipulate the template in other, more advanced ways. But regular bloggers don’t need to worry about editing the template any further.

Once you’re happy with your template, click “Save Template” and move to the next step.

Build Your Shortcode & Configure Infinite Scroll

Next, you need to build the shortcode that will display your infinite scroll. You’ll be able to customize pretty much every aspect of your infinite scroll.

To do that, go to “Ajax Load More” → “Shortcode Builder”:

Go through the options on this page. You don’t need to configure every option, but you should at least read all of them.

The Shortcode Builder lets you configure details like which categories to include/exclude, how many posts to load at one time, whether to automatically load posts or require readers to click a “Read More” link, and lots more.

Each option is well-documented, so it should be easy to understand the different settings.

Once you’ve configured everything, copy the shortcode from the right side of the page:

Then, you need to insert this shortcode into the page where you want to display your infinitely scrolling blog.

For example, if you want to show your infinite scroll feed at “yourdomain.com/blog”, you just need to add it to a new page like this:

Publish that page to allow users to read your blog with an infinite scroll.

Get An Even Better Infinite Scroll

That’s all you need to do to add an infinite scrolling functionality to WordPress!

If you want even more functionality, you can purchase pro add-ons for the plugin. But I think for normal bloggers, the free version of the plugin is powerful enough.

Do you enjoy websites that use infinite scroll? I’d like to hear your thoughts in the comments.

And don’t forget to share this post!

Here are more WordPress tutorials that you should read next:

Subscribe for more videos

Source: https://wpsutra.com/wordpress-theme-infinite-scroll/