How to Add Infinite Scroll with WordPress

Infinite scroll is an awesome way to make browsing your content easier.

It works by loading new posts into the page as visitors scroll instead of making them click onto the next page of posts. So how do you add infinite scroll to your site?

These are the two best approaches and plugins you can use for your site.

Add infinite scroll the (potentially) easy way

The best implementation of infinite scroll for WordPress sites is in the Jetpack plugin.

Before you go and install it, contact your theme developer and ask if your theme has support. If it does, you can simply install Jetpack and activate the infinite scroll module.

That said, not every theme has support already and you may not want to install the Jetpack plugin. If that’s you, here’s an alternative way to add infinite scroll.

Are you a Compete Themes user? All our themes include support for infinite scroll with Jetpack.

How to use YITH Infinite Scrolling

The alternative for infinite scroll without Jetpack is to use the YITH Infinite Scrolling plugin.

YITH Infinite Scrolling

While this plugin works great, the setup is a bit technical. Let’s cover the steps now.

Install & activate

First, install and activate YITH Infinite Scrolling via the Plugins menu. Once installed, you’ll find a new YITH Plugins menu item added to your dashboard. Click on it to view the Infinite Scrolling settings.

Screenshot of the YITH infinite scrolling settings menu

Configure the settings

This part might trip you up if you don’t know anything about HTML & CSS.

To make the plugin work, you need to provide it with CSS selectors for four different HTML elements. There’s no way a plugin can know these selectors in advance which is why you’ll have to enter them yourself.

You don’t need to do this with Jetpack because the theme author has already done it for you.

How to find the CSS selectors

If you don’t know what CSS is or how it relates to your website, check out our CSS with WordPress overview.

Finding the CSS selectors you need is actually easy and straightforward with the right approach. If you’re not sure how to find them already, follow this tutorial for finding CSS selectors. It’s the easiest way to navigate your site’s HTML to find the elements you’re looking for.

Add the selectors

Copy each selector into the inputs in YITH Infinite Scrolling as you find them. If you’re a Compete Themes user, you can copy the exact classes used in the screenshot above.

Now as you scroll down your website, new posts will automatically load into the page. The plugin works right away once the four CSS selectors have been provided.

showing off the infinite scrolling with YITH
Infinite scrolling in the Apex theme with YITH Infinite Scrolling.

Infinitely Scrolling in WordPress

The above two methods are the easiest and most effective for adding infinite scrolling to your WordPress site.

While there are alternative plugins, they too require a handful of CSS selectors, and none work quite as well as the YITH plugin. Setting up infinite scrolling may be a bit tricky, but once you’ve got it added it will work seamlessly for your visitors.

If you have any questions about infinite scrolling or adding it to your site, post a comment below.

Related Posts

2 Comments

  1. Javier Guentenez Javier Guentenez

    Just wonder, why would you even consider using YITH Infinite Scrolling when Ajax Load More is soo much more powerful and is being actively developed?
    http://wordpress.org/plugins/ajax-load-more/

    • Ben Sibley Ben Sibley

      Thanks for sharing that plugin, Javier. It looks really great. In fact, it looks like it is a better solution than the YITH plugin.

      It doesn’t show anywhere in Google when searching for “infinite scroll” and similar keywords, so I overlooked it when comparing solutions.

Post a comment

Your email address will not be published. Required fields are marked *