Showing upcoming events provides a clear view of upcoming deadlines and important dates, allowing you to manage tasks and priorities effectively. Today, we’re going to do it by combining Meta Box and Elementor.

These are the upcoming events I want to display in this practice.

The upcoming events section

Video Version

Before Getting Started

Specifically, just events with the end date after the current day could be displayed. Day by day, if it passes the end date of any event, those events will disappear from the page. And, it’s all automatic.

For example, assume that today is November 15th.

Assume that today is November 15th.

We will filter and display events that are either ongoing or scheduled for the future. This means that an event with an end date beyond November 15th will be shown on the page.

An event with an end date beyond November 15th will be shown on the page.

For some typical information about the event, I’ll create some custom fields. The start date and the end date as well as will be used for that filter. And in this case, each event will be a post of a custom post type.

These are some tools we use for this practice:

First, we need the Meta Box plugin to have a framework to create a custom post type and custom fields for the events. You can install it directly from wordpress.org.

Besides, we also need some Meta Box extensions for the advanced features. You can install them individually or use Meta Box AlO to have them all.

Here are the extensions we’ll use in this case:

Lastly, we’ll use Elementor to build the page, obviously. I also use Elementor Pro, which Meta Box already has the integration with to display the information from custom fields.

Now, let’s start!

Create a New Post Type

Go to Meta Box > Post Types to create a new post type for the events.

Create a new post type for the events.

Create Custom Fields

Each event may have some subsidiary information. Then, we should use custom fields to store them. I have some typical ones for this practice.

Some typical custom fields to store event information

Two of them, the start date and end date should be must-have items since they will be used for the filter.

Now, go to Meta Box > Custom Fields to create them.

Go to Meta Box > Custom Fields to create fields

Choose the Date Picker field type for the start and end date of the event.

Choose the Date Picker field type for the start and end date of the event.

To show the date on the management dashboard and then you can easily compare it with the result, turn on the button like in the image below. This setting is available only when enabling the MB Admin Columns extension. This extension is just optional, so I did not mention it at the beginning.

Turn on the button to show the date on the management dashboard

After creating all the needed fields, go to the Settings tab > choose Location as Post type > select Event to apply these fields to this post type.

Set the location to apply these fields to the Event post type

Now, in the post editor, you will see the created custom fields.

The created custom fields in the post editor

Just input data into them.

Here are some posts that I created for example:

Some posts that I created for example

The start date and the end date are shown as admin columns. You may want to see these ones once again in the end to easily compare with the ones displayed on the page.

Create a Template for Displaying Each Event

With Elementor, we should create a template to stipulate how information about each event should be displayed.

Create a template to stipulate how information about each event should be displayed.

Because there are multiple events, and we will use this template to display them all on the page, we should set the template as the Loop Item type.

Set the template as the Loop Item type

Remember to set the preview for the template.

Set the preview for the template

This is the display of an event that I’m going to have for this practice.

The display of an event

Let’s add some elements to have it.

For the image of the event, add the Featured Image element.

For the image of the event, add the Featured Image element.

Then, add the Post Title element for the event title.

Add the Post Title element for the event title.

Next, I want to display the start date and end date along with icons, so choose the Icon List element instead of normal text. Since this information is saved in custom fields created with Meta Box, we’ll use the Dynamic Tags for each item. Find the Meta Box Field in the Post section, and then choose the corresponding fields from the dropdown list.

Choose the Icon List element for the date, use Dynamic Tags for each item and find the Meta Box Field in the Post section

Choose the corresponding fields from the dropdown list.

Now, you’ll see a date from the Start Date field displayed immediately.

A date from the Start Date field displays immediately

You also can change the icon for the start date if you want.

Do the same to display the end date.

Use Dynamic Tags to get the information of the End Date field

For the location, I’ll add another Icon List element, actually you can use the created icon list for the dates, I just create a new one for separation. Also, use the Dynamic Tags to connect this element with the field.

Get the location information

We’ve just finished getting all of the information for the event. Let’s move to the next step.

Show the Events on the Page

Let’s edit any page you want to show the upcoming events.

First, add a section on the homepage for it.

Add a section on the homepage for the upcoming events

Next, add a Heading element for the section’s title as usual and style it as you want..

Add a Heading element for the section’s title

To get all the posts, add the Loop Grid element. In the Layout section of this element settings, choose the created template (the template in the type of Loop Item we created). Then, some blog posts will be displayed.

To get all the posts, add the Loop Grid element and choose the created template in the Layout section

To replace them with the events, go to the Query section, and change the Source to the Event post type. Then, all of the posts in that post type will display.

In the Query section, and change the Source to the Event post type.

Note that I specifically mentioned "all the posts". However, we just want to display the upcoming events, so we need a custom query to filter those posts.

Elementor does not support creating any custom query on this screen. We should add code to the theme’s file for the query.

Create a Custom Query

Go to the Theme Functions file, add these lines of code.

/* Filer Upcoming Event */
add_action('elementor/query/filter_events', function($query) {
    $current_datetime = current_datetime()->format('Y-m-d');
    $query->set('post_type', ['event']);
    $meta_query [] = [
        ‘Relations’ => ‘OR’
        [
            'key' => 'start_date',
            'value' => date($current_datetime),
            'compare' => '>=',
        ],
        [
            'key' => 'end_date',
            'value' => date($current_datetime),
            'compare' => '>=',
    ];
    $query->set('meta_query', $meta_query);
});

Add code to the theme’s file
For your information, this syntax is provided officially by Elementor. So, just use it with no waver.

Let’s go through it in more detail:

  • add_action('elementor/query/filter_events', function($query) {: This hook is to create a query with the ID - filter_events to execute the functions below.
  • $current_datetime = current_datetime()->format('Y-m-d');: This code helps to get the current time based on the time zone the website has been set.
  • $query->set('post_type', ['event']);: This is to query the post in the Event post type.
  • The events as well as the posts that meet at least one of the two conditions below will be obtained and displayed.

The events as well as the posts that meet at least one of the two conditions will be obtained and displayed.

In there:

These lines below are to compare the start date with the current date. It means that all the upcoming events will be displayed.

'key' => 'start_date',
'value' => date($current_datetime),
'compare' => '>=',

If there is any event that doesn't meet the first condition, but it’s happening with the end date is after the current date. Then, the second one helps to display those events.

'key' => 'end_date',
'value' => date($current_datetime),
'compare' => '>=',
  • $query->set('meta_query', $meta_query);: This is to set the query from the $meta_query variable.

That’s done for the custom query.

Remember to copy the query ID - filter_events.

Then, go back to the page editor with Elementor and input the created Query ID to the box.

Input the created Query ID to the box

But before doing that, keep track of the posts carefully. Because once you insert the ID of the custom query, the list of displayed posts will change.

Once you insert the ID of the custom query, the list of displayed posts will change.

The changing images are the most clearly showing which posts have been updated.

This is how the upcoming events section displays on the page.

The upcoming events section before styling

We should style it a bit for a better look.

Style the Section

Go back to the created template as a loop item for each event. Just customize each element's settings to have a better look for the event information.

Customize each element's settings of the loop item

As well as, in the page editor, do so with the settings of the Loop Grid element.

Customize the element’s settings in the page editor and the Loop Grid element

Now, all of the upcoming events are displayed as we want.

The upcoming events are displayed as we want.

Last Words

We've covered all the steps to display the upcoming events using Meta Box and Elementor. If you use other page builders, you can follow our channel to see them later.

In case you want to show posts with other specific conditions, you can refer to this series. Hope it can be helpful to you!

Leave a Reply

Your email address will not be published. Required fields are marked *