How to Add Infinite Scroll to Blog Posts in WordPress?

Updated on September 18, 2023 by Editorial Team

Table of Contents

Infinite scroll is a popular way to display blog posts on a website, as it allows visitors to view content without manually clicking through pages or buttons. By implementing infinite scroll on your WordPress blog, you can improve the user experience and keep visitors engaged for longer periods of time.

Luckily, with the Post Listing block from The Plus Blocks for Gutenberg, you can easily add an infinite scroll feature to your blog post listing.

To check the complete feature overview documentation of The Plus Blocks for Gutenberg Post Listing block, click here.

Requirement  – This block is a part of The Plus Blocks for Gutenberg, make sure its installed & activated to enjoy all its powers.

To do this, add the Post Listing block on the page, and select the appropriate listing type, post type, style and layout.

Note: Lazy Load is unavailable in the Carousel layout and Single Page Related Posts type listing.

Then go to the Extra Options tab and select Lazy Load from the More Post Loading Options dropdown.

post listing lazy load

In the Post View OnClick / OnScroll field, you can set how many posts will load at once on scroll.

From the All Post Loaded Text field, you can change the text that appears when all posts are loaded.

From the Disable Animation toggle you can disable the post loading animation, so the new posts will load without any animation.

Now go to the Query tab and set a maximum number of posts to be displayed on a page in the Display Posts field.

post listing display posts

Depending on the number of posts you have and the number set in the Display Posts field, you’ll see posts loading automatically as you scroll down.

Note: To have infinite scrolling, you must set a lower number in the Maximum Posts Display field than the total number of posts.

post listing lazy load demo

Also, check How to Add Load More Button in Blog Posts in WordPress.