Implementing Ajax Load More Pagination Without Plugin

Overview

In web development, creating smooth user experiences is crucial. Users often expect seamless navigation, especially in blogs with extensive content. Traditional pagination can disrupt this flow by reloading the entire page. However, using AJAX (Asynchronous JavaScript and XML), we can implement a “Load More” button. This feature allows users to fetch additional content without refreshing the page. In this blog post, we will demonstrate how to achieve this in WordPress, focusing on custom post types and regular blog posts.

Understanding AJAX in WordPress:

WordPress has robust support for AJAX through the admin-ajax.php file. This allows developers to handle AJAX requests effectively. By using action hooks, developers can run custom PHP functions without reloading the page. This process enhances user experience significantly.

Setting Up the Environment

Before we dive into coding, ensure your WordPress theme is prepared for AJAX. First, enqueue your scripts in the functions.php file. Additionally, create the necessary HTML structure in your theme templates for both the posts and the “Load More” button.

Creating a Custom Query

To fetch posts dynamically, we will create a custom query using WP_Query within our AJAX handler function. This query will retrieve posts based on the current page number and other parameters, such as post type or category.

//ajax load more pagination
function codebykishor_load_more_posts() {
    $paged = $_POST['page'];
    $args = array(
        '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();
            // Display your posts as needed
            // Example: echo '<h2>' . get_the_title() . '</h2>';
        endwhile;
    endif;

    wp_die();
}

add_action('wp_ajax_codebykishor_load_more_posts', 'codebykishor_load_more_posts');
add_action('wp_ajax_nopriv_codebykishor_load_more_posts', 'codebykishor_load_more_posts');

Handling AJAX Requests

In WordPress, AJAX requests utilize action hooks. We will define a custom AJAX handler function to process requests and return the fetched posts. This function is linked to wp_ajax_{action} for logged-in users and wp_ajax_nopriv_{action} for guests.

function load_more_posts() {
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    var page = 2; // Initial page number
    jQuery(document).on('click', '.loadmore', function() {
        var data = {
            'action': 'codebykishor_load_more_posts',
            'page': page,
        };
        jQuery.post(ajaxurl, data, function(response) {
            jQuery('.posts').append(response);
            page++;
        });
    });
}

Enqueuing Scripts

To ensure our AJAX functionality operates smoothly, we need to enqueue our JavaScript file. Using wp_enqueue_script(), we can add the script and localize it to pass essential data, such as the AJAX URL, to the JavaScript file.

function enqueue_load_more_script() {
    wp_enqueue_script('load-more-script', get_stylesheet_directory_uri() . '/js/load-more.js', array('jquery'), '1.0', true);
    wp_localize_script('load-more-script', 'loadmore_params', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'posts' => json_encode($query->query_vars),
        'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
        'max_page' => $query->max_num_pages
    ));
}

add_action('wp_enqueue_scripts', 'enqueue_load_more_script');

Implementing JavaScript Functionality

In our JavaScript file, we will set up the AJAX request that triggers when the “Load More” button is clicked. This request will send the current page number to the server, fetch more posts, and add them to the existing posts container on the page.

jQuery(document).ready(function($) {
    var page = 2;
    $('.loadmore').on('click', function() {
        var data = {
            'action': 'codebykishor_load_more_posts',
            'page': page,
        };
        $.post(loadmore_params.ajaxurl, data, function(response) {
            $('.posts').append(response);
            page++;
        });
    });
});

Conclusion

Implementing “Load More” pagination with AJAX in WordPress significantly enhances user experience. This method allows for seamless content loading without refreshing the page. As a result, visitors can navigate content more easily, which boosts engagement and satisfaction. With AJAX and WordPress, developers can create dynamic, interactive websites that meet modern user needs.

If you have any questions or something isn’t working as expected, please reach out to us or leave a comment below.

FAQ