Numbered pagination sends a reader to a new page. That means a fresh request, a fresh render, and a wait. Many of them never click page two at all.<\/p>\n
AJAX load more fixes that. Posts arrive underneath the ones already on screen. Nothing reloads and the reader stays where they were. Infinite scroll does the same thing, but it fires on its own as the reader nears the bottom.<\/p>\n
This guide shows you how to build both from scratch. You get the PHP, the JavaScript, and the exact files each part belongs in. Everything here works on current WordPress releases in 2026.<\/p>\n
The idea is simple once you see the shape of it. Your page loads the first batch of posts as normal. A button sits below them. When it is clicked, the browser asks the server for the next batch and drops the HTML into the page.<\/p>\n
WordPress gives you a built-in endpoint for this. It lives at There are three moving parts. First, a PHP handler that runs a query and returns markup. Second, a JavaScript file that calls the handler. Third, the data that connects them, such as the endpoint URL, the current page number, and a security token.<\/p>\n You also need to know how many pages exist. WordPress stores this on the main query object as The whole flow takes about sixty lines of code. Once it works for posts, the same pattern works for any custom post type.<\/p>\n Your JavaScript cannot guess the AJAX URL or the nonce. You have to hand those over from PHP. WordPress does this with Add this to your child theme The dependency array names Look at what goes into the data object. The Two mistakes are common here. Calling If jQuery is missing on your site, the console will show an error. Our guide to fixing the WordPress jQuery is not defined error<\/a> covers that case.<\/p>\n The handler is the piece that does the real work. It reads the requested page number, runs a query, and prints the post markup.<\/p>\n WordPress needs two hooks for this. The Every line here matters. The Notice the Keep Now connect the button to the handler. The script tracks which page it is on, asks for the next one, and appends what comes back.<\/p>\n Walk through the logic. The The The last block hides the button once the final page arrives. Readers should never click a button that does nothing. If you skip this, the button stays forever and returns empty responses.<\/p>\n The container selector needs to match your theme. Open the page, right click a post, and choose Inspect. Find the element that wraps all the posts and use its class or ID.<\/p>\n Infinite scroll is the same request with a different trigger. Instead of waiting for a click, you watch the reader position and fire when they get close to the end.<\/p>\n The old way was to listen to the scroll event and measure offsets. That runs hundreds of times a second and makes the page feel heavy. Modern browsers give you a better tool called Put an empty div below your posts and let the browser tell you when it comes into view.<\/p>\n The There is a real trade-off here. Infinite scroll hides your footer, which is where contact links and legal pages usually live. It also breaks the browser back button on many themes.<\/p>\n A hybrid works best for most sites. Auto-load the first two or three batches, then show a button. Readers get the smooth feel without losing the footer.<\/p>\n Code placement decides whether your work survives the next update. There are three sensible homes and one common mistake.<\/p>\n The mistake is editing the For the PHP, a small plugin is the cleanest option. Create a folder at For the JavaScript, create a Never paste PHP into a widget or the post editor. It will not run and it may print raw code to your visitors. Edit these files over SFTP rather than the built-in editor, because a single typo there can lock you out of the admin area.<\/p>\n Test in a private window first. Logged-in behaviour and visitor behaviour go through different hooks, and a button that works for you may fail for everyone else.<\/p>\n Open your browser tools and go to the Network tab. Click load more and watch for a request to admin-ajax.php. What you see there tells you exactly what is wrong.<\/p>\n A 400 response almost always means the nonce failed or the action name does not match. Check the spelling on both sides. A 403 usually means a security plugin is blocking the endpoint for visitors. If you hit a 400, we have a full walkthrough of the admin-ajax.php 400 bad request error<\/a>.<\/p>\n A response of A 200 response with empty content usually means the query ran out of posts. Log the page number and compare it with Caching causes the strangest bugs. A full page cache can serve an old version of your page with stale nonce data, which makes the first click fail and later clicks work. Exclude admin-ajax.php from caching and clear everything before you test again.<\/p>\n Loading more posts is only a win if the page stays quick. A few habits keep it that way.<\/p>\n Send only the fields you need. If your query does not use taxonomy terms or custom fields, set Watch your images. Twenty extra posts means twenty extra images, and browsers will fetch them all at once without help. Native lazy loading solves this, and our guide on enabling or disabling WordPress lazy loading<\/a> covers the settings.<\/p>\n Search engines need a path to every post. Crawlers do not scroll and they do not click buttons. Keep real paginated URLs such as If you would rather skip admin-ajax.php altogether, the REST API is a faster route for read requests. It skips much of the admin bootstrap, so responses come back sooner. Our guide to the WordPress REST API<\/a> explains the endpoints.<\/p>\n Finally, add a visible loading state. A spinner or a simple word tells the reader something is happening. Without it, a slow connection just looks broken.<\/p>\n Everything above depends on one thing: getting the right posts for the right page. That is the job of The You can filter this query as tightly as you like. Add a category, a tag, a post type, or a meta comparison. The load more logic does not change at all, because it only ever increments a number.<\/p>\n Use wp-admin\/admin-ajax.php<\/code>. Every AJAX request you make goes there, and WordPress routes it based on an action name you send along.<\/p>\nmax_num_pages<\/code>. Without it, your button keeps asking for posts that are not there.<\/p>\nStep 1: Register Your Script and Pass Data to It<\/h2>\n
wp_localize_script<\/code>.<\/p>\nfunctions.php<\/code> file. It loads a script and attaches a small data object to it.<\/p>\nadd_action( 'wp_enqueue_scripts', 'wps_load_more_assets' );\r\nfunction wps_load_more_assets() {\r\n global $wp_query;\r\n\r\n wp_enqueue_script(\r\n 'wps-load-more',\r\n get_stylesheet_directory_uri() . '\/js\/load-more.js',\r\n array( 'jquery' ),\r\n '1.0',\r\n true\r\n );\r\n\r\n wp_localize_script( 'wps-load-more', 'wpLoadMore', array(\r\n 'ajaxurl' => admin_url( 'admin-ajax.php' ),\r\n 'nonce' => wp_create_nonce( 'wps_load_more' ),\r\n 'startPage' => 1,\r\n 'maxPages' => $wp_query->max_num_pages,\r\n ) );\r\n}<\/code><\/pre>\njquery<\/code>, so WordPress loads jQuery first. The true<\/code> at the end puts your script in the footer, which stops it blocking the initial render.<\/p>\najaxurl<\/code> value comes from admin_url<\/code> and points at admin-ajax.php. The nonce is a one-time token that proves the request came from your site. The startPage<\/code> begins at one because page one is already on screen. The maxPages<\/code> value comes from the global query.<\/p>\nwp_localize_script<\/code> before wp_enqueue_script<\/code> does nothing, because there is no handle to attach data to yet. And running this outside the wp_enqueue_scripts<\/code> hook means it never fires. Get both right and your JavaScript will find a global object named wpLoadMore<\/code>.<\/p>\nStep 2: Write the PHP Handler That Returns Posts<\/h2>\n
wp_ajax_<\/code> hook covers logged-in users. The wp_ajax_nopriv_<\/code> hook covers everyone else. Register the same callback on both or your button will silently fail for visitors.<\/p>\nadd_action( 'wp_ajax_wps_load_more', 'wps_load_more_handler' );\r\nadd_action( 'wp_ajax_nopriv_wps_load_more', 'wps_load_more_handler' );\r\n\r\nfunction wps_load_more_handler() {\r\n check_ajax_referer( 'wps_load_more', 'nonce' );\r\n\r\n $paged = isset( $_POST['page'] ) ? intval( $_POST['page'] ) : 1;\r\n\r\n $q = new WP_Query( array(\r\n 'post_type' => 'post',\r\n 'post_status' => 'publish',\r\n 'posts_per_page' => 10,\r\n 'paged' => $paged,\r\n ) );\r\n\r\n if ( $q->have_posts() ) {\r\n while ( $q->have_posts() ) {\r\n $q->the_post();\r\n get_template_part( 'template-parts\/content', 'excerpt' );\r\n }\r\n }\r\n\r\n wp_reset_postdata();\r\n wp_die();\r\n}<\/code><\/pre>\ncheck_ajax_referer<\/code> call validates the nonce and stops the request if it fails. The intval<\/code> on the page value blocks anyone from injecting something odd. The wp_reset_postdata<\/code> call restores the main query so the rest of the page still behaves.<\/p>\nwp_die<\/code> at the end. Without it, WordPress appends a zero to your response and your markup arrives with a stray character on the end.<\/p>\nposts_per_page<\/code> the same as your Settings \u2192 Reading<\/em> value. If the two disagree, your pages will overlap or skip posts. Ten is a sensible default and keeps each response small.<\/p>\nStep 3: Add the JavaScript That Fetches the Next Batch<\/h2>\n
jQuery(function ($) {\r\n var page = wpLoadMore.startPage;\r\n var loading = false;\r\n\r\n $('#wps-load-more').on('click', function () {\r\n if (loading || page >= wpLoadMore.maxPages) { return; }\r\n loading = true;\r\n page++;\r\n\r\n $.post(wpLoadMore.ajaxurl, {\r\n action: 'wps_load_more',\r\n nonce: wpLoadMore.nonce,\r\n page: page\r\n }, function (html) {\r\n $('#wps-posts').append(html);\r\n loading = false;\r\n if (page >= wpLoadMore.maxPages) {\r\n $('#wps-load-more').hide();\r\n }\r\n });\r\n });\r\n});<\/code><\/pre>\nloading<\/code> flag stops a double click from firing two requests. The page counter goes up before the request so the server knows what to send. The action value must match the string in your PHP hook name exactly, or WordPress will not know which function to run.<\/p>\nappend<\/code> call adds the new HTML after the existing posts. Using html<\/code> instead would wipe out what is already there.<\/p>\nStep 4: Turn the Button Into True Infinite Scroll<\/h2>\n
IntersectionObserver<\/code>.<\/p>\nvar sentinel = document.querySelector('#wps-sentinel');\r\n\r\nvar observer = new IntersectionObserver(function (entries) {\r\n if (entries[0].isIntersecting) {\r\n jQuery('#wps-load-more').trigger('click');\r\n }\r\n}, { rootMargin: '400px' });\r\n\r\nif (sentinel) { observer.observe(sentinel); }<\/code><\/pre>\nrootMargin<\/code> value is the important part. Setting it to 400px means the request starts while the sentinel is still four hundred pixels below the viewport. Posts are usually ready by the time the reader arrives, so the page never appears to stall.<\/p>\nWhere to Put Each Piece of Code Safely<\/h2>\n
functions.php<\/code> file of a parent theme. The next theme update erases it and your load more button disappears. If you want to use a theme file, set up a child theme first. Our guide on what a WordPress child theme is<\/a> walks through it in a few minutes.<\/p>\nwp-content\/plugins\/ajax-load-more<\/code>, add a PHP file inside it, and give it a plugin header comment. Activate it from the Plugins screen. Now the feature is independent of your theme entirely.<\/p>\njs<\/code> folder inside your child theme and save the file as load-more.js<\/code>. That path has to match the one in your enqueue call exactly, or the browser will request a file that does not exist.<\/p>\nTesting, Debugging and Common Failures<\/h2>\n
0<\/code> means WordPress found no handler for your action. You either forgot the nopriv hook or misspelled the action string.<\/p>\nmax_num_pages<\/code>.<\/p>\nKeeping It Fast and Search Friendly<\/h2>\n
update_post_term_cache<\/code> and update_post_meta_cache<\/code> to false. On a large site this removes several database queries per request.<\/p>\n\/page\/2\/<\/code> working underneath your AJAX layer, and make sure your sitemap lists every post.<\/p>\nUnderstanding the Query Behind It All<\/h2>\n
WP_Query<\/code> and the paged<\/code> argument.<\/p>\npaged<\/code> value tells WordPress which slice of results you want. Pass 2 with ten posts per page and you get posts eleven through twenty. Pass nothing and you always get the first ten, which is why a broken counter shows the same posts over and over.<\/p>\nmax_num_pages<\/code> rather than counting posts yourself. WordPress calculates it from the total found rows and your per page setting, so it stays correct even as you publish more.<\/p>\n