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.
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.
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.
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.
Step 6 — After that, click on the Publish button and preview the result.
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.
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.
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.
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.
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.
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.
I choose the Date from the custom field and in the Meta field name paste the name of the meta field “date-”.
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.
Step 7 — The last step is to click on the Publish button and check out how the filter works.
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!