Quality Website design & Development Services

Hand-coded development for conversion into Wordpress

WordPress multiple Taxonomy Filter with Ajax

Efficient technique to develop a Wordpress taxonomy filter with Ajax.

In our example, we have used a custom post type and different taxonomies. The following codes are successfully working. You can use this code on post, page or custom posts.

 

Step 1: Lets create a custom post type and different taxonomies with it. You can do it easily by using the plugin “CUSTOM POST TYPE UI” . If you are using woocommerce then want to apply filter on the products , that are in different taxonomies, then no need to install CPT-UI. In this example we are using product (it is a custom post type in wordpress).

 

Step 2: Add some posts and assign different taxonomy with it. Here we have used brand, type, style, etc.

 

Step 3: Get all the taxonomies . For example , to show a style taxonomy : Do this on your front page template. Where we will handle clicks on different check-boxes to show the filtered products. 

 

<?php
$style = array(
  'taxonomy'=>'style',
  'child_of'=> 0,'parent'=> 0,
  'orderby'=> 'name',
  'show_count'=> 0,
  'pad_counts'=> 0,
  'hierarchical' => 0,
  'title_li'=> '',
  'hide_empty'=> 0
);
$styles = get_categories( $style );
?>
<!--loop through the style and show it in a checkbox -->
<?php foreach($styles as $br){ ?>
 <span>
    <input name="<?php echo $br->term_id; ?>" type="checkbox"><?php echo $br->cat_name; ?>
 </span>
<?php } ?>

 

Step 4:  jQuery code for handling clicks on check-boxes : 

  •  – Listen the clicks on WordPress taxonomy
  •  – Collect data, which taxonomy is selected
  •  – Call Ajax and show the filtered products.

 

// This function will be called on click event.
var ff=function() {

  //initialize all the variables to be used as an empty array.
  jQuery('.all_prod').html("");
  var brand=[];
  var type=[];
  var style=[];
  var fit=[];
  var term_id=jQuery('#cat_id').text();

  //loop through all the separated filter's checked check boxes, take the taxonomy id and push it into empty array 
  jQuery(".brand_filter input:checked").each(function(){
    var brand_id=jQuery(this).attr('name');
    brand.push(brand_id);
  });

  jQuery(".type_filter input:checked").each(function(){
    var type_id=jQuery(this).attr('name');
    type.push(type_id);
  });
  jQuery(".style_filter input:checked").each(function(){
    var style_id=jQuery(this).attr('name');
    style.push(style_id);
  });
  jQuery(".fit_filter input:checked").each(function(){
    var fit_id=jQuery(this).attr('name');
    fit.push(fit_id);
  });

  //collect all the data.
  var data={
    'filter':1,
    'term_id':term_id,
    'brand':brand,
    'type':type,
    'style':style,
    'fit':fit
  }
  //Ajax url
  var url="<?php bloginfo('url'); ?>/ajax";

  jQuery.post(url,data,function(data){
    jQuery('.all_prod').append(data);
  });
}

 

Step 5: Working with  the Ajax file:

 

<?php if(isset($_POST['filter'])){ ?>
 <?php 
   $brand=array();
   $type=array();
   $style=array();
   $fit=array();
   $cat_term=$_POST['term_id'];

   $brand_arg = array(
    'taxonomy'=>'brand',
    'child_of'=> 0,
    'parent'=> 0,
    'orderby'=> 'name',
    'show_count'=> 0,
    'pad_counts'=> 0,
    'hierarchical' => 0,
    'title_li'=> '',
    'hide_empty'=> 0
   );
  $brands = get_categories( $brand_arg );
 
  $type_arg = array(
    'taxonomy'=>'type',
    'child_of'=> 0,
    'parent'=> 0,
    'orderby'=> 'name',
    'show_count'=> 0,
    'pad_counts'=> 0,
    'hierarchical' => 0,
    'title_li'=> '',
    'hide_empty'=> 0
   );
  $types = get_categories( $type_arg );

  $fit_arg = array(
    'taxonomy'=>'fit',
    'child_of'=> 0,
    'parent'=> 0,
    'orderby'=> 'name',
    'show_count'=> 0,
    'pad_counts'=> 0,
    'hierarchical' => 0,
    'title_li'=> '',
    'hide_empty'=> 0
   );
  $fits = get_categories( $fit_arg );

  $style_arg = array(
    'taxonomy'=>'style',
    'child_of'=> 0,
    'parent'=> 0,
    'orderby'=> 'name',
    'show_count'=> 0,
    'pad_counts'=> 0,
    'hierarchical' => 0,
    'title_li'=> '',
    'hide_empty'=> 0
  );
 $styles = get_categories( $style_arg );
 
 
 //if brand is empty then choose all the brands
 if(count($_POST['brand'])==0){
   foreach($brands as $a){
     array_push($brand,$a->term_id);
   }
 }
 if(count($_POST['brand'])!=0){
   $brand=$_POST['brand'];
 }
 
 //if type is empty choose all the types
 if(count($_POST['type'])==0){
   foreach($types as $a){
     array_push($type,$a->term_id);
   }
 }
 if(count($_POST['type'])!=0){
  $type=$_POST['type'];
 }
 
 //if style is empty choose all the styles
 if(count($_POST['style'])==0){
   foreach($styles as $a){
     array_push($style,$a->term_id);
   }
 }
 if(count($_POST['style'])!=0){
   $style=$_POST['style'];
 }
 
 //if fit is empty choose all the fits
 if(count($_POST['fit'])==0){
   foreach($fits as $a){
     array_push($fit,$a->term_id);
   }
 }
 if(count($_POST['fit'])!=0){
   $fit=$_POST['fit'];
 }
 $filter_set=true;
 ?>
 <!-- if filter set -->
 <?php if($filter_set){ ?>
 
 <?php 
   $args=array(
    'post_type'=>'product',
    'tax_query' => array(
    'relation' => 'AND',
       array(
         'taxonomy' => 'product_cat',
         'field' => 'term_id',
         'terms' => array($cat_term),
         'operator' => 'IN'
       ),
       array(
         'taxonomy' => 'brand',
         'field' => 'term_id',
         'terms' => $brand,
         'operator' => 'IN'
       ),
       array(
         'taxonomy' => 'type',
         'field' => 'term_id',
         'terms' => $type,
         'operator' => 'IN'
       ),
       array(
         'taxonomy' => 'style',
         'field' => 'term_id',
         'terms' => $style,
         'operator' => 'IN'
       ),
       array(
         'taxonomy' => 'fit',
         'field' => 'term_id',
         'terms' => $fit,
         'operator' => 'IN'
       )
    )
 );
 ?>
 <?php $the_query = new WP_Query( $args ); ?>
 <?php if ( $the_query->have_posts() ) : ?>
 <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
 <div class="single_prod">
   <div class="single_prod_top row">
     <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
   </div>
   <div class="single_prod_bot row">
     <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
   </div>
 </div>
 <?php endwhile; ?>
 <?php wp_reset_postdata(); ?>
 <?php else : ?>
 <p><?php _e( 'Sorry, no products matched your criteria.' ); ?></p>
 <?php endif; ?>
 <?php } ?>
 <?php } ?>
X

* : Required Field