Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
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.
You might like these WooCommerce infinite scroll plugins if you run an eCommerce store.
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.
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.
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.
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.
