Back to contents

JetSmartFilters. How to create Select filter with Posts data source

This tutorial will show you the way of creating the select filter with Posts data source with the help of JetSmartFilters plugin.

Before we create a Select Filter you have to make sure you have created the post relations. Let’s imagine we have created posts relations between the Author post type and usual posts.

select filter with posts data source

1 Step — Open your Author custom post type and assign the specific posts to the particular authors.

select filter with posts data source

2 Step — To do so, open one of the custom post types and have a look at the Related Posts section on the right. Start typing the title of the needed posts and see how it appears in the hints.

3 Step — As soon as you are done click the Update button at the top of the page and repeat the procedure for the rest of the authors.

select filter with posts data source

4 Step — Now you have to create a listing for child posts by moving on to the JetEngine > Listings > Add New. Let’s give it a name Listing For Child Posts.

select filter with posts data source

5 Step — Add a Dynamic Field widget to pull out a title, then add a Dynamic Image widget to pull out a thumbnail and the last one a Dynamic Meta to pull out the date. Click the Publish button.

6 Step — Go WordPress Dashboard > Smart Filters and click Add New.

7 Step — Give this filter a name, in our case, it’s Select filter with Posts data source and the Filter Label is Posts Data Filter.

select filter with posts data source

8 Step — Proceed to the Filter Type dropdown and choose the Select option.

select filter with posts data source

9 Step — In the Data Source dropdown select the Posts option.

10 Step — The Post Type dropdown provides you with the list of available post types, where you have to choose the parent post type from the relation. In our case it’s Author.

select filter with posts data source

11 Step — Copy the meta key of the Posts and Authors relation and paste it into the Query Variable field of the filter. Click the Publish button to save the changes.

select filter with posts data source

12 Step — Open the page where you want your filter and listing to be shown at and drop the Listing Grid widget on the page. In the Listing dropdown, you have to select the Listing For Child Posts.

select filter with posts data source

13 Step — Find the Select Filter widget, drag and drop it to the page. In the Select filter field, you will see a list of select filters you have created. Choose the one which is called Select filter with Posts data source.

select filter with posts data source

14 Step — Navigate to the This filter for dropdown and select the JetEngine option.

15 Step — Click the Publish button and have a look at how the filter works.

select filter with posts data source