In this project we are going to create an Ajax filter from WordPress Custom Post Type, that displays images with fancy hover effects. You can filter posts without refreshing the page. I didn’t use either a page builder or a plugin to create this feature.
Step #1 – Create a Custom Post Type for Cities
In this example I’m going to create a Custom Post Type named City, but it could be anything You want. Please care about the taxonomy’s slug in this case “city_cat“. You need to change it to Your custom slug.
Add this snippet to functions.php
your-child-theme/functions.php
Step #2 – Create some Taxonomies for City Custom Post Type
Step #3 – Add some posts in City
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' #28 '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]
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');
Leave a Reply