How to Implement an AJAX \'Load More Posts\' Feature in WordPress?

How to Implement an AJAX "Load More Posts" Feature in WordPress

This article addresses the issue of implementing an AJAX "Load More Posts" feature in WordPress, which allows users to dynamically load additional posts on a webpage without having to reload the entire page.

Problem Statement

The user encountered difficulties while attempting to implement this feature using various methods, including the one mentioned in the "Pagination on a Custom WP_Query Ajax" post.

Solution

The solution provided focuses on improving the code to ensure proper functionality. The key aspects include:

1. Server-Side Code

• In the template file, ensure that the initial post query returns the desired number of posts per page.
• In the functions file, create a function to handle the AJAX request and dynamically load more posts. The function should include pagination logic to retrieve the correct set of posts.

2. Client-Side Code (jQuery)

• On the client-side, bind an event listener to the "Load More" button.
• When the button is clicked, send an AJAX request to the server-side function using jQuery.
• Pass necessary parameters like the offset and number of posts per page.
• Append the returned HTML to the existing posts list.

3. Additional Considerations

• Handle the case of no more posts to load by disabling the "Load More" button.
• To create an "infinite load" effect, use window scrolling instead of button click events.

Code Implementation

Follow the provided code snippets to implement the solution:

functions.php:

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script.js:

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

Note: Replace 'path/to/wp-admin/admin-ajax.php' with the actual URL to your WordPress admin-ajax.php file.

Conclusion

By following these steps, you can effectively implement an AJAX "Load More Posts" feature for your WordPress site, allowing users to seamlessly browse through large amounts of content without having to refresh the entire page.

The above is the detailed content of How to Implement an AJAX \'Load More Posts\' Feature in WordPress?. For more information, please follow other related articles on the PHP Chinese website!