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!

The upcoming events section created by Meta Box and Breakdance

Video Version

Before Getting Started

Imagine that today is January 30th.

Assume 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.

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:

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 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.

Some typical custom fields to store event information

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.

Go to Meta Box > Custom Fields to create fields

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

Choose the Date Picker field type for 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.

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, and 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

Simply input data into them.

These are some posts that I created for reference.

Some created posts

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.

Create a new global block.

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

Pick a post to see how it looks in preview

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

The global block will display the information of each post in a box

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

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.

Get the image of the event

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

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.

To display the start date, end date, and location, choose the Icon List element, then use Insert Dynamic Tags

Then, choose the corresponding fields in the Metabox section.

Choose the corresponding fields in the Metabox section

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

The start date appears

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.

Get the location

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.

Select a Section element for the upcoming events.

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

Add a Heading element for section 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.

To display the wanted posts, we need the Post Loop Builder element.

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.

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.

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.

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.

In the Query section of the Post Loop Builder element, look for the Array section to add conditions flexibly.

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'),
];

Add some code to display only the upcoming events.

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.

The upcoming events section created by Meta Box and Breakdance

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.

Leave a Reply

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