Post category Wordpress AJAX Pagination

Question

I am really trying to find a way to create pagination using ajax for my Wordpress posts. The solutions I found do not work.

To be more informative about this, there is a link here that has bullets at the bottom for pagination. As soon as they are clicked, I want the site to download new messages without starting a page refresh. http://maxlynn.co.uk/natural-interaction/category/all/

My question is, are there any good textbooks that may have been successful for such an 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 use, how to use this php to create an ajax request so that the page does not reload?

Answer 1

What you need to do is to prevent the default page links and send an AJAX request to receive messages. Wordpress works 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 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 will need to change the names / attributes of the classes, etc. depending on 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 point is to request the messages of the requested page (therefore, we calculate the offset from the page number and the post parameter on the page) and display them using the template that you use for individual messages.

You might also want to manipulate your browser history, for this you should check the history API .

Answer 2

 filter.js $('#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 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); }