Showing upcoming events - Meta Box + Oxygen

Showing upcoming events highlights important dates and deadlines, making it easier for everyone to join. Let's use Meta Box and Oxygen to make it happen!

We'll only display events that have an end date after the current date. Day by day, if it passes the end date of any event, those events will automatically disappear from the page.

Video version

Preparation

Assume that today is December 12th.

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 December 12th will be shown on the page.

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

Before moving forward, let’s check which tools are necessary for this practice.

• Oxygen: to build the page;
• Meta Box plugin: to have a framework to create a custom post type and custom fields for the events;
• 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.

1. Creating a new post type

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

2. Creating custom fields

Each event may have some extra information. As mentioned, we’ll use custom fields to store them, so just create them as you go. These are some typical ones for this practice.

Two of them are the start date and end date. They 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 opt for the Date Picker field type for the start and end date of the event.

Keep in mind that the field setting below is visible when enabling the MB Admin Columns extension. Just turn it on to show the date on the management dashboard, and then you can easily compare it with the result. It is optional, so I did not mention it before.

Once you’ve created 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 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.

3. Displaying all events on the page

It’s time to showcase the event information on the page. Remember, we're just displaying "all the events”. For filtering, we’ll do it separately in the next step.

Now, edit any page with Oxygen.

First, select a Section component to contain all of the event's details.

Next, add a Heading component for the title of the upcoming events section.

To get all the posts of the Event post type, select a Repeater component. Then, go to the Query section to choose the source of data.

Normally, to get the posts, you can choose the default or custom type. As I only select a certain number of posts to be displayed based on the condition, I choose the query in the advanced type.

We’ll add some query parameters, as follows:

• The post_type parameter is to specify that we'll only get posts from the Event post type. Remember to enter the ID of the post type you want to get data in the data box.
• The post_per_page parameter is to limit the number of posts displayed in the section. You can set the number of posts you want. For my expectation, I just enter the default number as -1 to display all the posts in that post type.

After applying, there are some boxes equivalent to the number of posts.

Let’s display information about each event. We’ll add some components to the available Div of the Repeater component.

To display the event’s image, select the Image component, then connect it to the featured image of the post. After that, images are displayed immediately.

For the event title, add the Text component. Link this component to the post's title by clicking the text, and choose Insert data.

Then, choose the Title option in the Post section.

So, you can view the event's title.

I want to display the start date, end date, and location in the same style along with icons. I’ll begin with the start date first. Add a new Div component to cover the start date information with its icon. Next, select the Icon component for the icon.

Following that, choose Text to get the start date. As this information is saved in a custom field created with Meta Box, click the Insert data button > choose Meta Box Field > select the corresponding field. As a result, you’ll see a date from the Start Date field displayed.

Do the same with the end date and location. Just duplicate the Div component to save time, then change the corresponding information.

We’ve just finished getting all the posts in the event post type along with their short information.

Note that again, I specifically mentioned "all the posts".

You can beautify this section as you want by changing the settings of each component. After making some adjustments, my events display with styling on the frontend like this.

Now, move on to an important step to display only the upcoming events using a custom query to filter those posts.

4. Quering to show only the upcoming events

It’s great when Oxygen supports creating custom queries. So, in the page editor with Oxygen, go back to the Query section of the Repeater component and edit the query once again.

We should compare the end date with the current date. If the events have the end date after the current date, they could be displayed. So, add other parameters to execute.

• The meta_key parameter: to get the value of the End Date field, so enter its ID in the data box.
• The meta_value parameter: to get the current date's value. Pay attention that Oxygen allows the use of PHP function to return values, so choose the option with the same name.

Then, fill in the function name as "date" and fill in its format. In this case, enter the default current date.

• The meta_compare parameter: to compare the end date to the current date. Use the >= operation to get the events that have the end date after the current date.

After applying, you can see the change in the preview section.

It’s clear that some events have disappeared immediately. It means that only the upcoming events are displayed.

Check the frontend to double-check.

Just events have the end date after the current day, which I marked at the beginning could be displayed.

For displaying posts with specific criteria, you can refer to our guide. I hope you find it helpful!