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!

  • How to Show Upcoming Events - P1 - Using Meta Box and Elementor

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Custom Fields to Products in WooCommerce - Using Meta Box and Bricks
  13. How to Add Guest Authors and Guest Posts - Using Meta Box
  14. How to Add Related Posts - Using Custom Fields
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  21. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  22. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box and Bricks
  24. How to Create a Product Page - P4 - Using Meta Box and Elementor
  25. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  26. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  27. How to Create a Product Page - P7 - Using Meta Box + Kadence
  28. How to Create a Product Page - P8 - Using Meta Box and Brizy
  29. How to Create a Product Page - P9 - Using Meta Box and Divi
  30. How to Create a Product Page using Meta Box Plugin
  31. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  32. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  33. How to Create a Recipe - P3 - Using Meta Box and Elementor
  34. How to Create a Recipe - P4 - Using Meta Box and Bricks
  35. How to Create a Recipe - P5 - Using Meta Box and Zion
  36. How to Create a Recipe - P6 - Using Meta Box and Brizy
  37. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  38. How to Create a Recipe - P8 - Using Meta Box and Kadence
  39. How to Create a Recipe - P9 - Using Meta Box and Divi
  40. How to Create a Recipe with Meta Box Plugin
  41. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  42. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  43. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page Using Meta Box + Oxygen
  56. How to Create ACF Flexible Content Field with Meta Box
  57. How to Create an Auto-Updated Cheat Sheet in WordPress
  58. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  59. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  60. How to create an FAQs page - P4 - Using Meta Box and Bricks
  61. How to Create an FAQs Page - P6 - Using MB Views
  62. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  63. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  64. How to Create an FAQs Page - P9 - Using MB Blocks
  65. How to Create an FAQs Page -P3- Using Meta Box
  66. How to Create Buttons with Dynamic Link using Custom Fields
  67. How to Create Category Thumbnails & Featured Images Using Custom Fields
  68. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  69. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  70. How to Create Download and Preview Buttons - P3 - Using MB Views
  71. How to Create Download Buttons in WordPress - Using Custom Fields
  72. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  73. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  74. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  75. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  76. How to Create Notification Using Custom HTML Field
  77. How to Create Online Admission Form for School or University
  78. How to Create Online Reservation Form for Restaurants using Meta Box
  79. How to Create Reading Time to Your WordPress Posts - Using MB Views
  80. How to Create Relationships - P1 - Using Meta Box and Oxygen
  81. How to Create Relationships - P2 - Using Meta Box and Bricks
  82. How to Create Relationships - P3 - Using MB Views
  83. How to Create Relationships - P4 - Using Meta Box and Breakdance
  84. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  85. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  86. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  87. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  88. How to Display a Video Playlist - P1- Using MB Views
  89. How To Display All Listings On A Map With Meta Box
  90. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  91. How to Display Author Bio in WordPress - P2 - Using MB Views
  92. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  93. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  94. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  95. How to Display Images from Cloneable Fields - P3 - with Elementor
  96. How to Display Images from Cloneable Fields - P4 - with Bricks
  97. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  98. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  99. How to Display Product Variations - P1 - Using Meta Box and Gutenberg

Leave a Reply

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