Help Center

Displaying Future and Past Events in the Listing Grid Widget

Displaying Future and Past Events in the Listing Grid Widget

Showcase future and paste events based on the date in the corresponding CPT's “Date” field. Output events in the Listing Grid and set query in it.

Before you start check tutorial requirements:

Creating a Query

To query the Listing Grid by the “Date” meta field, you can use relative formats located in the section with the same name. 

For instance, we use a Custom Post Type “Events” that has a meta field of a “Date” Field type dubbed “event-date.”

Warning

Ensure the field has the Save as timestamp toggle activated in the Meta fields settings of the selected CPT (WordPress Dashboard > JetEngine > Post Types) so the query will work.

save as timestamp toggle

To display only future or past events, the query should be built in WordPress Dashboard > JetEngine > Query Builder.

In the Queries List directory, click the “Add New” button to open the editing area.

In the General Settings section, complete the Name field and set the “Posts” Query Type

Then, in the following Posts Query section, head to the General tab and pick the Post Type you are working with. It should be the same as the Listing source set during the creation of a Listing item.

post type setting

The following settings vary on the type of content you want to display. So, move on to the needed part of the article.

Future Events

To showcase future events, navigate to the Meta Query tab and press the “Add new” button to access settings.

meta query clauses section

Complete the Field key/name with the meta field value of a “Date” Field Type

Select the “Greater than” Compare operator and press the “Dynamic Tag” button next to the Value field to open the options list.

Among the variants, find and press the “Today” option.

value dynamic tags

Set the “Timestamp” as the Type and complete the Clause name with a desired value.

greater than today clause

Return to the General tab. Press the “Add new sorting parameter” button in the Order & Order By section.

Complete the Order By field with an “Order by meta clause” option. Select the Meta Clause created earlier and choose the needed Order: “From lowest to highlest values” or “From highest to lowest values.”

Press the “Add/Update Query” button to save the result.

order by greater than today meta clause

Past Events

The procedure is similar to the one for future events.

In the Meta Query tab, complete the Field key/name with the meta field value of the “Date” Field Type. Select the “Less than” Compare operator.

Find and pick the “Today” option by hitting the “Dynamic Tags” button next to the Value field.

Set the “Timestamp” Type and complete the Clause name with a desired value.

less than today clause

Return to the General tab and press the “Add new editing parameter” in the Order & Order By section.

Then, pick the “Order by meta clause” Order By option, select the Meta Clause by its name, and choose the needed Order option.

Save the query by clicking the “Add/Update Query” button.

order by less than today meta clause

Posts of the Previous Month

To build the query for the previous month’s posts, head to the Date Query tab and hit the “Add new” button.

data query clauses section

Complete the After field with the “first day of previous month midnight” value and Before with the “first day of this month midnight” value.

Set the “Equal” Compare operator and pick the “Post Date” option as Column

Don’t forget to save the query by pressing the “Add/Update Query” button.

date query settings

Page Editing

To finalize, go to the page editor and place the Listing Grid widget there if this wasn’t done before.

Then, in the Listing Grid widget’s Content settings, open the Custom Query tab and activate the Use Custom Query toggle.

Pick the needed option in the Custom Query field. 

For instance, we have added three Listing Grids. Two of them are identical and show future and past events. They display the “event-date” meta field data. The third Listing Grid is slightly different. Instead of showing the “event-date,” it shows the date when the post was published.

For every Listing Grid, a different query is used.

Click the “Publish/Update” button to save the changes.

custom query section

Result on the Front End

Check the result on the front page. The displayed content will differ depending on the query you have applied.

If you build a future events query, it will only show events where the “Date” meta field is set to the day after “Today.”

For this tutorial, we created a future events query on September 27, 2023, so it displays events occurring after that date.

future events

If the past events query is selected as Custom Query, it will display only events that have already taken place.

past events

The last query will display only events that happened in the previous month.

posts of the previous month

That’s all about showcasing future and past events in JetEngine’s Listing Grid widget on your WordPress website.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.