Load more posts (Ajax) in tabbed sidebar on single.php

Question

For anyone that comes across this as I did via the Googlez, I was trying to load new articles onto the bottom of a single.php page (infinite scroll).

I discovered that by adding an increment to the “offset” value, and then using $.post() instead of $.get(), I was able to do this.

Following the code outlined above (and the subsequent change), I pulled it off like so, with basic post implementation (just the title) that I will fix later:

in functions.php:

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );

function wpa56343_scripts() {
    wp_enqueue_script(
        'wpa56343_script',
        get_template_directory_uri() . '/javascripts/ajaxscripts.js?ver=1.0',
        array( 'jquery' ),
        null,
        false
    );
    wp_localize_script(
        'wpa56343_script',
        'WPaAjax',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        )
    );
}

add_action('wp_ajax_wpa56343_more', 'wpa56343_more');
add_action('wp_ajax_nopriv_wpa56343_more', 'wpa56343_more');

function wpa56343_more(){
    global $wp_query;

    $offset = $_POST['postoffset'];

    $args = array(
        'offset' => $offset,
        'posts_per_page' => 1
    );
    $wp_query = new WP_Query( $args );

    get_template_part( 'recent-posts');
    exit;
    }

in ajaxscripts.js

jQuery(document).ready(function($){
var postoffset = 0;
$('#blog-more').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    postoffset = postoffset + 1;
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'wpa56343_more',
            postoffset : postoffset,
        },
        function( response ) {
            //alert(response);
            $('#new').append( response );
        }
    );
});

});

in recentposts.php

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<a href="https://wordpress.stackexchange.com/questions/124424/<?php the_permalink() ?>" rel="bookmark"><?php //the_post_thumbnail() ?><?php the_title(); ?></a><br>
           <?php endwhile; ?>
 <?php endif; ?>

I will change the “onclick” to a “when you reach the top of the page, but with the hard part over, that is child’s play.

Thanks to the original poster for his work and the commenters for theirs.

Related Posts: