Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to use this approach http://wordpress.stackexchange.com/a/56349/18144 to create a 'load more' button in the sidebar on single.php. I would like to able to load more posts in a sidebar tab after clicking the load more button.

I'm missing something, since it doesn't work. But there are no errors in the console, so I don't really know where to start.

The sidebar on single.php has the following (simplified)structure:

<aside id="sidemenu-container">

<div id="side-top">....</div>

<div id="side-tabs">
<div class="tab_container">
<div id="new" class="tab_content">
<li>...</li>
</div>
<div id="must-see" class="tab_content">
<li>...</li>
</div>

</div>


<div id="side-bottom">
<li>Up | My Fav's |<a id="#blog-more" href="#" class="button radius">Load More</a></li>
</div>


</div>
</aside>

What I've got so far:

In functions.php I've added:

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

function wpa56343_scripts() {
wp_enqueue_script(
    'wpa56343_script',
    get_template_directory_uri() . '/js/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' => 10
);
$wp_query = new WP_Query( $args );

get_template_part( 'includes/ajaxsidebar');
exit;
}

ajaxscripts.js contains:

jQuery(document).ready(function($){

$('#blog-more').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    var postoffset = 5;
    $.get(
        WPaAjax.ajaxurl,
        {
            action : 'wpa56343_more',
            postoffset : postoffset
        },
        function( response ) {
            $('#new').append( response );
        }
    );
});

});

template part ajaxsidebar contains:

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail() ?><?php the_title(); ?></a></li>
           <?php endwhile; ?>
 <?php endif; ?>
share|improve this question
    
the ID of your anchor should be id="blog-more", not id="#blog-more". –  Milo Nov 25 '13 at 16:27
    
Jeez, I'm an idiot. Totally overlooked that. Ok the load more button works now. But I have to change the original var postoffset = $('.post').length; to a number (I assume it only counts one post on single.php.). That doesn't bother me though, but is it possible to get pagination working as well? Since clicking the button only loads the same posts. –  user18144 Nov 25 '13 at 16:48
    
-oops doublepost- –  user18144 Nov 25 '13 at 16:48
    
You'd use the same method, but change it to count the number of whatever element you're inserting, so in your case something like $('#new li').length. that's really a jQuery question though. also note, your lis should be wrapped in a ol, ul, or menu to be valid html. –  Milo Nov 25 '13 at 16:53
    
You're a genius. Thanks a lot, that worked! –  user18144 Nov 25 '13 at 16:57

1 Answer 1

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="<?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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.