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

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.