WordPress Infinite Scroll: How to Add With Plugins or Code

Ever noticed how you seem to scroll endlessly on your social media page without getting to the bottom? Yes, that is what we refer to as Infinite scroll and you can add it to your WordPress site.

It enables contents on a website to load automatically whenever a user gets to the end, without having to click a ‘Load more’ or ‘Next’ button.

This is a great feature to add to your site as it helps to keep your users glued to your WordPress site. In this guide, we will explain what the Infinite scroll is, if every site can use it, the advantages and disadvantages of it, and how to add them to our site.

Understanding Infinite Scroll

Infinite Scroll is a web design style that makes use of AJAX loading to open new contents automatically when a user gets to the bottom of the page.

With AJAX (Asynchronous JavaScript and XML), web pages can be updated by exchanging data with the server, without having to reload the entire page.

Normally, at the end of a feed, you would see pagination which displays the link to the next page in the form of a ‘Load More’ or ‘Next’ button. Now with the Infinite scroll feature, there is none of that. That is to say, the more a user scrolls, the more posts will continue to load.

As great as this feature is, it would be wise to know if it will be suitable for every website.

Can Every Site Use Infinite Scroll?

No doubt, the Infinite scroll feature improves browsing experience and user engagement. At the same time though, it is not suitable for every website.

If you have a website used for selling products, that is, an e-commerce site, you should think carefully before using this feature. It can make searching for specific products a bit more difficult. Further, with an endless list of new items being loaded, the user may be distracted from taking action on one product.

However, if you have a WordPress blog where you post and update content regularly, the infinite scroll feature is perfect for you as your users will not need to continuously click on the pagination links. It is also an excellent way to keep your users stuck on your site.

Of course, it can’t be all rosy with this feature, it will surely have its pros and cons. Let us take a look at them.

Advantages Of Infinite Scroll

Like we’ve mentioned, this design technique improves a website’s browsing experience and increases user engagement.

When a user is continuously given interesting contents to view as they scroll, it enables them to stay longer than they would have if they had to constantly click the ‘Load More’ button, thereby decreasing the bounce rate of your site. This is good for SEO, and for your site traffic.

As great as this is, however, there are downsides to it that you should know.

Disadvantages Of WordPress Infinite Scroll

The major disadvantage of this feature is the fact that it makes navigation around the website hard. With so much content loading continuously, it can be difficult to look for a particular post if there is a need for such as you wouldn’t know what page it is on.

Also, it can be difficult to locate the footer of the website as you have posts loading all the time. Remember that you may have added important links in your footer. You should have this in mind if you wish to apply this technique.

In addition to these, it tends to slow down websites and in severe cases, crash the server. This is because when users scroll continuously, it results in memory exhaustion in the WordPress hosting account. To avoid this, we suggest you make use of Managed WordPress Hosting.

So we’ve seen what the Infinite scroll is all about, let us get on to how we can add it to our site.

Adding WordPress Infinite Scroll To Our Site

This can be done in two ways. You can either make use of a plugin or add the code to your theme’s functions.php file manually. Do not worry, we will explain them in detail.

Adding Infinite Scroll With Plugins

This is actually the easiest way to activate Infinite scroll on your website. Thankfully, there are a lot of plugins to help you achieve this.

Let’s check out some of the WordPress Infinite scroll plugins available.

Ajax Load More

The first on our list is the Ajax Load More plugin. This plugin provides lazy loading on WordPress posts and pages with Ajax-powered queries. Multiple instances of Ajax load more can also be added to a single page, post or template.

To set up the infinite scroll, install the plugin and activate it. If you need help installing plugins, you can go through our guide on how to install WordPress plugins.

Upon activation, the plugin will appear on the menu. To enable infinite scroll, you will have to:

Customize the Repeater template
Build a Shortcode
Then add the shortcode to your site.

Let’s show you how.

First, hover over the plugin and click on Repeater Templates. Here, the custom repeaters enable you to edit the display and styling of your post as they would appear on the list of posts.

Once it is open, you will see the default template. This template already displays the way a WordPress post is normally structured, so you may not even need to edit anything.

However, when you preview your infinite scroll page at the last step below, if you don’t like the way any part looks, you can come back to this step and adjust it.

Now, save the template and head on to the Shortcode Builder. Here you will create a shortcode with which you can display the infinite scrolling posts on any page, post, or template.

When you open the shortcode builder, you will see a lot of options to customize. Don’t worry, you don’t need to touch every one of them. For this tutorial, we will be touching just two.

The first of them is the Button/Loading Style. There are different Ajax loading styles for you to select from. Here, we scrolled to the “Infinite Scroll” section and selected Classic.

The second item we will be setting is the number of posts that will load when a user gets to the bottom.

Lastly, copy the shortcodes from the Shortcode Output.

You can paste the shortcode on any page or post on which you want to have infinite scrolling. If you are using the new Gutenberg block editor, simply search for ‘shortcode’, add a shortcode block, paste the copied shortcode, and update the page.

Next, preview the page. As long as you have enough posts and (or) pages on your site, once you scroll to the bottom, new items will be loaded.

If you want to add this feature directly into a theme template instead, you can use the do_shortcode syntax as follows.
<?php echo do_shortcode('[ajax_load_more loading_style="infinite classic" post_type="post"]'); ?>

Of course replace the sample shortcode above with the shortcode you copied.

Jetpack

This is another popular plugin that also provides infinite scroll functions. Aside from Infinite scroll, Jetpack plugin also has other features that help to improve user experience in your WordPress site.

We only recommend that you use this option if you already have Jetpack installed in your site. If not, it would be too heavy a plugin for implementing just infinite scroll. Also, Jetpack infinite scroll only works on themes that support the function, so you would have to try it out to see if it works for you.

That said, activating the Infinite scroll feature with this plugin is very easy. After you have successfully installed and activated the plugin, simply navigate to Jetpack >> Settings.

On the Writing tab, go down to Theme Enhancements to see the infinite scroll settings. Select ‘Load more posts as the reader scrolls down’ and Save settings.

That’s it.

Yith Infinite Scrolling

Yith Infinite scrolling is another good WordPress plugin for this purpose. Aside from the endless scrolling on your pages and posts, it helps improve your e-commerce usability by displaying products while scrolling. If you decide that this is good for your kind of store, then Yith will help you execute properly.

In addition, it benefits mobile users as they would not need to click on tiny pagination links. You can further select a higher number of products to make it easy for your users.

Note that this plugin has it’s free and premium version. The features of the free version include:

Infinite scrolling for one section
You can upload a custom loading image

For the premium version, you have:

Features from the free version
Infinite scrolling in many sections
Choose from its different pagination types
You can manage a section from its own option panel, e.t.c

The premium version costs €49,99 for a single site. Six sites go for €149,99, while 30 sites go for €249,99. Yith Infinite plugin boasts of a 97% customer satisfaction with a 4.5/5 rating.

Catch Infinite Scroll

This is a free and premium plugin that you can use to add Infinite scroll. Once you enable this feature, your contents will load automatically when your visitors get to the end of the page.

If you feel you do not want the Infinite scroll feature, you can always add the ‘Load More’ button. Users will simply click to load more contents.

The Catch Infinite plugin is so easy to set up. You also do not need to have any coding knowledge. So even if you are a beginner, you can easily customize the plugin the way you want it to be.

To get more features out of this plugin, you can go for the premium version.

With this, you can display advertisements as users scroll, choose from different styling and engaging fonts that will fit your website perfectly, and do much more. This pro version goes for $24.99.

Adding It Manually With Code

If you decide to add WordPress infinite scroll manually, it is important to make sure that your current WordPress theme supports the function. Many themes may not, in which case, your best bet is to use one of the plugins above.

We would advise that you backup your site in case anything goes wrong. Now, let us see how to add the codes.

To activate the infinite scroll, you will have to add the codes to your theme’s functions.php file.

Locating The function.php file

You can access this file through your hosting cPanel dashboard. First, login to your cPanel dashboard.

In cPanel, under the ‘Files’ section, click on ‘File Manager’ to open all the folders and files for your WordPress site.

Look for the ‘Public_html’ folder and double-click on it. In the next window, double-click on the ‘wp-content’ folder to open it.

Once it is open, double-click on the themes folder to open it also. You will see a list of all the themes that have been installed on your website.

Double-click on the folder of your active theme.

You will see the function.php file. Before you add the code, make a copy of the current file by downloading it to your website.To do this, right-click on the functions.php file and select ‘Download’. After that, you can add the codes by right-clicking and selecting ‘Edit’ from the list.

Once the file is open for editing you will add this snippet of code to it to activate the Infinite scroll.

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

After that, you will have to set the render parameter. This is the code that you use to determine whether you want endless scrolling or a button to load more posts. Simply add the code below to your functions.php file, below the code we added previously.

function mytheme_infinite_scroll_render() {
get_template_part( ‘loop’ );
}

Now save the file and check to see if the Infinite scroll is already working on your WordPress site. If it isn’t, then your WordPress theme may not support this function.

You may instead try one of the plugins listed above.

Conclusion

Infinite scrolling is truly a remarkable feature to add to your WordPress website. When used wisely, it not only allows your users to stay longer on your site but gives a better display of your content.

It is also great since this results in lower bounce rates and improves user experience on your website. So, consider the pros and cons, and if it is useful for your site, go on to implement it using one of the methods covered in this guide.