Typically, when there are many posts on a WordPress archive page, pagination is used (1, 2, 3, 4…). In this article, we introduce a method to implement infinite scrolling on a post archive page using a “Load More” button without pagination.
Files Required to Implement Infinite Scroll with “Load More”
- archive.php: Post list page
- functions.php: Handles the initial post load and AJAX processing when the “Load More” button is clicked
- Load the jQuery (3.5.1) file
- archive.js: Handles the AJAX processing when “Load More” is clicked on the archive page
archive.php: Post List Page
Below is the structure of the post list page. First, we get the total number of posts and display each post (link, thumbnail, title, date). If the total post count exceeds the defined threshold (20 in this case), the “Load More” button is displayed.
functions.php: Handling Initial Load and AJAX on “Load More” Click
Add the necessary logic to handle the initial load of posts and the AJAX request triggered by the “Load More” button.
Loading jQuery (3.5.1) File
Since we are using $.ajax, make sure to include the jquery.min.js file.
archive.js: AJAX Processing on “Load More” Click
Load the archive.js file to handle the AJAX process when “Load More” is clicked. (Replace “xxxxx” with your theme folder name)
Below is the content of archive.js. While loading, a loading.gif image is displayed. You can find free loading gif images from websites like
Free Loading Images / LOADING GIF / CSS-only Animations or others.
※ Use this code at your own risk.
Please do not reuse the Google Analytics tag in the demo page’s head section.
