Following are the procedure to achieve it :
1. HTML

<a href="javascript:void(0);"  onClick="filter_posts_by_category('cat1', 1)">cat1</a>
<a href="javascript:void(0);"  onClick="filter_posts_by_category('cat2', 1)">cat2</a>
<a href="javascript:void(0);"  onClick="filter_posts_by_category('cat3', 1)">cat3</a>
<a href="javascript:void(0);"  onClick="filter_posts_by_category('all', 1)">all</a>

Note : Here filter_posts_by_category(‘cat1’, 1) cat1 is slug of the category.

2. JS

<script type="text/javascript">
    jQuery(document).ready(function(){
       
       
        filter_posts_by_category('all', 1);
       
    });
   
   
    var filter_posts_by_category = function(cat_slug, paged){
        var ajax_url = window.location.protocol + "//" + window.location.host +'/wp-admin/admin-ajax.php';
       
        var total_posts = -1; // -1 for show all posts
       
        var data = {
            'action'    : 'filter_posts_by_category',
            'cat_slug'    : cat_slug,
            'posts'        : total_posts,
            'paged'        : paged,
        };
       
        jQuery.ajax({
            method:"POST",
            url: ajax_url,
            data: data,
            beforeSend : function(){
                // functionality to select unselect category
                jQuery('.filter_icon').each(function(){
                    jQuery(this).removeClass('selected_cat');
                });
               
                jQuery('.'+cat_slug).addClass('selected_cat');
               
                // function to set calender icon url to another location
                setCalenderUrl(cat_slug);
               
                jQuery('#post_filtered').html('<p style="text-align:center"><img class="img_loader" src="' + window.location.protocol + '//' + window.location.host + '/images/postloading.gif" /></p>');
            },
            success: function(result){
                jQuery('#post_filtered').html(result);
            },
            error: function(xhr,status,error){
                // console.log(error);
            }
        });
    }
   
    </script>

3. PHP

<?php
add_action('wp_ajax_filter_posts_by_category', 'ajax_filter_posts_by_category');
add_action('wp_ajax_nopriv_filter_posts_by_category', 'ajax_filter_posts_by_category');   
   
function ajax_filter_posts_by_category(){
    $terms = isset($_POST['cat_slug']) && !empty($_POST['cat_slug']) ? $_POST['cat_slug'] : 'all';
    $paged = $_POST['paged'];
    $posts = $_POST['posts'];
   
    $wp_query = null;
    $wp_query = new WP_Query();
   
    if($terms != 'all'){
      $args = array(
                      'post_type' => 'cours',
                      'showposts'=>$posts,
                      'paged'=>$paged,
                      'tax_query' => array(
                          array(
                              'taxonomy' => 'cours_category',
                              'field'    => 'slug',
                              'terms'    => $terms
                          )
                      ),
                                          'order'=>'asc',
                                          'orderby'=>'title',
                  );
    }
    else{
        $args = array(
                      'post_type' => 'cours',
                      'showposts'=>$posts,
                                  'paged'=>$paged,
                                          'order'=>'asc',
                                          'orderby'=>'title',
                   
                  );
    }
   
     
    $wp_query->query($args);

    $counter = 1;
    while ($wp_query->have_posts()) : $wp_query->the_post();
      global $post;
     // var_dump($post);
?>   
     <?php echo $post->post_title;  ?>
<?php

    endwhile;


    // Set up next and prev links
    $this_page = $wp_query->get('paged');
    $max_page = $wp_query->max_num_pages;
    if ($this_page > 1) {
      echo '<a class="filtered-posts-newer" href="javascript:void(0);" onClick="filter_posts_by_category(\''.$terms.'\','.($this_page - 1).');">Newer posts</a> &nbsp; &nbsp;';
    }
    if ($this_page < $max_page) {
      echo '<a class="filtered-posts-older" href="javascript:void(0);" onClick="filter_posts_by_category(\''.$terms.'\','.($this_page + 1).');">Older posts</a>';
    }
    echo "</nav>";
   
    die();
}
?>

Note : Here “course” is my custom post type and “course_category” is my custom taxonomy.

Share

The post Filter / Sort post by categories using Ajax in WordPress. appeared first on Blog.