Back to contents

JetSmartFilters. How to add a Date Range filter based on the dates in the meta fields

This tutorial explains how to add a Date Range filter based on the dates in the meta fields with the help of JetSmartFilters plugin.

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.

Note, that you would also need JetWooBuilder or JetEngine plugins in order to use JetSmartFilters.

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.

filter labels and settings for the Date range filter

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.

Date Range filter. Adding a Post Type with Meta Field

Step 4 — The next step is to copy the Name/IDdate-” from your Meta Field and paste it in the Query Variable field in the Smart Filters that you were creating.

Filter labels, settings and query settings for the Date Range

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.

Setting a date inside the post

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.

Create Listing Item

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.

General content settings in the Listing Grid widget

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.

Content settings in the Date Range Filter widget

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.

Date Range Filter widget

That’s all you need to do to add a Date Range Filter with the help of JetSmartFilters plugin. Well done!