Fetching more posts in Wordpress via AJAX

I ended up modifying the archive.php file to serve different content when requested normally and via ajax.

if ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')) {
    $response = array();
    $response['posts'] = '';
    if (have_posts()) {
        ob_start();
        while (have_posts()) {
            the_post();
            get_template_part('content');
        }
        $response['posts'] .= ob_get_clean();
    } else {
        //no posts
        $response['posts'] .= 'nothing';
    }
    echo json_encode($response);
} else {    
    //normal template code here
}

After that, getting items via JS is easy:

$.ajax ({
    type: "GET",
    url: more_ajax_url,
    data: {},
    dataType: 'json',
    success: function (result) {
        $('#archive_container').append(result.items);
    }
});

There is also some code to pass the link to the next page, but that should not be hard to implement.

The advantage of this method is that the request is fully processed by wordpress and all its filters and actions. And it is much better than the $.load, because no unnecessary data is passed from the server.

Related Posts: