Displaying opening hours for restaurants - Meta Box + Bricks

On a website for booking tables for several restaurants, we can show the daily opening hours for each one. It helps your customers be more proactive in managing schedules and bookings. It’s a piece of cake to add that information into a single page of each restaurant with the help of Meta Box and Bricks.

This section is an example:

Video version

Preparation

I assume that each restaurant is a post of a custom post type along with some detailed information. And, the opening time will be saved in custom fields created with Meta Box.

In a real case, it can be the same or different between days of the week. Therefore, besides the custom fields to store timing information, we should set a rule for displaying the fields.

So, we need these tools:

• Meta Box core plugin: to have the framework for creating the custom post type and custom fields for the restaurants. You can download it directly from wordpress.org;
• MB Custom Post Type: to create custom post types for restaurants;
• Meta Box Builder: to have UI in the backend to create the custom fields visually;
• Meta Box Conditional Logic: to create the rules for displaying or hiding the fields;
• Meta Box Group: to organize custom fields into the groups for clearer structure;
• Bricks to build the opening hour section.

1. Creating a new post type

Go to Meta Box > Post Types, and create a new one for the restaurants.

After publishing, the created custom post type will be displayed in the admin dashboard.

2. Creating custom fields

In this step, we will create some custom fields to save the opening hours information, then define when they display as well. I’ll skip the other information about the restaurant, but you may want to have some in your real case.

Go to Meta Box > Custom Fields > Add New to create a new field group.

Then, add custom fields with the type and condition like this:

Name	ID	Type	Options	Condition
Choose an option	choose_an_option	Select	1. all_days_are_the_same 2. difference_between_weekdays_and_weekend 3. custom
All days have the same opening hours	all_days_have_the_same_opening_hours	Group		display only when: the choose_an_option field = the all_days_are_the_same option
Type of opening hours	type_of_opening_hours	Select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choose_time_slots	Group		display only when: the type_of_opening_hours field = the enter_hours option
Start time	start_time	Time Picker
End time	end_time	Time Picker
Weekdays	weekdays	group		display only when: the choose_an_option field = the difference_between_weekdays_and_weekend option
Type of opening hours	typeof_opening_hoursweekdays	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choosetime_slotsweekdays	group		display only when: the type_of_opening_hours_weekdays field = the enter_hours option
Start time	starttimeweekdays	Time Picker
End time	endtimeweekdays	Time Picker
Weekend	weekend	group		display only when: the choose_an_option field = the difference_between_weekdays_and_weekend option
Type of opening hours	typeof_opening_hoursweekend	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choosetime_slotsweekend	group		display only when: the type_of_opening_hours_weekend field = the enter_hours option
Start time	starttimeweekend	Time Picker
End time	endtimeweekend	Time Picker
Monday	monday	group		display only when: the choose_an_option field = the custom option
Type of opening hours	typeof_opening_hoursmonday	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choosetime_slotsmonday	group		display only when: the type_of_opening_hours_monday field = the enter_hours option
Start time	starttimemonday	Time Picker
End time	endtimemonday	Time Picker
…	…	…	…	…
Sunday	…	…	…	…

I’ll explain the logic and how they work in detail.

The first field is a Select field with 3 options as you can see in the Choices box.

We have separate values for each option. They will be used to set the rules for the upcoming fields.

When each option is chosen, different fields show up. We’ll use conditional logic to set the rule for displaying those fields.

For example, the All days have the same opening hours group display only when users set the Select field above with the first option. To set that rule, go to the Advanced tab, add a rule in the Conditional Logic section based on the value of the field like this:

It means that this group will be displayed when the Choose an Option field is selected as the All days have the same opening hours option which has the value all_days_are_the_same.

Similarly, if the Select field is chosen as the Difference between weekdays and weekend option, all the subfields of the Weekdays and Weekend groups will be displayed. And if the Choose an Option field is selected as the Custom option, the group fields for every day in a week from Monday to Sunday will be shown up. All of the keys are the same since the rule is based on the Choose an Option field. Also, just change the value to the corresponding option.

In each group, we also have subfields with the same structure.

The first subfield is the Type of Opening Hours field. It is also a Select field as well. I have 4 options in the Choices box as below:

The second one is a Group field for choosing time slots. Note that the day of the corresponding group will be added to this field’s ID to differentiate the fields from other groups. Inside it, there are two subfields for the start time and end time.

This Choose time slots field displays only when you choose Type of Opening Hours as the last option: Enter hours. So, we also set the rule for this group as following.

The restaurant can have multiple time slots. Thus, enable the cloneable feature for the group in the General tab.

After having all the fields with reasonable settings, move to the Settings tab, set the Location as Post type, and select Restaurant to apply these fields to it.

Then, go to the post editor in Restaurant, you will see the custom fields displayed following the rule we set.

Just input the data. If the conditions weren’t wrong, all the fields would be displayed in the right way. If not, you should go back to the field settings to check the conditions carefully.

3. Displaying opening hours

Go to Bricks > Templates, and edit the template that we use for the single page.

Don’t forget to set the preview for the template. First, you should have a separate block for the opening hours section.

Then, add a heading for it.

Now, let’s display the timing information. It’s the main part of this article.

Since Bricks supports conditions to display or hide elements based on dynamic data, we will create elements for every field that we created in the previous step, then use conditions to show or hide the data.

No matter which kind of opening time the restaurant has, we still need to call all the data out. Then, based on the case it is, the elements to show the accurate time will display automatically.

3.1. For the first case: All days are the same

Add a new block to cover all the elements for this case. Instead of using a block, you can use a Div element, or anything else that can set this section separately. Since we will have some elements like this in the next part, we should rename it for better management.

This block displays only when the restaurant opens at the same time everyday, also means that it displays only when the first option in the Select field is chosen. So, we will have a rule for it.

Set that rule by clicking the Conditions icon as the below image shows.

The condition is based on the value saved in a custom field, so it’s a kind of dynamic data from custom fields. Thus, you should set the condition as Dynamic data.

Then, set the rule like this:

In there:

• 1: It’s the ID of the field that the condition is based on. To regulate that the value of the field will be used to compare, you need to add the :value attribute;
• 2: It’s the operation we use to compare. Bricks also provides some other operations, just choose one that makes sense;
• 3: It’s the value of the first option that we had for the Select field.

The whole of this condition means that the block displays only when the Choose an Option field is set as the All days are the same option.

Now, let’s add some elements inside this block to display the timing information. Since they are all inside the Block element, they also display only when the condition is met.

I use the Basic Text element for the name of the days. But, I added a Div element before it to style easily.

Next, add a Div element for the timing information.

Since the information is in the All days are the same group, we’ll enable the query loop for this Div to get data. Choose the Type of the query as the group we use.

There are also some options in the subfields of this group that lead to some different cases. Thus, we need to use the condition once again.

For the first three options (Open All days, Close All days, By Appointment Only), only the value of this field will be displayed in all three cases. So, I will add only one Basic Text element for them.

Add dynamic data from the corresponding field to this Basic Text element to get the information saved in the field.

Then, add a condition in the kind of dynamic data for it as well. This Basic Text element is displayed only when the Type of Opening Hours field is one of the three first options. In the other words, whenever the Enter hours option is not chosen, it will be shown. So, click on the Conditions icon and add a rule like this:

We also choose the field and the operation, also paste the value for comparison.

Otherwise, in the case that the last option is chosen, we have another Div element to display the right information.

We use this element to set a condition to display the time slots since they are displayed only when the last option is chosen. The condition is quite the same as the previous element for the first three options, but I change the operation to equal.

Inside the Div, add another Div element to set the Query since the values we want to get for timing information are in a cloneable group.

Then, add two new Basic Text elements, one is for the start time, and one is for the end time inside those Div elements.

We also use dynamic data for them all to get data from custom fields. Since we have some different start time and end time fields in different groups, just make sure you choose the right ones.

That’s done for the first case. Let’s go to the front end to check how the data displays. This is the result when you choose one of the three first options:

If you choose the last one and enter multiple slots, the timing will be displayed exactly.

So, the data displayed well follows the rule that we set. For a better look of the section, you can style each element a little bit.

However, it’s not the end. We’ve just displayed data when the first option in the first Select field is chosen. So, what happens when one of the rest is chosen? We haven’t set anything to display data in those cases.

Let’s move on for them now.

3.2. For the second case: Difference between Weekdays and Weekend

For the second case that there are different opening times between weekdays and weekends, we will use some elements and conditions which are quite the same with the first case. This, instead of adding new elements to display data, you should duplicate the block for the All days are the same case. It helps save time a lot since the logic to display information is exactly the same. In this case, we have a total of two blocks: one is for the weekdays, and one is for the weekend.

Our work now is changing the conditions, dynamic data, and content for each element.

I’ll get data for the Weekdays block first. It displays only when the second option in the field is chosen. So, the condition should be changed to the second option.

Also, change the content of the Basic Text element to the name of the day.

Next, choose the corresponding group in the query of the Div element for the timing info.

The dynamic data for the three options is also modified to the right field’s ID.

We also should change the condition to display or hide for the element as well.

Do the same with the Div element for the time slots including edit the conditions, query and dynamic data.

For displaying opening time on weekends, also duplicate this element. This section also displays when the second option in this field is chosen, it’s the same with the weekdays. So, there is no need to change the condition.

But, for the remaining elements, we also need to change the names and fields to the corresponding ones. And, remember to look for the right fields from the one related to the Weekend option, both in condition or displaying content.

After changing all the information, when you go to the single page on frontend, the data will display correspondingly with the one in the fields.

And what about the last case?

3.3. For the last case: Custom

Actually, it's quite the same with the second case. Instead of dividing days into two kinds as weekdays and weekends, now we will have 7 days from Mon to Sun.

So, just duplicate the block for the Weekend. Also change the name, field ID, option in the condition, as well as the field where we display data.

Then, we’ll get the expected result.

That’s done.

You also can style every element to have a better look.

So, from now on, whenever the timing information changes in the backend, this template will also change the data displayed on the page as well. Everything will be automatically thanks to the displaying conditions supported by Bricks.