Back to contents

JetSmartFilters. How to use the JetSmartFilters widgets with the Listing Grid and Calendar widgets

This tutorial explains how to use JetSmartFilters widgets with the Listing Grid and Calendar widgets of the JetEngine plugin.

You are able to apply any of the JetSmartFilters plugin’s filters to different widgets. You can filter publications that are displayed in the Listing Grid and different events in the Calendar widget.

From this tutorial, you will learn how to create a listing and calendar from JetEngine plugin and how to use Filter widgets with the Listing Grid and Calendar widgets. Now let’s dive into that process!

Using JetSmartFilters widgets with the Listing Grid

Step 1 — Once you have the content that you want to display in the Listing Grid widget, you can create a filter for it. To do that, navigate to the Smart Filters > Add New in your WordPress Dashboard.

Step 2 — After that, give the filter a Name, Filter Label, and Active Filter Label.

Search filter labels settings

Step 3 — Then, in the Filter Type select Search filter. You can also Search by Default WordPress search, so it’s only going to search in the title of your items that are displayed in the Listing Grid, or you can choose the second option which is search By Custom Field (from Query Variable). When you’re done, don’t forget to click on the Publish button.

Search by filter settings

Step 4 — Afterward, go to a page where you want to place the Search filter and drag the Listing Grid widget to the section where you want to place it. In the General settings, section choose the needed Listing you’ve created before.

General content settings in Listing Grid widget

You can learn more about Listing and how to create it from this tutorial.

Step 5 — The next step is to drag-n-drop the Search filter widget to the section. Select the Search filter that you’ve created from the dropdown list in the General settings tab, and in This filter for field choose JetEngine option.

Search filter content settings

Step 6 — After that, click on the Publish button and preview the result.

Search filter overview

Using JetSmartFilters widgets with the Calendar widget

Step 1 —Firstly, let’s create a different filter for the Calendar widget. Navigate to Smart Filters > Add New, and type in the Name, Filter Label, and Active Filter Label.

Date Range filter label settings

Step 2 — In Filter Type select Date Range and choose Filter by Meta Date. If you’ll choose the Post Date, then it will be simply the publication date.

I choose the Meta Date, and in the Query Variable field, I need to paste the filed key from the Custom Field.

Filter and Query settings

To do that, go to the Custom Post type that you’ve created before, for me it’s “Events”.

You can find out more about Custom Post Type and how to create it from this tutorial.

Step 3 — So, in the Events, I’ve got the number of posts and each of these posts got the custom field with the Date. When I open the post called “Product Presentation” and scroll down to the Settings, I’ll find the field name Date, where the date of the event is set.

Product Presentation post and settings in it

You need to copy the Name of this date that is called “date-” and insert it in the Query Variable filed in the filter you’ve been creating. Then, click on the Publish button.

Filter and Query settings

Step 4 — After that, open the needed page and drag-n-drop the Calendar widget to the section where you want to place it.

Step 5 — In the Listing select the listing you’ve created for your events.

General content settings of Calendar widget

Then, you need to choose by which criteria you want to Group posts. If you choose Posts publication date, it will display this post on the day when it was created. Post modification date will do the same, but it’s going to display posts on the day when you have last changed this post. And the Date from the custom field will display posts on the dates that are set in the custom field.

Group posts by the criteria for Calendar widget

I choose the Date from the custom field and in the Meta field name paste the name of the meta field “date-”.

General content settings for the Calendar widget

Step 6 — Afterward, drag the Date Range Filter to the section. In the General settings choose your filter, for me, it’s Date Range. Then choose JetEngine Calendar from the This filter for dropdown.

Content settings for the Date Range Filter widget

Step 7 — The last step is to click on the Publish button and check out how the filter works.

Date Range Filter for the Calendar widget

Now you know how to use the JetSmartFilters widgets with the Listing Grid and Calendar widgets. Hope this tutorial was useful and you will enjoy the result!