Add Load More Posts To The Query Loop Block

The code in this download folder enables you to add a load more posts button to the end your query loop block using WordPress. On button click, more posts load according to the settings in the set.js file.

In this example, we show 4 more posts each time the button is clicked.

Here’s the the initial display of 4 posts on page load :

And here’s the next 4 posts loaded are button click.

You can see this in action by watching the following demo video.

Demo Video

Shows 4 new posts loaded on button click.

Tested using the 2024 default block theme for WordPress however will work in any theme using Gutenberg.

Code Installation

There’s 5 steps :

1. Upload the files named set.js and is.js to your child theme folder. is.js is a backup if you want to load infinite scroll locally however the PHP code loads it from an externally hosted source by default.
2. You’ll need to edit the PHP code and swap out the page ID’s in the code to match the page ID where you are inserting the Query Loop block then you can copy & paste the PHP code to the end of your child themes functions file.
3. Copy & paste the CSS to the end of your child themes style.css file and clear caching.
4. Copy & paste the HTML from the html.txt file into a HTML block after the Query Loop blocks pagination as seen in the following screenshot.
5. Set the Query Loop Block pagination settings to show 4 posts as seen in the following image :

Related Coded Tutorials

• Query Loop Block Tiled Posts Grid for WordPress
• Add Load More Images Button To The WP Block Gallery