Skip to Main Content

How to add infinite scrolling on a WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to add infinite scrolling on WordPress?

Is there anything more addicting than Facebook's news feed? I mean, I'm sitting here writing this tutorial, but this addicting feature just keeps scrolling… again… and again.

This is a feature that Facebook uses, which is called: " infinite scroll "Or" endless scrolling ", for the news feed. Rather than having to click a button or " Next " or " Read more ", The content keeps loading when you scroll down the page.

add infinite scrolling on WordPress

And guess what? You can achieve the same effect on your WordPress blog by adding infinite scrolling.

In this tutorial I will discuss some of the pros and cons of infinite scrolling and then I will show you how to set up an infinite scroll on your WordPress blog.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Advantages of infinite scrolling

Many big brands have experimented with infinite scrolling, which gives us the advantage of being able to examine their data. Here are some of the benefits that have been experienced by social networks:

By the way discover how to create a scrolling text on Divi

  • More Views - NBC News found that landline users visited 20% more pages per visit with infinite scrolling. Likewise, " Times "Also found that 21% of its users opted for the rest of the content with infinite scrolling.
  • Very low bounce rate  - " Times Also reduced its 15% bounce rate when they opted for infinite scrolling.
  • Improved user experience - With that, everyone agrees. Some experts have stated that infinite scroll UX boosts users' content exposure, forcing users to click less while offering a better mobile experience.

I can't say for sure that you will get the same results as these top brands, but if you have a lot of blog posts scrolling will definitely be a good option.

Discover when and how to install WordPress in a subdirectory

Most social networks rely on infinite scrolling for these same reasons.

Disadvantages with infinite scrolling

Everything is not always rosy with infinite scrolling. There are certainly some potential negative points that you should consider:

  • No footer - you lose on your footer, when you opt for infinite scrolling. It will be a big handicap if you want to offer more information in the footer. For example, if you are using your footer to display affiliate information, you'll need to find a new way to display that information.
  • Bouncing scrollbar causes a bad experience  - Because the website is always loading, it is very likely that the length of the loading bars will change, which can cause you to lose track of the reading, resulting in a bad user experience.
  • No feeling of "completion" - This is not an innuendo. Nielsen researchers have found that users feel completion when they reach the end of a page. The infinite scrolling makes this impossible.

Also, in the "Benefits" section, the infinite scrolling is good when you have a lot of equally important blog posts. Well, the opposite is also true:

See also in this article how to fix the "temporary folder missing" error on WordPress

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

If your items are of unequal importance (for example, some articles have up to 2.000 words and some only have 300 words), so infinite scrolling, is certainly not a good idea for your website.

How to add infinite scrolling to WordPress

To add infinite scrolling on WordPress, you can use a free plugin named " Ajax Loader More ". This plugin offers tons of premium extensions that can boost its functionality, but the free version should be enough to simply add infinite scrolling to your website.

Go further also by consulting Javascript on WordPress: AJAX use case

The basic plugin works by generating a shortcode that you add to a page. This page then displays your blog posts in an infinite scroll. There are a few other small steps that you will also need to complete throughout the course. Here's how to put it all in place:

Installing and configuring the plugin

You can find " Ajax Loader More On the WordPress plugins directory. Install and activate the plugin as you would any other plugin.

Once it's activated, you'll see a brand new option " Ajax Load More ". Go to " Ajax Load More> → Repeater Template To create your model.

« Your model> Repeater Is the template that defines how articles should appear in infinite scrolling. You can change it, but you need to know a little PHP. However, the default template should be fine for most users:

Construction-dun-model-wordpress

The only important thing to note is that the default “Repeater” template will only show article excerpts, not full articles. If you want to display the full articles, you must replace " the_excerpt () " by " the_content () ».

If you know PHP, you can still customize this model. Otherwise, it's fine to leave the model " Repeater " by default.

Read also our article on 9 WordPress plugins to create price grids on a blog

There are a lot of things you can configure here. You have the option to change what will show in the infinite scroll and how it will all behave.

I can not name all the possibilities in this article, but here are some of the boxes that you will definitely want to fill:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • post_type - The default is to include only articles. But you can also include custom pages or post formats.
  • category - You can include only certain categories, or you cannot exclude certain categories.
  • author - This is an interesting feature where you can add infinite scrolling for a specific author.
  • Posts_per_page - Define the number of articles that " Ajax Loader More Should charge every time it refreshes.
  • pause - It is certainly an important element. For true infinite scrolling, you should set it to "false" here. Otherwise, users will have to click to bring up the other articles.
  • scroll - The important thing is that you enable this feature so that the articles are automatically loaded as users scroll down the page.

Discover also our 5 WordPress themes for podcasters

Once you have everything configured, copy the shortcode on the right side of the page:

the copy-shortcode-ajax-loader-more

All you need to do is add this shortcode to the page where you want your infinite scroll to appear. For example, you can add it to a page called " Blog To make it your default blog page.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Youtube & Vimeo Pagination Gallery

This premium WordPress plugin is a responsive and mobile gallery with many fully configurable features. It can display videos from YouTube playlist, keywords or search by album, channel, group or keyword from Vimeo. The grids can be personalized in several ways. The Lightbox Gallery can display the player with all the details of the video, including comments.Youtube vimeo pagination gallery plugin wordpress

This WordPress plugin can be used in any post or page area using shortcodes or directly in PHP pages. All you need is to create a new gallery, add YouTube Channel ID for example, and generate a shortcode. Several galleries can be used on the same page.

Download | Demo | Web hosting

2. Infinite WooCommerce Scroll and Ajax Pagination

WooCommerce Infinite Scroll and Ajax Pagination is a premium WordPress (WooCommerce) extension that helps convert a product's default pagination to unlimited scrolling or Ajax pagination. When a user scrolls down the page, the next product page is automatically retrieved and added. This means that he does not need to click on 'Next page'. 

WooCommerce Infinite Scroll and Ajax Pagination

You can also add a “Load more” button instead of unlimited scrolling, or you can keep the default pagination and convert it to Ajax Pagination.

Read also : 5 WordPress plugins to insert forms into your website

In addition, you can set different types of paging for mobile devices, such as unlimited scrolling for large screen devices and “Load more” button for mobile devices.

Download | Demo | Web hosting

3. YouTube Videos To WordPress Posts

YouTube Videos To WordPress Posts is a free plugin that allows users to import videos from YouTube to WordPress in the easiest way possible. You will be able to import videos by user, channel, query, id, and you will also be able to import them in bulk to save time.Youtube videos to wordpress posts youtube wordpress plugin

Its main features are:  the ability to test all features before purchasing the plugin, a scourteous and responsive customer support, a simple design and powerful options for you to easily configure your videos import,mass import or by pagination or even scheduled, the insertion of YouTube videos in any type of content available on your website, the ability to import comments, tags, categories and all other video info (thumbnail image, number of views, likes, dislikes, duration, etc.), a detailed documentation and more.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's all for this tutorial, now you have the ability to set up an infinite scroll on your WordPress blog. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

... 

This article features 3 comments

  1. Quiero agregar el desplazamiento infinito mi website. Ustedes tienen alguien that podria ayudarme.
    Thank you
    Regina Aguirre

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
17 shares
Share12
tweet1
Save4