How to Create a Custom Taxonomy Hierarchical Filter with Select Filter Type
From this tutorial, you will learn how to create a hierarchical select filter to filter posts by the taxonomies created with JetEngine.
Preparations
The first thing you need to do is to create custom post types with meta fields. Learn how to do it from this tutorial. Then, you need to display information from your posts in the listing and showcase them on your page using Listing Grid widget. This tutorial will show you how to do it easily.
Creating Taxonomies for Custom Posts
Creating taxonomies
Firstly, you need to create taxonomies for your custom posts. To do this, navigate to the JetEngine > Taxonomies and click on the Add New button.
Here you can add Taxonomy Name, Slug, and select post types to add this taxonomy for.
After that, go to Advanced Settings and enable the Hierarchical option.
This option allows you to display taxonomies in the form of the category instead of tags. Really useful when you’re applying taxonomies for your custom posts.
When you’re done, don’t forget to save the changes.
We’ve created three different taxonomies for my posts, so now we’ll be able to filter posts by three different criteria, such as People, Price, and Country.
Adding categories for custom posts
The next step is to navigate to your custom posts, open the needed taxonomy you’ve created before, and add categories to it. For example, I’ve created taxonomy “Country” and added all needed countries to it.
Repeat the same actions for other taxonomies.
Adding categories to posts
Then, you need to open your custom posts, select the needed post, click on the Quick Edit button and choose categories for this post.
When you’ve added all categories for all your posts you can create a hierarchical filter for them.
Creating a Hierarchical Filter
Creating a hierarchical filter for JetEngine taxonomies
Navigate to SmartFilters and click on the Add New button. Then, give your filter a name and label. Afterward, you need to choose the Select filter type and enable the “Is hierarchical” option.
You’ll be able to add a label and placeholder and select from the dropdown the taxonomy you’ve created with the help of the JetEngine plugin.
Filtering custom posts with the hierarchical filter
Now you need to open the page where you’ve displayed your posts with the help of the Listing Grid widget and add the Select filter widget to the needed section. In the filter settings choose the filter you’ve selected before and apply it to the JetEngine.
Also, we’ve enabled the Indexer and Show Counter options in the filter settings to show the number of posts.
You can learn more about the Indexer option from this tutorial.
Filtering custom posts with the hierarchical filter
When you’re done with all settings, you can save the changes and click on the Preview to see how the filter works.
Now you know how to create a hierarchical filter to filter your custom posts created with the JetEngine plugin.