Back to contents

JetSmartFilters: How to Create a Hierarchical Filter with Select Filter Type (based on JetEngine)

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.

Creating a taxonomy

After that, go to the Advanced Settings and enable the Hierarchical option.

Enable the hierarchical option in the taxonomy

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.

Adding categories for taxonomies

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.

Add categories with the quick edit option

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.

Creatiing a hierarchical filter with the select type
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.

Adding filter hierarchy

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.

Select filter content settings

Also, we’ve enabled the Indexer and Show Counter options in the filter settings to show the number of posts.

Indexer options in the filter settings

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.

Hierarchical filter preview

Well done! Now you know how to create a hierarchical filter to filter your custom posts created with JetEngine plugin.