How to Make Infinite Scroll on Homepage in WordPress Blogs

In this article, I’m going to share a tutorial about How to Make Infinite Scroll on Homepage in WordPress Blogs? Let me tell, you  what actually infinite scroll does if added on homepage of your WordPress blog. So, we usually have next or previous page buttons on the homepage for older content. However, infinite scroll is something unique with which you visitors can automatically load to the next page content once they scrolls down to the bottom on homepage to see previous articles.

So, if you want to make infinite scroll on homepage in WordPress then simply follow this article.

How to Make Infinite Scroll on Homepage in WordPress Blogs

Infinite-Scroll WordPress plugin let’s you automatically append the next/previous page buttons (via AJAX) on your blog’s homepage and adds an infinite layer so that whenever a user scrolls down to the bottom of the page you will see the older content much like Facebook News Feed. Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

Features:

  • Works out-of-the-box for many popular WordPress themes — just activate the plugin and scroll
  • Fully customizable to adapt to your site and theme
  • Requires no (hopefully) template hacking, only knowledge of CSS selectors.
  • Relies on shared database of common themes to simplify installation process
  • Maintain local database of theme presets for all installed themes (shared across network on multisite installs)
  • Countless API endpoints to modify the behavior.
  • Backwards compatible: Will not break RSS readers, mobile devices, or browsers with javascript
Related  How to Make WordPress Blog Posts Password Protected

How Infinite-Scroll Works?

Follow the steps below:

  • Install and activate Infinite-Scroll plugin in your blog
  • Navigate to Settings → Infinite Scroll
  • Now, as you can that the plugin has pre-set CSS Selectors
Infinite-Scroll screenshot-1
Infinite-Scroll Screenshot 01
  • If the above CSS selectors are not exist in your theme or if these doesn’t work on your blog kindly comment below
  • By the way, finally add the message before loading and after loading finished while the infinite scroll occur on your blog also add the image.

For instance, check out the following image:

Infinite-Scroll Screenshot 02
Infinite-Scroll Screenshot 02

Whoa, you have done adding infinite scroll on your WordPress blog. Congrats.

Leave a Reply

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