Wordpress category post AJAX Pagination

Question

I'm really struggling to find a way to create pagination with ajax for my Wordpress posts. The solutions that I have found do not work.

To be more informative about this here is a link that has bullets at the bottom for pagination. Once these are clicked I want the effect of the site to load the new posts without triggering a page refresh. http://maxlynn.co.uk/natural-interaction/category/all/

My question is, is there any good tutorials out there that you may have had success with for this type of effect.

Let me know if you need more information.

****** UPDATE ******

function kriesi_pagination($pages = '', $range = 2) {
 $showitems = ($range * 2)+1;

 global $paged;
 if (empty($paged)) $paged = 1;

 if ($pages == '') {
     global $wp_query;
     $pages = $wp_query->max_num_pages;
     if (!$pages) {
         $pages = 1;
     }
 }

 if (1 != $pages) {
     echo "<div class='pagination'><div class='pagination-container'>";
     if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
     if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

     for ($i=1; $i <= $pages; $i++) {
         if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
         {
             echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
         }
     }

     if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
     if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
     echo "</div>\n</div>\n";
 }

}

This is my PHP that I'm using, how would I use this php to create an ajax request so that the page doesn't reload?

Possible duplicate of [Load More Posts Ajax Button in Wordpress](http://stackoverflow.com/questions/31587210/load-more-posts-ajax-button-in-wordpress) — dingo_d, Oct 30 '15 at 09:04

score 2 · Accepted Answer · answered Oct 30 '15 at 09:07

What you need to do is to prevent default on the pagination links, and send an AJAX request to get the posts. Wordpress works in this way for AJAX: you send all your requests to wp-admin/admin-ajax.php with an action parameter that will identify the request in order to catch it in functions.php using wp_ajax_nopriv_my_action and wp_ajax_my_action hooks.

So basically you will do this in your template file:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.pagination a').click(function(e) {
            e.preventDefault(); // don't trigger page reload
            if($(this).hasClass('active')) {
                return; // don't do anything if click on current page
            }
            $.post(
                '<?php echo admin_url('admin-ajax.php'); ?>', // get admin-ajax.php url
                {
                    action: 'ajax_pagination',
                    page: parseInt($(this).attr('data-page')), // get page number for "data-page" attribute
                    posts_per_page: <?php echo get_option('posts_per_page'); ?>
                },
                function(data) {
                    $('#content-posts').html(data); // replace posts with new one
                }
            });
        });
    });
</script>

You'll have to change classes names / attributes etc depending of your template.

And on the functions.php side:

function my_ajax_navigation() {
    $requested_page = intval($_POST['page']);
    $posts_per_page = intval($_POST['posts_per_page']) - 1;
    $posts = get_posts(array(
        'posts_per_page' => $posts_per_page,
        'offset' => $page * $posts_per_page
    ));
    foreach ($posts as $post) {
        setup_postdata( $post );
        // DISPLAY POST HERE
        // good thing to do would be to include your post template
    }
    exit;
}
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_navigation' );
add_action( 'wp_ajax_nopriv_ajax_paginationr', 'my_ajax_navigation' );

The thing is to query the posts of the page requested (so we calculate the offset from the page number and the posts per page option), and display them with the template you use for single posts.

You may want to manipulate the browser history too, for that you should check on the History API.

Thanks I will try this when I get home tonight and select your answer — Max Lynn, Oct 30 '15 at 09:09
Hi Vard, I've really confused on how to make this work. I've added my php to the question as a update. Would it be possible to give me some guidance on this please? — Max Lynn, Oct 31 '15 at 21:46
Look at the function in my answer: it get the page number from POST data, and attach it to the `wp_ajax_{nopriv}_ajax_pagination` hooks. In your code you're using `$paged`, which is wrong in this AJAX context - use POST data instead. And you need to attach your function to the hooks with `add_action`. And use `get_posts` as in my answer - in the AJAX context you can't just alter the main query as nothing is being queried. — vard, Nov 02 '15 at 08:56
Just try to use the code from my answer, replace the classes / ids / attributes names in the jQuery and add your post template in the PHP function. It should work. — vard, Nov 02 '15 at 08:59

score 1 · Answer 2 · edited Jun 26 '18 at 07:33

filter.js file

    $('#post-category').change(function(){
            category = $(this).find('.selected').text();
            postType = $('#search-form-type').val();
            post_filter();
        });


    function post_filter(paged){
            $.ajax(
                {
                    url:ajaxUrl,
                    type:"POST",
                    data: {action:"get_post_category","category":category,'search':search, 'postType':postType, 'paged': paged},
                    success: function(response) {
                    $('#blog-post-cover').html(response);
                }
            });
        }

        $('#blog-wrapper').on('click','#pagination a',function(e){
            e.preventDefault();     
            if ($(this).hasClass('prev')||$(this).hasClass('next')) {
                paginateNum = $(this).find('.prev-next').data('attr');
                post_filter(paginateNum);
            }
            else{
                paginateNum = $(this).text();
                post_filter(paginateNum);
            }
            $("html, body").animate({ scrollTop: 0 }, "slow");
        });
        postType = $('#search-form-type').val();
        post_filter(1);

function.php file

add_action( 'wp_ajax_nopriv_get_post_category', 'post_category' );
add_action( 'wp_ajax_get_post_category', 'post_category' );   
function post_category() {
    $post_type = $_POST['postType'];      
    $category = $_POST['category'];
    $search = $_POST['search'];
    $paged = ($_POST['paged'])? $_POST['paged'] : 1;
    if($post_type==="resource-center"):
        $taxonomy ="resource-center-taxonomy";
    else:
        $taxonomy ="category";
    endif;
    if($category):
        $args = array(
            'post_type'         => $post_type,
            'post_status'       => 'publish',
            'tax_query' => array(
                array(
                    'taxonomy' => $taxonomy,
                    'field'    => 'slug',
                    'terms'    => $category,
                ),
            ),
            'posts_per_page'    => 5,
            'order'             => 'ASC',
            's'                 => $search,
            'paged'             => $paged
        );
    else:
        $args = array(
            'post_type'         => $post_type,
            'post_status'       => 'publish',
            'posts_per_page'    => 5,
            'order'             => 'ASC',
            's'                 => $search,
            'paged'             => $paged
        );
    endif;

    $posts = new WP_Query($args);?>
    <?php if ( $posts->have_posts() ) :?>
        <?php while ($posts->have_posts()) : $posts->the_post(); ?>
    <?php echo $post->post_title; ?>
        <?php endwhile;?>
        <?php
            $nextpage = $paged+1;
            $prevouspage = $paged-1;
            $total = $posts->max_num_pages;
            $pagination_args = array(
            'base'               => '%_%',
            'format'             => '?paged=%#%',
            'total'              => $total,
            'current'            => $paged,
            'show_all'           => false,
            'end_size'           => 1,
            'mid_size'           => 2,
            'prev_next'          => true,
            'prev_text'       => __('<span class="prev-next" data-attr="'.$prevouspage.'">&laquo;</span>'),
            'next_text'       => __('<span class="prev-next" data-attr="'.$nextpage.'">&raquo;</span>'),
            'type'               => 'plain',
            'add_args'           => false,
            'add_fragment'       => '',
            'before_page_number' => '',
            'after_page_number'  => ''
        );
        $paginate_links = paginate_links($pagination_args);

        if ($paginate_links) {
            echo "<div id='pagination' class='pagination'>";
            echo $paginate_links;
            echo "</div>";
        }?>
        <?php wp_reset_query();  ?>
    <?php else:?>           
       <div class="no-post-cover">
            <div class="container">         
               <h1 class="has-no-post-list">Posts Not Found</h1>
            </div>
        </div>
   <?php endif;?>         
   <?php die(1);
}

Thanks but this question was answered some time ago. May you give me an explanation on why your code might be a better way of doing things? — Max Lynn, Apr 25 '16 at 09:05

Wordpress category post AJAX Pagination

2 Answers2

Linked