With Date Range filter from JetSmartFilters plugin, you can filter posts or products using the date they were added or filter events by the event date. This widget is very useful as it helps the visitors find the needed goods or publications.
From this tutorial, you will learn how to add a date range filter based on the dates in the meta fields. So, let’s deep into this process!
Adding a date range filter
Step 1 — First of all, open your WordPress Dashboard add navigate to the Smart Filters > Add New to proceed.
Step 2 — Then, give the filter a Name, and paste the Filter Label and Active Filter Label.
In the next box, you need to select the Date Range Filter Type. Also, there’s an option to Filter by Meta Date or by Post Date, which will be the publication date of the specific post or metadata that you pull out from the Meta Box.
Step 3 — In case you want to filter by Meta Date, you need to create Custom Post Type first. Let’s have a closer look at how to do that.
Firstly, navigate to JetEngine > Post Types and click on the Add New button. Here you need to create an Events Post Type and add Meta Fields to it.
In the Meta Field box write a Title, paste the Name/ID (for us it will be “date-”), and in the Type section select Date. After that, click on the Add Post Type button.
Step 4 — The next step is to copy the Name/ID “date-” from your Meta Field and paste it in the Query Variable field in the Smart Filters that you were creating.
If you decided to choose to Filter by Post Date instead of Meta Date, so you don’t need to add anything to the Query Settings filed, because it will pull out the date of the publication of the post.
When you’ve finished with settings, click on the Publish button to publish the filter.
Step 5 — Afterward, go to Events and open the needed Post. In the Settings block, you’ll see the Date filed where you can choose the date you want to display.
Step 6 — After that, navigate to JetEngine > Listings and click on the Add New button.
In the Listing source choose Post, select Events in Post Type, then give it a name and click on the Create Listing Item button to continue.
Then, you’ll see your Listing in the page built with Elementor. You can learn more about Listing functionality from this tutorial.
Step 7 — Add a Listing Grid widget to the needed section. In General settings, you need to choose your filter from the Listing option.
Then, drag the Date Range Filter widget to the same section. In the Select filter dropdown choose the filter and apply This filter for JetEngine.
Click on the Update button to save the changes.
Step 8 — The last step is to click on the Preview button to test the filter out.
That’s all you need to do to add a Date Range Filter with the help of JetSmartFilters plugin. Well done!