How to Filter the Related Items
From this tutorial, you will learn about related items filtering as a part of JetEngine’s refactored relations feature with the help of the JetSmartFilters plugin.
Before you start, check the tutorial requirements:
- Elementor (Free version), Block editor (Gutenberg), or Bricks
- JetEngine plugin installed and activated, with relations created
- JetSmartFilters plugin installed and activated
JetEngine Relations Builder allows you to set connections between Custom Post Types, Custom Content Types, users, and taxonomies. And now, as a part of the refactored relations feature, you can filter related items with the help of the JetSmartFilters plugin. In this tutorial, we will focus on setting up a filter with the related items source to filter related items.
Create a Filter
In this guide, we have the relations between two CPTs: “Departments to Services”.
We will then filter the list of services by department.
First, proceed to WordPress Dashboard > Smart Filters > Add New. Enter the Filter Name and select the multiple-choice Filter Type (in this case, choose the “Select” option).
Define whether the filter will be hierarchical by enabling the Is hierarchical toggle. In the Data Source dropdown, select the “Posts” option. Add the Placeholder if needed. Select the needed Post Type (“Departments” in our case). The Is Checkbox Meta Field toggle should be kept disabled. Define the post in the Include/Exclude field, if needed.
In the Query Variable field, click the Dynamic Tag icon, select either the “JetEngine: filters children items list by parents IDs” or “JetEngine: filters parents items list by children IDs” option (in this case, we select the “JetEngine: filters children items list by parents IDs” option).
In the newly opened pop-up, select the needed Relation.
Keep the “Equal (=)” for the Comparison operator. Click the “Update” button once you are ready.
Adjust the List of Related Items
To display the list of related items, create the listing template for the needed CPT, CCT, users, or taxonomy. You can show the desired info using the dynamic widgets/ blocks.
Click the “Publish” button once you are ready.
Add the Filter to the Page
Proceed to the page where you need to display the filtered list of the related items. Add the Listing Grid widget and select the template you have created.
Add the Select Filter widget and select the required filter.
Click the “Publish” button once you are ready.
Check the Result
Move to the front-end page and select any option from the Select Filter. The list is filtered, and the related children posts are displayed:
That’s it. Now, you know how to filter related items using the JetEngine and JetSmartFilters WordPress plugins.