From this tutorial, you will learn how to create a hierarchical filter to filter custom posts created with JetEngine.
Below we prepared a step-by-step guide about how to create a hierarchical filter using JetSmartFilters and JetEngine plugins. Now you’ll be able to filter your custom posts by taxonomy with the help of the hierarchical filter. In this tutorial, We’ll show how to filter tours by different criteria, such as country, price, and people.
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
1 Step — 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 the 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.
2 Step — 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.
3 Step — 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
1 Step — Creating a hierarchical filter for taxonomies created with JetEngine
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.
ATTENTION! Please note, that filter hierarchy is available only for the Select filter type and only for taxonomy.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.
2 Step — Filtering custom posts with the help of 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.
3 Step — Filtering custom posts with the help of 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.
Well done! Now you know how to create a hierarchical filter to filter your custom posts created with JetEngine plugin.