AJAX Filter for WordPress Custom Post Type Taxonomy with Buttons

Step #1 – Create a Custom Post Type for FAQ

In this example I’m going to create a Custom Post Type named FAQ, but it could be anything You want. Please care about the taxonomy’s slug in this case “faq_cat“. You need to change it to Your custom slug.

Copy this code in functions.php

Step #2 – Create some taxonomies for FAQ Custom Post Type

Step #3 – Create some posts in FAQ

You can download the XML file from the demo to import.

Step #4 – Enqueue scripts in functions.php

Step #5 – Build the filter

Create a file named filter.php

your-child-theme/ajax/filter.php

Find and replace the taxonomy and post type:

#6  'taxonomy' => 'YOUR_TAXONOMY' 
#27 'post_type' => 'YOUR_POST_TYPE',

Step #6 – Create a shortcode from the filter

Copy this shortcode function in functions.php of your child theme

Step #7 – Place it wherever You want to display the ajax filter

[ajax_filter_terms]

Step #8- JavaScript

Create a file named ajax.js

Step #9 – Callback function

Create a file named callback.php

your-child-theme/ajax/callback.php

Find and replace the taxonomy and post type:

#14 'post_type' => $_POST['YOUR_POST_TYPE'], 
#34  get_terms(array('taxonomy' => 'YOUR_TAXONOMY'
#36 'taxonomy' => 'YOUR_TAXONOMY'

Step #10 – Pull the callback in your functions.php

// =========================================================================
// AJAX FILTER CALLBACK FUNCTION
// =========================================================================
require_once('ajax/callback.php');

Step #11 – SCSS / CSS

#ajax-filter {
  background: black;
  border-radius: 5px;
  margin: 30px 0;
  ul {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    li {
      list-style: none;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

#ajax-filter {
    background: black;
    border-radius: 5px;
    margin: 30px 0;
}
#ajax-filter ul {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
#ajax-filter ul li {
    list-style: none;
}
#ajax-filter ul li a {
    color: white;
    text-decoration: none;
}