How to Add Infinite Scroll to WordPress

Keeping site visitors engaged and on your pages for longer can be a real challenge. With so many options for content and entertainment online, you might be wondering what you can do to make your own website stand out. 

Fortunately, there are some tools out there for WordPress that can help you retain visitors. One excellent option is the ‘infinite scroll’ function. This enables content to load automatically as your visitors scroll down the page, providing a more seamless experience.

In this article, we’ll go over the details of what infinite scroll can do. We’ll also discuss two ways you can add it to your WordPress website. Let’s get to work!

The What & Why of WordPress Infinite Scroll

Infinite scroll is the product of Asynchronous JavaScript and XML (AJAX) web design programming. This option makes it possible for post content to load automatically as viewers scroll down the page. This means they are not disrupted by the need to click on a button or link in order to load more content. 

There are plenty of examples of this design option that you might be familiar with. For instance, you’ll recognize infinite scroll on sites like Facebook, Twitter, and other social media platforms. On those sites, developers are really working to keep users on the page for long periods of time. If the content feed seems to never end, it’s easier to keep people interested. 

This approach is particularly useful for sites that have regular content updates, such as blog posts or videos, that tend to be of similar lengths. The beauty of AJAX is that it can request and communicate information to your web server without reloading your entire page, so it doesn’t need to slow down the browsing experience in the process. 

Adding Infinite Scroll to Your WordPress Site

There are two main ways to add infinite scroll to your WordPress website. You can use a plugin or add the function manually. The primary concern with adding infinite scroll, regardless of how you choose to do it, is to make sure that your theme is compatible with the functionality. We’ll discuss this in more detail later on.

Adding Infinite Scroll With Code

When adding infinite scroll to your website using code, you’ll need to do a bit of research on your theme to find out if it supports the function. Some examples of themes that are built appropriately for this use case include the WordPress default themes.

It’s also a good idea to have the Jetpack plugin installed and activated on your WordPress website. While it doesn’t automatically make infinite scroll work, it enables you to do so more easily using code.

Finally, as with any major site change, we recommend that you make a backup of your site before proceeding (just in case). 

Step 1: Copy a Suitable Code Snippet

If your theme is well-built and suited to the infinite scroll functionality, you can add just one small snippet of code to your functions.php file and be on your way: 

add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer' => 'page',
) );

This provides the necessary information about your theme for the scroll function to work.

If your theme is older or not built to be compatible with infinite scroll, you’ll need to add a few more items of code to get it working. You can include this snippet in the functions.php file in your theme: 

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'rootdip_infinite_scroll_init' );

This will activate the infinite scroll function, regardless of your theme. 

Step 2: Set Your Function Parameters

Next, there are a number of parameters that you can customize in your infinite scroll script. For example, you can specify ‘scroll’ or ‘click’ for the ‘type=>’ parameter. Since you’re presumably looking for an infinite scroll experience, you’ll want to set your type to scroll. The other option would provide users with a button to load more content. 

Other parameters you might want to customize include footer_widgets and render. When you enable infinite scroll in your theme, your footer links won’t display unless you configure the relevant parameter. There are several things to consider regarding this parameter, and advanced reading on the topic is recommended. 

In terms of the render parameter, it’s important to know that the infinite scroll function uses a standard WordPress loop to display posts. The default function for the render parameter looks like this: 

while( have_posts() ) {
 the_post();
 get_template_part( 'content', get_post_format() );
}

You can include any functions that are available in your theme in this part of the code, if you want to further customize how posts display in your infinite scroll. 

Step 3: Test Your Infinite Scroll

We recommend testing the changes to your site once you’ve completed the customizations to its code. A smart way to do this is to use a staging server for all of your custom programming.

You’ll also want to make sure that your infinite scroll is working properly on mobile devices. Since this functionality can sometimes conflict with certain themes, this is an important step in finalizing your changes. 

Adding Infinite Scroll With a WordPress Plugin

If you’re looking for an easier way to add infinite scroll to your website, we recommend using a plugin. This option will give you an easier-to-navigate user interface, and more customization options. 

Step 1: Select Your Infinite Scroll Plugin

There are quite a few infinite scroll plugins to choose from. We’ll list a few solid options for you to get started with:

• Ajax Load More. With over 50,000 active installations and lots of five-star reviews, this is an excellent and flexible plugin. You can use the shortcode builder to create custom Ajax queries for your site. Additionally, this tool is compatible with WooCommerce and Easy Digital Downloads for creating infinite scroll options in your eCommerce store. 
• Catch Infinite Scroll. This is a simple yet effective all-in-one option for adding infinite scroll to your WordPress site. With a few straightforward settings, you can control many of the same parameters that would normally require manual coding. 
• YITH Infinite Scrolling. YITH is another well-documented and popular infinite scroll plugin. It is also compatible with WooCommerce, and has a simple interface with easy-to-use settings. 

For this example, we’re going to use the Ajax Load More plugin, and walk you through the steps you’ll need to set up your own infinite scrolling feature.

Step 2: Install Your Chosen Plugin

Next, you’ll need to navigate to Plugins > Add New in your WordPress dashboard. You can search in the plugin directory for “Ajax Load More” (or whichever plugin you prefer), and then install it: 

Don’t forget to click on Activate to complete the installation process. 

Step 3: Configure the Plugin’s Settings

Once you’ve finished activating the plugin, you’ll have a new Ajax Load More menu option in your WordPress dashboard. From there, you can begin to configure and style your infinite scroll settings: 

You’ll also be able to use the plugin’s shortcode builder and other options it provides, such as templates. 

Finally, be sure to thoroughly test and preview the changes to your site. You’ll want to make sure the plugin has created a responsive scrolling option for all screen sizes. 

Benefits and Drawbacks of WordPress Infinite Scroll

As we discussed earlier, infinite scroll is one way to keep your site’s visitors engaged with your content, and potentially avoid distractions that may take them away from your website. However, there are some kinds of sites that are better suited to the infinite scroll design than others.

Sites that present content in a timeline feed, for example, are perfect candidates. Additionally, infinite scroll is well-suited for mobile and touch screen devices, so it’s a strong choice if you have a user base that’s highly active on mobile.

There are some drawbacks to consider as well. Some users may become ‘lost’ in an infinite scroll situation. The navigation of your site can become a little convoluted when posts from a variety of site locations are loaded into one scroll feed. As we mentioned earlier, you may also need to make special considerations regarding your footer. If you include important links in your footer, you might need to reconsider your design if you plan on implementing infinite scroll. 

Last but certainly not least, you will want to make sure your web host can handle users who will be continuously scrolling, therefore requiring your server to keep loading content. For that, you might want to check out a managed WordPress hosting solution like our own WordPress digital experience platform. 

Get Infinite Opportunities With WP Engine

Providing a quality, streamlined user experience to your customers and viewers requires the best developer resources and know-how. Additionally, a secure and reliable web host can help you achieve your website goals.

Here at WP Engine, we have everything you need to provide an enhanced online experience. Read all about our plans and industry-leading WordPress hosting to learn more!