WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have integrated an AJAX Pagination in my site sidebar, where I'm showing custom post type.

Here is my code:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$new_query = new WP_Query();

<ul id="content-sidet">
<?php if ($new_query->have_posts()) : while ($new_query->have_posts()) : $new_query->the_post(); ?>

<?php  if(has_post_thumbnail()){
$c_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'scroller-thumb');

        // $map_bubble=get_the_title($post->ID);
        <li class="home-list">
            <div style="padding:10px 0px 10px 10px;">
                <div style="float:left; width:60px; height:60px; overflow:hidden; margin-right:5px;">
                    <img src="<?php echo $c_image[0];?>" alt="<?php the_title();?>">
                <div style="float:right; color:#fff;width:200px;padding-top:5px;">
                    <a href="<?php the_permalink();?>" title="<?php the_title();?>"/><strong><?php the_title();?></strong></a><br/>
                    <b>Address:</b> <?php echo $kstoreStreet;?> | <?php echo $kstoreCity;?> <br/>
                    <?php if( ( $et_rating = et_get_rating() ) && 0 != $et_rating ) : ?>
                    <span class="et-rating"><span style="<?php printf( 'width: %dpx;', esc_attr( $et_rating * 17 ) ); ?>"></span></span>
                    <?php endif; ?>

                <div class="clear"></div>

            <?php endwhile; //endwhile 
                                 wp_reset_query(); ?>

    <div style="clear:both;"></div>
 <div class="outer-submit">
<?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?><br/>
<?php previous_posts_link('Newer Entries &raquo;') ?>
<!-- #nav-below -->


The query works perfectly and I can see 4 posts in the side bar with a navigation to Previous Posts. I want to make this Previous ad Next link an AJAX link so that the <ul> element shows 4 new posts without whole page refresh ( I'm writing above code in sidebar)

My javascript is as follows:

jQuery(function($) {
$('#content-sidet').on('click', '.outer-submit a', function(e){
    var link = $(this).attr('href');
    $('#content-sidet').fadeOut(500, function(){
        $(this).load(link + ' #content-sidet').fadeIn(500);

When I click the Previous/Next Links I can see a fadeout , but the same old posts load. What I mean is posts on initial page.

Can someone guide me in pointing out, what am I doing wrong here?

share|improve this question
Can any one guide me? – user3170139 Feb 3 '14 at 8:07
If you use chrome or firefox you can use the developer tools to see what values the ajax file is returning. – gdaniel Feb 3 '14 at 17:00
Got it working. There was a possible conflict with a jQuery Toggle script. Thanks! – user3170139 Feb 4 '14 at 6:13

Your Answer


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

Browse other questions tagged or ask your own question.