How to Create a “Load More Posts” Feature in WordPress Using PHP & AJAX (No Plugin)

One of the best ways to improve user experience and engagement on your blog or archive page is by replacing traditional pagination with a smooth “Load More Posts” button. This keeps users scrolling without refreshing the page, and helps reduce bounce rates.

In this tutorial, you’ll learn how to implement a fully functional Load More button in your WordPress theme using pure PHP and AJAX, with no plugins required.

Why Use “Load More” Instead of Pagination?

Pagination requires a full page reload for each navigation. In contrast, a “Load More” button loads additional posts dynamically via AJAX, providing:

• Better user experience (especially on mobile)
• Faster content access
• Lower bounce rates
• Smoother UI/UX for blogs, shops, and portfolio sites
• Higher chances users consume more content (good for SEO & Ads)

Step-by-Step Guide to Add Load More Posts in WordPress

Step 1: Display Initial Posts and Add the Load More Button

In your theme’s index.php, archive.php, or custom template file (like home.php), replace your default loop with:

<?php
$args = [
  'post_type' => 'post',
  'posts_per_page' => 5,
];
$query = new WP_Query($args);

if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post();
    get_template_part('template-parts/content', get_post_format());
  endwhile;
endif;

wp_reset_postdata();
?>Code language: HTML, XML (xml)

Make sure your theme has template-parts/content.php or the correct format file.

Step 2: Enqueue JavaScript for AJAX

In your functions.php, enqueue a custom JavaScript file:

function webfixguide_enqueue_loadmore_script() {
    wp_enqueue_script('loadmore-js', get_template_directory_uri().
        '/js/loadmore.js', ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', 'webfixguide_enqueue_loadmore_script');Code language: JavaScript (javascript)

In file /js/loadmore.js write code:

jQuery(document).ready(function($) {
    $('#load-more').on('click', function() {
        let button = $(this),
            page = button.data('page'),
            ajaxurl = button.data('url');

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'load_more',
                page: page
            },
            beforeSend: function() {
                button.text('Loading...');
            },
            success: function(res) {
                $('#posts-wrapper').append(res);
                button.data('page', page + 1);
                button.text('Load More Posts');

                if (!res.trim()) {
                    button.remove(); // No more posts to load
                }
            }
        });
    });
});Code language: JavaScript (javascript)

Step 3: Handle AJAX Request in PHP

Add this code to your functions.php to handle the AJAX logic:

function webfixguide_ajax_load_more() {
    $paged = $_POST['page'] + 1;

    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $paged,
    ];

    $query = new WP_Query($args);

    if ($query - > have_posts()):
        while ($query - > have_posts()): $query - > the_post();
    get_template_part('template-parts/content', get_post_format());
    endwhile;
    endif;

    wp_die(); // Required to terminate AJAX request properly
}
add_action('wp_ajax_load_more', 'webfixguide_ajax_load_more');
add_action('wp_ajax_nopriv_load_more', 'webfixguide_ajax_load_more');Code language: PHP (php)

Optional: Style the Load More Button

You can add this CSS to your style.css for a cleaner look:

#load-more {
    background-color: #41C9C9;
    color: # fff;
    padding: 12 px 20 px;
    font-size: 16 px;
    border: none;
    margin-top: 30 px;
    cursor: pointer;
    border-radius: 4 px;
}

#load-more: hover {
    background-color: #38b3b3;
}Code language: CSS (css)

SEO Tips for Load More Functionality

• Ensure all posts are accessible via paginated URLs as fallback (Googlebot doesn’t execute JS)
• Use rel=”next” and rel=”prev” on paginated pages for better indexing
• Use progressive enhancement: Load initial content via PHP, then load more via JS
• Avoid loading too many posts at once — it can affect performance

Conclusion

Creating a “Load More Posts” button in WordPress without a plugin is easier than you think — and it leads to a smoother, more modern browsing experience. By using AJAX and a few lines of code, you can give your site a performance and UX boost while keeping everything lightweight and developer-friendly.

You now have full control over how your content loads — and users will thank you for it.