• WP Themes
    • Free Themes
      • Oswald Lite WP Theme
      • MariGold WP Theme
    • Premium Themes
      • Oswald WP Theme
  • WP Tuts
  • WP Reviews
  • WP Hosting
  • Freebies
  • Book a Review
  • Contacts
Home/How To Add Infinite Scroll to Your WordPress Website
3 shares
How To Add Infinite Scroll to Your WordPress Website
October 1, 2019 | Tutorials | 0 comments

How To Add Infinite Scroll to Your WordPress Website

Would you like to launch infinite scrolling functionality on your WordPress website? Let’s see how to make it very easily.

What is the infinite (long) scroll?

In one of my previous posts, I was speaking on how to improve your long scrolling website, so you can find more information on this type of scrolling and some more details there.

As you’ve probably learned, infinite scroll is an easy way to load the page without clicking the ‘next’ and ‘previous’ buttons and without creating the pagination.

It allows to get rid of numeric navigation and easily load pages with the help of Ajax technology. In other words, you just scroll the page down, and once you reach its bottom, more content loads automatically. So as you keep scrolling, more and more content is loaded.

Infinite scroll is good for mobile devices with touch screens because it allows for easily loading new content without clicking the small links and page numeration.

In my today’s post, I’m going to show you how to enable a long scroll in WordPress with simplicity.

Enable Infinite Scroll with Ajax Load More

The first plugin I will try for enabling the infinite scroll on my WordPress blog is Ajax Load More. Once the plugin is installed, go to Ajax Load More -> Settings -> Global Settings and choose the button/loading style from the default, blue, green, purple, gray, and more color variations.

Here you can also choose the container type, button and classes, etc.

In the Shortcode Builder ‘Shortcode Output’ section, you will find a shortcode to place a ‘Load More’ button into the content you want to integrate the infinite scroll into.

So I copy the shortcode and paste it into the bottom of one of the existing posts on my website.

Now I update the post and preview the long scroll functionality live. When I reach the bottom of the page I see the Load More button which disappears when more content is loaded.

Enable Long Scroll with Catch Infinite Scroll

Catch Infinite Scroll is another WP plugin I will try for launching the long scroll functionality in WordPress. Once the plugin is installed, go to Catch Infinite Scroll -> Dashboard in your admin panel and manage the settings.

First, you should select the scroll option in the Load On (Trigger On) drop-down list. It will allow to automatically load new content with scrolling. However, if you want to add a ‘Load More’ button, you can choose the Click option instead.

Navigation, Next and Content selectors work well by default, so you shouldn’t change anything here.

The Image option allows changing the content loader icon, so you can either leave the default preloader or replace it with your custom one. Just click the ‘Upload’ button to select the icon on your PC and upload it to the dashboard.

The Finish Text option contains the message which will be shown on a page when a user finishes scrolling the content and viewing your posts in the list. Here you can also either leave the default text or replace it with any custom one you prefer.

When you are done, click the ‘Save Changes’ button and keep your changes to see the infinite scroll live. Here’s how it works.

Well, for now, this is all. If you’ve got any questions, please leave them in the comments. I will be also happy to hear your suggestions as for the next tuts you’d like to read on our blog. Thanks!

melany hollywell wpdaddy
wpdaddy

Hi! I’m an experienced writer exploring WordPress for more than 5 years. I’m happy to share my knowledge and ideas with you and I hope you join me.

Cheers,
Melany H.

Share this post:
Related Posts
February 2, 2018

Cryptocurrency Plugins for Your Ultimate Income

Most of our users are already familiar with cryptocurrency, and others are maybe just starting to learn all of its advantages and the ways to earn with the help of i...
Read this post
November 15, 2018

Burying Gutenberg? Full Truth on the Phenomenon of Haters (WP Visual Editor News)

We’ve all got used to hear a lot about new Gutenberg Visual Editor designed for WordPress version 5.0 which is scheduled for release on November 27, 2018. Since Gu...
Read this post
Subscribe to our Newsletter
Never miss out on the latest news, updates and tips. Subscribe now!
Download Revolution Slider Here!
revolution slider image
Categories
  • Art and Culture
  • Blog and Magazine
  • Business
  • Cars and Transport
  • Cleaning and Janitorial
  • Crypto ICO Token Sales
  • Design
  • Directory and Listing
  • Education
  • Entertainment
  • Events
  • Fashion
  • Free Themes
  • Freebies
  • Gutenberg
  • Health and Beauty
  • Hosting
  • Industry and Construction
  • Inspiration
  • Interview
  • Kids
  • Landscape and Gardening
  • Multipurpose
  • Non-Profit and Charity
  • Pets and Animals
  • Photography
  • Plugins
  • Portfolio
  • Real Estate
  • Restaurant
  • Reviews
  • Sports
  • Technology
  • Traveling
  • Tutorials
  • WooCommerce
Popular Posts:
  • Best Face Generators to C...
  • How to Add Video in the S...
  • How to Enlarge Images Whe...
  • How to Center a Shortcode...
  • How to Fix ‘Browser...

Copyright © 2020 WP Daddy. All Rights Reserved.

Follow Us: