How to Show Upcoming Events - P5 - Using Meta Box and Breakdance

When our team redesigned a website for a client in the entertainment industry, I noticed that highlighting upcoming events is a good way to boost engagement. Displaying all the events is an easy task, but someone may not know how to filter them by date. So, after researching, I’ve written a series on using custom fields with Meta Box combination with various page builders to do it.

This tutorial is about doing it with Breakdance.

We're focusing on displaying events with end dates after the current date. Each day, if an event's end date has passed, it magically disappears from the page. All automated!

Video Version

Before Getting Started

Imagine that today is January 30th.

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

In this case, each event will be a post of a custom post type. I’ll create some custom fields to store some typical information about events. The start date and the end date will also be used for filtering purposes.

Let’s check which tools are necessary for this practice.

First, the Meta Box plugin. It’s 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 AIO to have them all.

Here are the extensions we need:

• MB Custom Post Type: to create a custom post type for the events;
• Meta Box Builder: to have a UI on the backend to create the custom fields visually.

And the last one, we obviously use Breakdance to build the page, which contains the upcoming events section.

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 Custom Fields

Each event may have some subsidiary information. Then, we should use custom fields to store them; just create them as you go. Here are some typical ones for this practice.

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

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

I’ll choose the Date Picker field type for both the start and end date of the event.

Pay attention that you’ll only see this setting for the field when enabling the MB Admin Columns extension. Just turn it on to show the date on the management dashboard, then you can easily compare with the result. This feature is optional, so I did not mention it before.

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

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

Simply input data into them.

These are some posts that I created for reference.

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

Create a Global Block Stipulating the Display of an Event

With Breakdance, you should start by making a global block. This block will get information from a post first, then show it anywhere on your site.

Go to Breakdance > Global Blocks and create a new global block.

Don't forget to pick a post to see how it looks.

My global block will display the information of each post (I mean event) in a box like this:

Now, first, select the Div element to cover the block.

Inside this div, add some elements to get detailed information of the events.

For the image of the event, choose a Post Featured Image element since it is saved as the post's featured image. And then, the image is displayed in the preview.

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

Now, I want to display the start date, end date, and location in the same style along with icons, so I choose the Icon List element instead of normal text. Since this information is saved in custom fields created with Meta Box, we use Insert Dynamic Tags for each item.

Then, choose the corresponding fields in the Metabox section.

Afterward, you'll see the start date appear right away.

Besides, you can also change any icon for each item you want.

Do the same to display the end date.

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 Insert Dynamic Tags to connect this element with the right field.

That’s all for displaying event information on the block.

Display All Events on the Page

It’s time to show all the events on the page. Just to clarify, at this stage, we're displaying "all the events". For filtering, we’ll do it separately in the next step.

Now, edit any page with Breakdance.

I’m going to add a section to the page to show the upcoming events.

Begin by selecting a Section element.

Next, add a Heading element, and give it a title.

To display the wanted posts, we need the Post Loop Builder element. Then, in the Global Block section, choose the one we’ve just created.

You see, there is no information now. So, move to the Query section, choose Custom, and edit the query to get posts from the custom post type that we use for events.

In there:

• In the Source data: choose the Post Types as Event to get data from this post type.
• In the Posts per page section: you can enter the number to limit how many posts are shown. In this case, I fill in -1 to show all the events.

Now, there’re some posts with information displayed exactly as we set in the created global block.

We’ve just finished getting all the posts in the event post type. Note that I specifically mentioned "all the posts" since we will add the filter later.

Let's style the section a bit. You can go back to edit the global block to change how the post information looks, as well as style the section.

So, you can see all the events displayed on the frontend with styling.

To display only the upcoming events, we need a custom query to filter those posts.

Query to Show Only the Upcoming Events

Go back to the Query section of the Post Loop Builder element, instead of using the query as the previous step, we should look for the Array section to add conditions flexibly. You can see an available code, which is a PHP array commonly used to customize queries for retrieving data.

Let’s add some code following the structure to display only the upcoming events.

return [
    'post_type' => 'event',
    'posts_per_page'=> -1,
    'meta_key'=> 'end_date',
    'meta_compare'=> '>=',
    'meta_value'=>date('Y-m-d'),
];

Explanation:

'post_type' => 'event',
'posts_per_page'=> -1,

These lines of codes to get all posts in the Event post type.

'meta_key'=> 'end_date',
'meta_compare'=> '>=',
'meta_value'=>date('Y-m-d'),

This is to compare the end date with the current date. If the events have the end date after the current date, they could be displayed. In there:

• 'meta_key'=> 'end_date',: to set the meta key as the ID of the field named End Date;
• 'meta_compare'=> '>=': to get the events that have the end date after the current date;
• 'meta_value'=>date('Y-m-d'),: to get the value of the current date with its format.

Now, just the upcoming events are displayed. Only events have the end date after the current date, which I marked at the beginning, could be displayed.

Last Words

We've covered all the steps to display upcoming events using Meta Box and Breakdance. If you use other page builders, stay tuned for future guides in our series.

• How to Show Upcoming Events - P1 - Using Meta Box and Elementor
• How to Show Upcoming Events - P2 - Using Meta Box and Bricks
• How to Show Upcoming Events - P3 - Using Meta Box and Oxygen
• How to Show Upcoming Events - P4 - Using MB Views
• How to Show Upcoming Events - P5 - Using Meta Box and Breakdance