Thursday, January 4, 2018

How To Add Infinite Scroll To WordPress: A Beginner’s Guide

TnThis post, I’ll share some of the case studies supporting infinite scroll and then I’ll show you how to easily add infinite scroll to your WordPress site.

How Can An Infinite Scroll Help Your Blog?

Infinite scroll can help engage your readers, which can subsequently lead to:
  • Higher time on site
  • Lower bounce rates
  • More pages per visit
For example, here is some evidence from big publishers supporting infinite scroll:
  • The Time.com team decreased their bounce rate by 15% after shifting to infinite scroll
  • Time.com also increased its rate of users reading a second piece of content by 21%
  • NBC.com increased its pages per visit by 20%
More big publishers are joining the likes of Time.com and NBC.com, with Slate recently hopping on the infinite scroll train.

Should Every Website Use Infinite Scroll?

No. While infinite scroll is great for some sites, it’s not right for every website. Nielsen Norman Group, a user experience consultancy, has a good article on why that’s the case.
Infinite scroll is not a good idea for what they call “goal-oriented” websites. That is, sites where visitors are trying to find a specific “thing”. For example, if you have a blog about technical topics, that specific “thing” could be an article about, say, how to add infinite scroll to WordPress!
So when is infinite scrolling good?
When you have a website where “each unit of content belongs at the same level of hierarchy and has similar chances of being of interest to users”.
That’s a fancy way of saying that infinite scroll can work well if you have a site where most visitors will be somewhat interested in all of your posts, rather than just a specific post.
That means if you have a blog about a casual, fun topic, infinite scroll can be a great idea. After all, it’s no coincidence that infinite scroll is used by all major social networks such as:
  • Facebook
  • Twitter
  • Pinterest
  • Instagram
  • + more

How To Add Infinite Scroll To WordPress With Jetpack

If you think infinite scroll sounds like a good fit for your blog, the easiest way to add infinite scroll to WordPress is with the Jetpack plugin.
If you’re not familiar, Jetpack is a plugin developed by Automattic that includes a suite of helpful tools, one of them being the infinite scroll.
Here’s how to get started with it:
*Note: There is a small chance that Jetpack infinite scroll won’t work with your theme. While most themes have built-in support, I can’t guarantee that every single theme will work with Jetpack infinite scroll. If you struggle with your theme, this page has some solutions.

Step 1: Install and configure the Jetpack plugin

To get started, you’ll need to install the Jetpack plugin and sync it to your WordPress.com account (if you don’t already have a WordPress.com account, you’ll also need to create one).
Once you install and activate Jetpack, you’ll see an option to Connect to WordPress.com:
Connect Jetpack to WordPress.com
Follow the process to either sign in to your WordPress.com account or create a new account. Be sure to Approve access.
Once you do that, Jetpack will show you a pricing page. Don’t worry – you don’t have to pay for the infinite scroll module! Just click the Start with free → button at the bottom:
Jetpack pricing page
Jetpack will then take you back to your WordPress dashboard and ask you to Activate recommended features.
If you want those features, feel free to click the button. But if you only want infinite scroll, don’t click it:
Jetpack

Step 2: Activate Jetpack infinite scroll module

Once you’ve set up Jetpack, you need to go in and actually activate the infinite scroll module.
To do that, go to Jetpack → Settings and scroll down to the Theme enhancements section. There, check the box for Load more posts as the reader scrolls down and make sure to SAVE SETTINGS:
Load more posts as the reader scrolls down

Step 3: Configure how infinite scroll works

At this point, infinite scroll should be active on your site already. If you want a little more control, you can configure two more options by going to Settings → Reading:
Configure jetpack google analytics settings
Leave the Infinite Scroll Behavior box checked. You can then choose whether or not you want it to count as a new Google Analytics page view whenever a user triggers more posts to load.
There’s no “right” answer here – it just depends on how you want to calculate your website’s analytics.

Step 4: Confirm that infinite scroll works on your site

At this point, you should be good to go! All that’s left is to confirm that infinite scroll actually works on your site.
Load your blog archive page and…scroll down! If everything is working properly, your site should automatically load more posts when you reach the bottom of the page.

Advanced: Add Infinite Scroll To WordPress With Ajax Load More

If you want more control over how the infinite scroll on your site functions, you can use the free Ajax Load More plugin.
This plugin is more complicated than Jetpack, so if you’re a beginner I recommend using the method above.
But if you’re comfortable working with some basic PHP code, you’ll have a lot more flexibility using Ajax Load More because it lets you:
  • Include/exclude content by post type, taxonomy, search terms, authors, and more
  • Customize the template for your content
  • Choose when to trigger the infinite scroll to start loading
To use the plugin, you’ll need to:
  • Build a content repeater template with PHP (the plugin gives you some templates to help you get started)
  • Insert that repeater template into a post/page using the plugin’s shortcode builder
Add Infinite Scroll To WordPress
Essentially, you’ll be replacing your regular blog archive page with a page containing an ‘Ajax Load More’ shortcode.

Final Thoughts On WordPress Infinite Scroll

As mentioned earlier, infinite scroll is not the best solution for every single WordPress blog. However, if you blog about a fun topic where visitors will enjoy all the posts that you write, infinite scroll can help to:
  • Lower your bounce rate
  • Increase the amount of content that your visitors view
For a simple way to add infinite scroll to WordPress, you can use the free Jetpack plugin from Automattic. For more advanced users, consider Ajax Load More – just remember that it is easier to use if you already know a little bit about coding.
I would to hear from you guys now: Have any of you tried adding infinite scroll to your blog? If so, did you see any improvement in your engagement metrics? Use the comment section  below to engage.

No comments:

Post a Comment