Back to contents

JetSmartFilters. How to create Checkboxes list filter with Posts data source

Continue reading this tutorial in case you want to create a Checkboxes list filter to display related posts by filtering with the help of JetSmartFilters functionality.

There is a step-by-step guide based on an example of creating a Checkboxes list filter using a post relations key set in the JetEngine > Posts Relations section in the WP Dashboard. We are going to provide you an example based on one-to-many posts relations, where “Country” is a parent post type and “Events” is a child post type.

Creating Checkboxes list filter with Posts data source

1 Step – First of all, you should make sure the posts relations are adjusted. You can learn more about the process of setting needed posts relations using JetEngine here. In our case it looks like this:

Posts relations settings

2 Step – Then, we go to the Smart Filters > Add New section and create a Checkboxes list filter defining appropriate fields. In the Filter Settings tab, we select the Data Source: Posts and in the Post Type: Country that to filter events by the countries, where they will be taken place.

filter labels and settings

3 Step – Moreover, in the Query Variable field, we input the posts relations key, which you can find in the JetEngine > Posts Relations section near certain relations.

Query Variable field
Posts Relations section near certain relations

4 Step – Now we open the page, where we have a listing with events, in Elementor editor and add a Checkboxes Filter widget. In the Select filter field, we choose the created Checkboxes filter and in the This filter for field specify the listing, which we are going to assign the filter to. There are also a lot of different settings, which you can adjust according to your needs.

content settings in Checkboxes Filter widget

5 Step – When everything is ready click the Update button below and go ahead on the page to view how the filter works.

Checkboxes Filter widget sample

An excellent job! Try creating a Checkboxes filter based on displaying related posts using JetSmartFilters plugin.