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 addictive feature just keeps scrolling...again...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

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 directory of WordPress plugins. 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:

  • 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 appearance and to optimize the handling 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 wordpress plugin

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 WordPress extension (WooCommerce) premium which helps convert default product 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. slider Revolution

Slider Revolution is an innovative and responsive WordPress carousel plugin that displays your content beautifully. Whether it's a slider or a carousel, his visual editor drag and drop will allow you to tell, for example, the story of your company, to highlight your best products, your best articles and much more

best sliders WordPress plugins - Slider revolution

We also invite you to discover our 9 Easy Digital Downloads plugins to manage digital downloads

Its features are: an excellent slide creation interface, slide design by drag and drop, fully responsive layout, perfect management of multimedia content, optimized performance, Multilingual support, delivered with nearly 340 graphic elements, numerous slideshow templates offered, compatibility with the majority of WordPress themes, excellent customer support, support for touch screens, free and regular updates, documentation and video tutorials available and much more.

Download | DemoWeb 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.

...