DEV Community: WP Meta Box Plugin

How to Create a Recipe - P7 - Using Meta Box and Breakdance

WP Meta Box Plugin — Tue, 28 Mar 2023 02:15:21 +0000

In the previous posts of this series, we’ve gone through some ways to create a Recipe page using page builders. In today's practice, we're going to find out how to do it with another page builder: Breakdance.

This is the singular page that I created as an example:

Video Version

https://youtu.be/ybqLQFFMu5c

Before Getting Started

Each recipe is saved in a post of a custom post type and further information such as time, ingredients and so on will be saved in custom fields. So, we need Meta Box core plugin to have a framework for creating custom post types and custom fields easily. It’s free and you can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

MB Custom Post Types & Custom Taxonomies: to create custom post types and custom taxonomies;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each one individually.

Since this page is built by Breakdance, make sure you have it on your site.

Create a New Custom Post Type

Go to Meta Box > Post Types > Add New.

After publishing, you will see a new Recipes menu like this in the Admin Dashboard.

Create Custom Fields

Go to Meta Box > Custom Fields. Here are the fields that I created:

There is a special field that is one for video. Instead of using the URL field to save the video link, I use oEmbed. This field type allows us to display the video preview directly on the frontend.

After creating all the fields, move to the Settings tabs, choose Location as Post Type and select Recipe to apply these fields to this custom post type.

Then, you can easily see all the created fields in the post editor. Just fill in data into them.

Create a Template for the Page

Go to Breakdance > Add New to create a new template for the single post page of the recipe.

First, add a Section element.

Since the name of the recipe is the title of the post, add a Post Title element.

I’ll use some Div tags to divide content into sections and columns as you can see here.

Then, add the Post Featured Image element to display the picture.

The cooking time and others similar are in another column, so I also add another Div element. Adding a Text element inside, then insert dynamic data to it. Choose the corresponding field of the kind of time you want to display from the Metabox section.

You’ll immediately see the number here. To know which kind of it, you can add a prepend or append text for the element.

For others, duplicate the element, then change the connecting field as well as the append text.

Leave this first section with two columns, add a new Div element for the new section. Add a heading for it. For the content that saves in the corresponding custom field, add a Text element, then insert data from that field.

Do likewise with other sections or just duplicate this Div element. Also change the heading, and the connecting field of the Text element.

For the Video section, instead of using Text element, I’ll use Video element and connect it with the Video field. There is the preview because I set the custom field in the type of oEmbed. In the case you use any other field type, the URL may display in the kind of text instead of a video preview.

We’ve done all the information about the recipe.

Style the Page

Still in the template editor, change the settings of each element to have as your desire. Just customize one by one.

Then you will see the new look of the page.

Last Words

We’ve found out how to create a Recipe page using Meta Box and Breakdance. In the event that you use other page builders, refer more here. Or if you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen

WP Meta Box Plugin — Tue, 21 Mar 2023 02:23:34 +0000

If you’re having an e-commerce website and there are some on-sale products, you may want to display them on a page for the promotion campaign only. In this practice, we’ll find out how to show posts with this kind of specific criteria using Meta Box and Oxygen.

This is the archive page that I created as an example. Only products are on sale will be displayed:

Video Version

https://youtu.be/MeshaXL1hrg

Before Getting Started

The products will be the dishes which are posts of a custom post type. In addition to the basic information of the dishes such as the name, description and the image of the dish, there may be some extra information. They’ll be saved in custom fields.

In this case, I have two fields in order to save the original price and the promotional price. All the dishes, which have the promotional price, are on sale and will be displayed on the page.

In this practice, we need these tools:

Meta Box core plugin: to have a framework to create custom post types and custom fields;
MB Custom Post Types & Custom Taxonomies: to create custom post types;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
MB Admin Columns (optional): to display custom fields as an admin column.

Since we will use Oxygen to build the page, make sure you have it on your site and use version 3.9 or upper to have full integration with Meta Box.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type for the dishes.

Then, you will see a new menu like this in the Admin Dashboard. It’s your post type.

Create Custom Fields

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

Here are 2 fields I created as an example. The value stored in these 2 fields will be set to the condition to choose which dishes will be displayed.

Since I want to know which dishes are having promotion, I set to show both these fields as an admin column like this:

To do it, you will need to tick this box in both fields. You will have this setting when you enable the MB Admin Columns extension.

After creating all the fields, move to the Settings tab > Location as Post type > select Cuisines to apply these fields to it.

Now, you’ll see all the created custom fields in the post editor of the Restaurants post type.

Create the Archive Page

Create a Template

Go to Oxygen > Templates to create a new template for the page.

Next, create a new page. Note to set the created template to apply it to the page. Then, just edit the created page with Oxygen.

Remember to set a preview for the page.

First, add a Section component to contain all the posts.

Then, to have a page title, add a Heading component > Insert Data button and choose Title in the Post section to get the name automatically.

To set content in sections for easy styling later, you should use some Div components.

Add the Condition to Display Posts

Next, add a Repeater component to display all the posts as we want. However, we just choose to show only the dishes which are on sale, so we need to set a condition in the settings of this component.

In the Query section, choose ‘advanced’, and edit the query to add some parameters as below.

The first parameter means that we’ll get posts from the post type which has the slug as ‘cuisine’.

The second one is the condition based on the ‘promotional_price’ field. It means that if the field has any value in the field, the post will be displayed.

That’s all for the condition.

Display the Posts’ Information

Let’s add some other components inside the Repeater to display the information of the posts.

Add an Image component to get the image of the dishes which is the featured image of the post.

Click the Select Dynamic Data button as below picture, and choose the Featured Image option from the list.

Then, you’ll see all the featured images of the posts displayed.

To get the names of the dishes from the post title, add a Heading component > Insert Data button > choose Title in the Post section.

For the original price of the dish, use the Text component.

Choose Insert Data to get the data that saves in the custom fields. Since the field is created by Meta Box, select the Meta Box Field option and choose the corresponding field.

You’ll see the original price of the dishes displayed immediately.

For the promotional price, do likewise. Or you can duplicate the Text component used for the original price and just change the field connecting with it.

For the description of the dish which is the post content, add a Text component as well. Then insert data from the Content fields of the post.

Now, all the information has been obtained and displayed.

Style the Page

For styling, still in the page editor with Oxygen, you can style each component by changing their settings in the Advanced tab.

Then, you will see a new look of the page on the frontend.

Last Words

We’ve found out how to show posts with specific criteria using Meta Box and Oxygen. In the event that you use other page builders, refer more here. Or if you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Good luck!

How to Create a Recipe - P6 - Using Meta Box and Brizy

WP Meta Box Plugin — Tue, 14 Mar 2023 02:37:33 +0000

In the prior posts of this series, we’ve known how to create a Recipe page using some of the page builders. In today's practice, we’ll use another one named Brizy to do it with the help of Meta Box.

This is an example:

Video Version

https://youtu.be/wCKxZEQ4uRE

Before Getting Started

Each recipe is saved in a post of a custom post type and displayed in a single page. Besides some default fields that may help to save some basic information. You may want to have more space for the extra ones. So, we need custom fields for them.

To get started, we need the Meta Box core plugin to have the framework for creating custom post types and custom fields. It’s free and you can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

MB Custom Post Types & Custom Taxonomies: to create custom post types and custom taxonomies;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
Brizy (Brizy Pro version): to build the pager.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type.

After publishing, we’ll have a menu named Recipe in the Admin Dashboard.

Let’s create custom fields in the next step.

Create Custom Fields

Go to Meta Box > Custom Fields to create fields. These are the fields that I created:

Pay attention to a special field for the video. Since Brizy supports displaying the video preview from the link saved in the type of text. So, instead of using the URL field or the oEmbed to save the video link as other tutorials, I’ll use the Text field.

After creating all the fields, move to the Settings tab, choose Location as Post Type and then select Recipe to apply these fields to it.

Then, you can easily see all the created custom fields in the post editor. Just fill in the recipe’s details.

Create the Page

Go to Brizy > Templates to create a new template.

Remember to set the condition to set this template for the single post/page of the Recipe.

First, go to the Global Blocks to set the header for the page.

To display the name of the recipe, add a Title element. It’ll automatically get the data from the post title.

For the first section, I divided information into two columns. One column is for the image of the recipe and the other is for the timing information. So, add a Column element.

Drag the Featured Image element to the first column. The image will be displayed immediately.

Next, I’ll add Row inside the second column. Each row will be used for each type of timing information.

Inside the row, add a Text element, then choose Typography to customize the text. You will see a small icon button to choose more options from a dropdown list for the text.

The first one is to add a custom text that you can type any text as you want into the element. All the rest ones on the list are the names of custom fields. Since we save the data about the time in custom fields, choose the corresponding ones.

To compare the type of time, add another Text element. Set it as Custom Text to change the text into the type of time.

For other information about the time, do likewise.

Now, let’s get the Ingredient section. Add a Text element and set it as a heading. Then, type the name of the section.

To display the information about the ingredients that is stored in custom fields, add another Text element below the heading and also connect it to a custom field. The content will be displayed immediately.

For other sections, just do the same.

In the Video section, instead of adding Text, add a Video element. A default video will be displayed.

To display the video about the recipe, click to the preview button. Beside the pre-set link, there is also the icon to connect with custom fields.

We’ve done getting all the information about the recipe. Add a new block and then go to the Global Blocks section once again to add the footer for the page.

This is how it displays on the frontend.

Style the Page

Back to the template editor of Brizy, you can change the column width as well as the settings of each element to have the style as you want. Just customize one by one, then you will see the new look of the page.

Here is the result that I want.

Last Words

We've found out how to create a Recipe page using Meta Box and Brizy. More information is available here if you use other page builders. Keep an eye on our site for more insightful tutorials and feel free to suggest any ideas for us. Good luck!

How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen

WP Meta Box Plugin — Tue, 28 Feb 2023 02:19:40 +0000

In a website for booking restaurants, there will be a lot of different restaurants. Definitely, each restaurant has its own opening hours and you may want to create a section for the opening time for each one. So, in this next part of the series, we’re going to figure out how to add an opening hours section into the singular page by Meta Box and Oxygen.

This section will be the same as the last ones we created in the previous post.

Before Getting Started

In this case, I want to put the opening hours section for a particular restaurant. And each restaurant including its own information will be displayed on a singular page. So, all the detailed information about the restaurants’ working time will be saved in custom fields stored in the post containing the restaurants’ information.

We’ll display some extra information such as time slots for each day, and we'll use custom fields. So, we need Meta Box plugin to have a framework to create them. It’s free on wordpress.org. We also need additional Meta Box advanced features, which are accessible in the following extensions:

Meta Box Builder: this premium extension of Meta Box provides an intuitive UI in the back end to create and configure custom fields without using code;
Meta Box Group: this extension helps to arrange fields into groups;
Meta Box Conditional Logic: this premium extension allows you to create rules to control the display of the fields.

Finally, Oxygen Builder. Remember to use the 3.9 version or upper to have the native integration with Meta Box.

Create a Custom Post Type

If you read the previous post in this series, you can skip this step. In the event that you haven’t had a post type yet, just create a new one as usual.

Go to Meta Box > Post Types.

Create Custom Fields

This step is the same as what I showed in the previous post about displaying opening hours.

Go to Meta Box > Custom Fields > Add New to create a new field group. Then, add custom fields with the structure 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_opton field = the difference_between_weekdays_and_weekend option
Type of opening hours	type_of_opening_hours_weekdays	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choose_time_slots_weekdays	group		display only when: the type_of_opening_hours_weekdays field = the enter_hours option
Start time	start_time_weekdays	time picker
End time	end_time_weekdays	time picker
Weekend	weekend	group		display only when: the choose_an_opton field = the difference_between_weekdays_and_weekend option
Type of opening hours	type_of_opening_hours_weekend	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choose_time_slots_weekend	group		display only when: the type_of_opening_hours_weekend field = the enter_hours option
Start time	start_time_weekend	time picker
End time	end_time_weekend	time picker
Monday	monday	group		display only when: the choose_an_option field = the custom option
Type of opening hours	type_of_opening_hours_monday	select	1. open_all_day 2. close_all_day 3. by_appointment_only 4. enter_hours
Choose time slots	choose_time_slots_weekend	group		display only when: the type_of_opening_hours_monday field = the enter_hours option
Start time	start_time_weekend	time picker
End time	end_time_weekend	time picker
…	…	…	…	…
Sunday	…	…	…	…

As you saw in the table above, the first field is a Select field and there are 3 options that I filled in the Choice box as below.

These 3 options will be used to set the display rule of other group fields.

To set conditions to groups, for example, with the All days have the same opening hours group. Go to the Advanced tab, and then set the rule in the Conditional Logic section like this:

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

Similarly, if the Choose an Option field is chosen as the Difference between weekdays and weekend option, all the subfields of the Weekdays and Weekend group will be displayed. Or if the Choose an Option field is selected as the Custom option, the group fields for every day in a week will be shown up. That’s the concept of how to create fields.

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

The Type of Opening Hours field is select field. I have 4 options in the Choice box:

Open All day;
Close All day;
By Appointment Only;
Enter Hours.

The second subfield is a Group field named Choose Time Slots. Inside it, there are two subfields: Start Time and End Time.

If the restaurant has multiple opening hours, you can choose Enter Hours to display the Start Time and End Time field in the Choose Time Slots group. So, I will set the rule for this group like this:

In case the restaurant opens in multiple time slots, we’ll need this group to be cloneable. So, I tick this box as below:

After creating all the fields, go to the Settings tab of the field group, choose Location as Post Type, and select Restaurant to apply these fields to this post type.

Publish this field group and go to the post editor in Restaurant, you will see the custom fields here.

They work exactly like the rule we set.

Display the Fields’ Value

We’ll display the opening hours section using Oxygen. If you’ve had a template created by Oxygen for the Restaurant singular page, just go and edit it.

In the event you haven't had one, go to Oxygen > Template > Add New Template to create a new one.

Here, I’ve already had it. So, I just click Edit with Oxygen.

Next, add a new Div component.

In this practice, it includes some complex conditions to choose which fields will be got the value from. However, Oxygen hasn’t supported logic to choose which field yet, we need to use code in this practice. So, I will add a Code Block component.

Then, choose the PHP&HTML and you will see a space to add code.

The code is quite long, so I put it in my Github here. You can refer to it for more details. The code is divided into several parts to get corresponding group data. Because of the same concept in all parts, I’ll explain a typical part to be more clear about the logic.

<?php $options = rwmb_meta( 'choose_an_option' ); ?>
<?php if ( $options == "all_days_are_the_same" ): ?>
    <?php $same_days = rwmb_meta( 'all_days_have_the_same_opening_hours' ); ?>
        <?php $same_days_option = $same_days['type_of_opening_hours']; ?>
        <?php $choose_time_slots = $same_days['choose_time_slots'] ?>
        <?php if ( $same_days_option == "enter_hours" ): ?>
            <?php foreach ( $choose_time_slots as $time_slots ): ?>
                <?php echo $time_slots['start_time'] ?>
                <?php echo $time_slots['end_time'] ?>
            <?php endforeach; ?>
        <?php else: ?>
            <?php 
            $select_field = isset( $same_days['type_of_opening_hours'] ) ? $same_days['type_of_opening_hours'] : '';
            $group_field = rwmb_get_field_settings( 'all_days_have_the_same_opening_hours' );
            foreach ( $group_field['fields'] as $field ) {
                if ( empty( $field['options'] ) ) {
                    continue;
                }
            ?>
            <?php if($field['options'][$select_field]): ?>
                <?= $field['options'][$select_field]; ?>
            <?php endif; ?>
            <?php } ?>
        <?php endif; ?>

Let’s get through each line with me.

<?php $options = rwmb_meta( 'choose_an_option' ); ?>

I created a variable to get the value of the field Choose an Option which has the ID is choose_an_option. We will create a condition based on the returned value to decide which fields will be got the value from.

<?php if ( $options == "all_days_are_the_same" ): ?>
<?php $same_days = rwmb_meta( 'all_days_have_the_same_opening_hours' ); ?>

If the returned value is the first option, we will get the value of All days have the same opening hours group.

<?php $same_days_option = $same_days['type_of_opening_hours']; ?>
<?php $choose_time_slots = $same_days['choose_time_slots'] ?>

I also have 2 following variables that obtain the value of two fields: Type of Opening Hour and Choose Time Slots. They are the subfields of the All days have the same opening hours group. Since the Type of Opening Hour is a Select field with some options as the image below, based on the returned value of this field, we’ll get value from the Choose Time Slots group or not.

<?php if ( $same_days_option == "enter_hours" ): ?>
    <?php foreach ( $choose_time_slots as $time_slots ): ?>
        <?php echo $time_slots['start_time'] ?>
        <?php echo $time_slots['end_time'] ?>
    <?php endforeach; ?>

If the returned value of the Type of Opening Hour field is Enter hours, we’ll display the value from the Choose Time Slots group field with its subfields: Start Time and End Time fields. Since the Choose Time Slots group is cloneable, we have a loop here.

<?php 
$select_field = isset( $same_days['type_of_opening_hours'] ) ? $same_days['type_of_opening_hours'] : '';
$group_field = rwmb_get_field_settings( 'all_days_have_the_same_opening_hours' );
    foreach ( $group_field['fields'] as $field ) {
        if ( empty( $field['options'] ) ) {
            continue;
        }
?>
    <?php if($field['options'][$select_field]): ?>
        <?= $field['options'][$select_field]; ?>
    <?php endif; ?>
<?php } ?>

For other options in the Type of opening hours field, the above is used to display the label of that selected option. That's the end of the first section, corresponding to the first option of the Choose an Option field. If separate days have different opening hours, call the values from the remaining groups. The structure of those groups is the same as the All days have the same opening hours group, so just simply follow the same logic in the code. This section on the page is now displayed like this because this code is for getting data from custom fields only. To have the display with some other texts as the demo, I’ll add some heading, div tags and class for easier styling later. I’ve uploaded the code on Github, you can refer to it. Now, all the time slots with some additional texts are shown in the section already. However, it doesn’t look as beautiful as I want. So, I will add some CSS to style this section in the next step.

Style the Section

For styling, you can go back to the Oxygen visual builder and style each component if any. In this case, I‘ll add some CSS by going to Manage > Stylesheet and Add Stylesheet. This is the CSS that I’ve used:

.container.detail-restaurant .opening-hours {
max-width: 300px;
margin: 0 auto;
width: 100%;
}

.container.detail-restaurant .opening-hours h2 {
margin: 0 0 10px;
text-align: center;
border: 4px solid rgba(231,57,72,.85);
border-right: 0;
border-left: 0;
}

.container.detail-restaurant .detail-schedule .date-time {
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
}

.container.detail-restaurant .detail-schedule .date-time .hour .starting-hour:after{
content: '-';
margin: 0 5px;
}

.container.detail-restaurant .detail-schedule .date-time .hour .time-slot {
display: flex;
}

.container.detail-restaurant .detail-schedule .date-time .date {
font-weight: 700;
font-size: 15px;
}

.container.detail-restaurant .detail-schedule {
display: flex;
flex-wrap: wrap;
justify-content: center;
border-bottom: 4px solid rgba(231,57,72,.85);
padding-bottom: 10px;
}

Let’s see how the opening hour section displays on the frontend. It’s much more beautiful, isn't it?

To refer to all the code that I used, you can visit here.

Last Words

We’ve gone through all the procedures to display the Opening Hours section using Meta Box plugin and Oxygen Builder. Try it out and let us know how it goes in the comment section. If you have projects using Meta Box and Gutenberg, refer to our prior post in this series. Or if you have any tutorial suggestions, feel free to leave a comment. Thank you for reading. Best of luck!

How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks

WP Meta Box Plugin — Tue, 21 Feb 2023 02:06:04 +0000

In sale seasons, you may want to create an archive page to display only the products which are on sale, then this series is for you. In this practice, we’re going to show posts with specific criteria, in this case, it’s the products that are on sale.

I’ll create a page using Bricks to show them like this with an example of dishes for the products.

Video Version

https://youtu.be/fGm74bVzbkg

Before Getting Started

Each dish is a post of a custom post type and there may be some extra information you want to save in custom fields for them. In this case, I have two fields in order to save the original price and the promotional price. All the dishes which have the promotional price, which means that it’s on sale, will be displayed on the page.

In this practice, we need these tools:

Meta Box core plugin: to have a framework to create custom post types and custom fields;
MB Custom Post Types & Custom Taxonomies: to create custom post types;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
Bricks Builder: to create the page.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type for the dishes. Here, I name it Cuisines.

Create Custom Fields

Go to Meta Box > Custom Fields to create fields.

Here are the two fields that I’ve just created.

After creating all the fields, move to the Settings tab > Location as Post type > select Cuisines to apply these fields to it.

When creating any post in the Cuisines post type, you’ll see all created custom fields.

Create the Page

Go to Pages > Add New to create a new page.

Then, let’s edit it with Bricks.

First, add a new Section element to contain all the dishes’ information.

Next, add a Heading element to display the page’s title. Since the title of the page is the post title, choose Select dynamic data > Post title to get the page’s name.

Now, we’re going to get the dishes. However, we just want to display only the dishes that are on sale. So, we need to set conditions for them. Let’s see how to do it.

Set the Condition

Inside the Container, add a Div element to cover all of the post.

Since each dish is a post of a custom post type, switch the button to enable the Use the query loop option and set the query. Choose Post and Cuisines to get the data from posts of that post type.

Because we just want to display only the posts that are on sale, which means the Promotional Price field of those posts must have a value.

So, scroll down to the Meta Query section. Based on the value of the Promotional Price fields, we can clarify which dishes to display. Therefore, in the Meta Key, fill in the ID of the Promotional Price field.

Then in the Compare, choose Not equal. So, all the posts having value in the Promotional Price fields will be chosen to display.

That’s all for the condition. Next, we’ll display the information you want for each post.

Display the Cuisines Information

To display the image of the dishes, add the Image element.

Since these images are the featured image of the post, choose the Select dynamic data button and find the Featured Image option in the Post section.

Next, to get the name of the dish which is the post title, add a Heading element, and choose the Select dynamic data button, then find Post Title.

After that, add a Div element.

For the price of the dish, instead of adding Basic Text, I’d like to use the Rich Text element to get information about the price. The Basic Text allows you to get the data from the field only, but the Rich Text enables adding the extra text along with the data.

So, to display the original price, add a Rich Text element.

This is the section of the custom fields created by Meta Box for the Cuisines post type. Go to Meta Box (Cuisines) and then find the Original Price field.

For the promotional price information, do likewise.

To display the description of the dish which is the post content, add a Basic text and then connect it to the Post content fields through the Select dynamic data button.

Now, all the information is shown. This is how it displays on the front end.

Style the Page

Still in the page editor with Bricks, style any element you want by changing their settings in the Style tab.

The archive page now displays beautifully.

Last Words

Using custom fields is a brilliant way to create a condition for displaying posts. If you see this practice is helpful, try it out and share the result with us. Or, if you have any suggestions about which tutorial we should make, feel free to leave your comment below. Thanks for reading!

How to Create a Team Members Page - P6 - using Meta Box and Breakdance

WP Meta Box Plugin — Tue, 14 Feb 2023 01:55:59 +0000

In this series - Creating a team members page, we’ve done some methods with different page builders. Today, we’ll introduce a way to do it using Meta Box and Breakdance.

This is a sample we’ll use for this practice:

Video Version

https://youtu.be/r_9efMiekR0

Before Getting Started

In this case, each member will be a post in a custom post type and will be displayed in a name card as a box, like in the below image. It is created as a global block in Breakdance.

In the name card, the name and the avatar of the member are the title and the featured image of the post. Other information such as position, Facebook, Instagram, and Mail will be saved in different custom fields created by Meta Box.

For this practice, we need some tools:

Meta Box core plugin: to have the framework for creating custom post type and custom fields.
MB Custom Post Type: to create custom post type for the team members;
Meta Box Builder: to provide a UI in the backend to create custom fields easily;
Breakdance: to build the page.

Create a New Post Type

Go to Meta Box > Post Types, then create a new post type for the members.

Create Custom Fields

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

Here are the fields that I created:

We have a tutorial on how to create custom fields, you can refer to it for more information.

For the position information, choose the Select field that allows us to set some options to choose from.

For other information such as Facebook, Instagram, and Mail, we set them as the URL field to save the link for those social networks.

After creating all the fields, move to the Settings tab > Location > choose Post Type as the Team Members post type to apply these fields to it.

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

Then, just fill in the information.

Create a Global Block

Now, let’s create a global block to get and display the team member's information. Go to Breakdance > Global Blocks and create a new one.

Remember to set the preview for the global block as a post in the Team Members custom post type.

My global block is to display the information of each member on a name card. First, we'll add a div for this name card.

In this tutorial, each name card has 2 columns. One is to display the avatar and social icons. Another is to display the member information.

To divide the content into 2 columns, I’ll add 2 new divs. Each one for each column.

In the first column, add a Post Featured Image element to have the avatar saved as the post's featured image.

Next, we’ll create another div inside this column to contain all the social networks.

Now, select an Icon element to create the social network’s icon. Then, choose the icon's shape.

As the social links are saved in custom fields, we’ll insert the dynamic data into the Icon element. To do it, click the icon shown in the image below and choose the right field in the Metabox section.

Take the member's Facebook profile as an example:

For the Instagram and Mail information, do likewise.

Move to the second column, to get the name of the member, it’s the post title, so choose the Heading element then insert dynamic data for this element by choosing the Post Title option in the Post section. You see that the member’s name has just been obtained already.

For the position information, add a Text element. As the position is saved in the custom field created by Meta Box, we’ll insert the dynamic data into this element. Also, click the icon as we did before and choose the corresponding field name in the Metabox section. Then, you’ll see the member’s position appear.

To get a short description of the member, also choose the Text element and then choose the Post Content option in the Post section.

We have just displayed all the wanted information from a team member on the name card.

Style the Global Block

Go back to the created global block. Then, customize each element to get the wanted display.

After styling, you’ll see the new look of the name card, which contains each team member’s information.

Create the Page

Now, create a new page, and edit it with Breakdance. First, add a section to contain all the information of the team members.

Then, add a heading to name it.

To display the wanted posts, which means for the team members’ information, choose a Post Loop Builder element. In the Global Block section of this element's settings, choose the global block which has just been created.

To stipulate the source of data and the team members you want to display, go to the Query section > Custom, then edit the query like this.

In there:

In the Source data, it’ll be automatically set as the Post Types, then choose the name of the team members you want to get the post from.
In the Post per page section, enter the number to limit the number of posts you want to display on this page.

After applying the query, the team members’ information has just been obtained.

Now, I’ll set the layout for this page. Then, all of the team members’ information is displayed as I want.

Last Words

Is it so easy to create the team members' page using Meta Box and Breakdance without coding, right?

If you think this practice is helpful, try it out and share the results with us. And, don’t forget to follow our channel.

How to Create Menus for Restaurants - P2- Using Meta Box and Bricks

WP Meta Box Plugin — Tue, 07 Feb 2023 01:43:03 +0000

If you’re having a food ordering service or something similar, there will be a large number of restaurants on your site. Definitely, each restaurant has its own menu and you may want to create their own menu for each one. In this practice, we’re going to find out how to do it using Meta Box and Bricks Builder.

Here is my example:

Video Version

https://youtu.be/IKezivBoazI

Before Getting Started

Normally, we can create a new post type and each dish will be a post of that post type. However, in this case, I want to put dishes into a menu for a particular restaurant. And each restaurant including its information will be displayed on a singular page. So, instead of creating each dish as a separate post of different post type, all the detailed information of the dish in the menu will be saved in custom fields stored in the post containing the restaurants’ information.

In this practice, we need these tools:

Meta Box core plugin: to have a framework to create custom post type and custom fields;
MB Custom Post Type: to create custom post type for the restaurants;
Meta Box Builder: to have a UI on the back end to create custom fields easily;
Bricks Builder: to create the page to display the menu.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type for the restaurants.

Create Custom Fields

Go to Meta Box > Custom Fields to create fields. I’ll create all the fields with the structure like this:

Name	Field type	Settings
Menu Details	Group	Collapsible Cloneable
Name	Text
Price	Text
Description	Text
Image	Single Image

As you can see from the above image, there is a group with 4 subfields inside. These subfields are for the dish detail. To add more dishes, set this group to be cloneable.

Then, there’ll be an Add more button to allow adding more dishes.

If there are many dishes on the menu, it will be a bit messy. So, to avoid messing up, you can set this group to be collapsible.

It’ll be neat when adding information for the menu like this.

After creating all the fields, move to the Settings tab > Location as Post type > select Restaurant to apply these fields to it.

Then, you can see all the created fields in the post editor. Just fill in the dishes’ details.

Display the Menu Information

I already have a singular page that displays all of the detailed information of a restaurant which is a post in the Restaurant post type with a template below.

Let’s edit the template of this page with Bricks to add the menu.

First, to contain all the menu's information, add a new Div.

Next, choose the Heading element and name the menu.

To contain the dishes’ information, add the Container element inside the div. Then, to get the data of the dishes, enable the Use query loop button. And in the Query section, choose the type of data source. Because our information is saved in the custom fields which are included in a clonable group, we should choose the type as MB Group along with the name of the group that we have created for the custom field.

To get the dish’s name, choose the Heading element. As the name of the dish is saved in the custom field of Meta Box, use the Select Dynamic data button and choose the field name in which we store the name of the dishes. Now you can see that the dishes’ names have just been displayed.

For the dish’s price, choose the Basic Text element. It’s also stored in the created custom field. So, we also use the Select Dynamic data button and choose the field correspondingly. Then, you’ll see the dish’s price displayed immediately.

To add the dish’s description, do likewise with the dish’s price. Just duplicate the Basic Text element and connect it to the corresponding field to get the right information..

For the last information - the dish’s image, choose the Image element. Since the images are also saved in the custom field as well, choose the Select Dynamic data button and select the right field. Here, you see that the dish’s image has just been obtained already.

We have just displayed all the wanted information of the dishes.

Go to the frontend, you’ll see all of the menu information.

Style the Menu

Back to the page editor with Bricks Builder. Then, customize each element to style them in your own way. We can add some images to decorate the menu.

On the frontend, you’ll see the wanted style of the menu.

Last Words

We have finished creating a menu for a restaurant with simple steps. Hope this practice will give you a hand in creating a new one. Let’s try it and share the result with us.

Keep an eye on our blog and best wishes!

How to Display the Latest Products - P6 - using Meta Box and Breakdance

WP Meta Box Plugin — Tue, 31 Jan 2023 01:25:15 +0000

There are various ways to display the latest products section using Meta Box and page builders. In today's practice, we're going to do it using Meta Box and Breakdance.

I take the restaurants as an example for the posts as well as for the products:

Video Version

https://youtu.be/HrhJUBQA7Uk

Before Getting Started

In this case, my products are restaurants. Each restaurant will be a post in a custom post type and displayed in a box as in the image below. It is created as a global block in Breakdance.

In the block, the name of the restaurant and its image are the title and the featured image of the post. Further, you may want to add some extra information for your products, so I have something as a demo, such as logo, address, and voucher. This extra information will be saved in the custom fields created by Meta Box.

And, in this section, only the 6 latest restaurants will be displayed.

For this practice, we need these tools:

Meta Box core plugin: to have the framework for creating custom post type and custom fields.
MB Custom Post Types: to create custom post types for the products;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
Breakdance: to build the page and create a section to display the latest posts.

Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type to create a new post type for the products.

Create Custom Fields

Each restaurant has extra information, so we’ll create custom fields to save them. Go to Meta Box > Custom Fields to create fields. Here are the fields that I’ll create:

After creating all the fields, move to the Settings tab > Location > choose Post Type as the Restaurants post type to apply these fields to it.

Go to the post editor, you will see all of the created custom fields.

Just fill in the information.

Create a Global Block

Now, let’s create a global block to get the post information! Go to Breakdance > Global Blocks then create a new one.

Remember to set the preview for the global block.

My global block is to display the information of each post in a box like this.

First, we'll add a div for this box.

Next, add an Image element to display the featured image of the post. To insert dynamic data for this element, just click the icon in the image below and choose the Featured Image option in the Post section.

For the restaurant’s name, select a Text Link element to display the name in link format. Then, choose the Post Title option. And, if you want to set the hyperlink, choose the Post Permalink option in the Link section.

To display the restaurant’s address, add a Text element. As the address is saved in the custom field created by Meta Box, we’ll insert the dynamic data into this element. Also, click the icon as we did before and choose the corresponding field name in the Meta Box section. Then, the restaurant’s address will be obtained.

For the voucher information, do likewise.

For the last one - the logo of the restaurant, we’ll add an Image element for it. The logo is saved in the custom field as well, so we’ll also insert the dynamic data into this element.

We have just displayed all the wanted information from the restaurant.

Add the Section to the Homepage

Let’s edit the homepage with Breakdance. First, add a new section to the page to contain all the latest products.

Then, add a heading to name it.

For displaying the wanted posts, choose a Post Loop Builder element. In the Global Block section of this element's settings, choose the global block which has just been created.

To stipulate the source of data and the products you want to display in the section, go to the Query section > Custom > then edit the query like this:

In there:

In the Source data, it’ll be automatically set as the Post Types, then choose the name of the product you want to get the post from.
In the Post per page section, enter the number to limit the number of posts you want to display in this section.
In the Order section, the query also automatically sets the order by date and descending. It means that the latest post will be displayed first and then the older one. That’s exactly what we want in this practice. So, we just keep this setting by default.

After applying the query, you’ll see all the latest restaurants appear in the order you want.

Style the Section

Go back to the created global block. Then, customize each element, and also can add some CSS to the element to get the wanted display.

After styling the global block, back to the homepage, you’ll see the information of the posts will have a new look like this.

Next, we’ll set the layout of the section for better display. Go to edit the homepage with Breakdance, and change the setting of each element.

After that, you’ll see the new appearance.

Last Words

We’ve gone through all the specific steps to display the latest products section using Meta Box and Breakdance.

Let’s try it out and share the results with us! Thank you for reading!

How to Create a Product Page - P4 - Using Meta Box and Elementor

WP Meta Box Plugin — Tue, 17 Jan 2023 01:44:52 +0000

Let’s see how to create a great product page using Meta Box and Elementor with some simple steps! I also take a car rental for the product as an example.

Video Version

https://youtu.be/gI0M5nuzPj8

Before Getting Started

The product page is a singular page. All of its information is saved in a post of a custom post type. The name of the product and its descriptions are the title and content of the post. The remaining detailed information will be saved in the custom fields that are created by Meta Box.

So, in this practice, we need these tools:

Meta Box core plugin: to have a framework to create a custom post type and custom fields;
MB Custom Post Type: to create custom post types for the products;
Meta Box Builder: to have a UI on the back end to create custom fields easily;
Meta Box - Elementor Integrator: to get the dynamic data from custom fields created by Meta Box;
Elementor to build the page. I’m using Elementor Pro, which has integration with Meta Box.

Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type to create a new custom post type.

Create Custom Fields

The product has extra detailed information, so we’ll create custom fields to save them. Go to Meta Box > Custom Fields, then create fields as you want.

In my case, I just take a typical example of car rental with some common fields. Here are the fields that I created.

To know more about the field type, you may have your own specific information for the product. So, you may want to find out each field type to get the matching one. We have a video to talk about all the field types of Meta Box in detail. You can dig into it.

After creating all fields, move to the Settings tab > Location > choose Post Type as Car Rental to apply these fields to this post type.

In the post editor, you will see all of the created custom fields.

Create a Template

Go to the Elementor Theme Builder and create a new template. Since it’s for a singular page of a custom post type, we’ll create it in the type of a single post.

After setting the preview for the template, let’s edit it.

My product page has two columns like this:

So, first, add a widget and choose the layout for it.

In the first column, select the Image Carousel to display the image gallery as a slider. Then, to get the image that is saved in the custom field, go to the Dynamic Tags, find the Meta Box Field in the Post section, and choose the field that is set for the image. After that, you can see all of the images appear

Move to the second column to display other information about the product. The first one is the product's name which is saved in the post title. So, choose the Post Title element > select the Post Content element to get the product’s description.

For the rental price information, choose the Text Editor element. Since the rental price is saved in custom fields created by Meta Box, also use the Dynamics Tags > Meta Box Field in the Post section > choose the corresponding fields. A number will be displayed without a unit of the pricing.

To have the unit displayed, go to the Advanced section, and add the currency unit.

For the rest of the information in this section, they have the same style with 2 columns. The first one is the title, and the second one is the information that is obtained from the custom fields.

Thus, we’ll use the Inner Section with 2 columns as well for each row.

The first column is the title. So, select the Heading element, then just name and style it.

In the second column in the Inner Section element, add a Text Editor element, then connect it to the custom field to get the data using the dynamic tags. Take Car Year as an example.

You can duplicate the Inner Section to have other rows and change the information to get the right one.

After getting all of the information about the product, remember to set the condition for this template to apply it to the singular page of the Car Rental.

Now, in the frontend, all of the product's detailed information is displayed.

Style the Page

Still in the editor of the created template, just customize each element to get the wanted style.

After styling, you’ll see the new look.

Last Words

Hopefully, all the following steps above can give you a hand in creating a detailed product page. If you use other page builders, you can dig into the series on how to create a product page with different page builders.

If you want to suggest any tutorials, feel free to leave a comment. Thank you for reading. Good luck!

How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP

WP Meta Box Plugin — Tue, 10 Jan 2023 02:21:03 +0000

On an archive page, we'll display posts and filter them by the values stored in the custom fields created by Meta Box. With the help of FacetWP, we can do it easily without coding.

Here is an archive that I created for example.

Video Version

https://youtu.be/kjkVaC_QKQs

Before Getting Started

On the page, we'll have 2 sections. One is used to filter the restaurants by conditions. We'll create this part using FacetWP. The second part is to show up all the restaurants.

All the information of the restaurants is saved in a custom post type. Each restaurant is a post of that post type. Besides the basic information such as name and image of the restaurants which are the post title and featured images, other additional information will be saved in different custom fields.

In the upcoming execution, we'll create them one by one. No matter if you're using any page builder or not, you can also use FacetWP to filter posts as I'm doing in this practice. In this case, I chose Elementor to build the page and use the pro version.

For the custom fields, we need Meta Box core plugin and some of its extensions, including:

MB Custom Post Types & Custom Taxonomies: to create custom post type;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
Meta Box - FacetWP Integrator: to create a filter based on the custom fields;
Meta Box Elementor Integrator: to connect and display custom fields created by Meta Box in the Elementor's dynamic tags.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type.

After publishing, we'll have a new Restaurants menu in the admin dashboard.

Then, let's create custom fields to save restaurants' information in the next step.

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group. Here are the field that I created:

For the Voucher information, choose the Checkbox list field to allow adding some options in the Choices box. These options will be used as a condition to filter posts when creating a filter section in the next step.

After creating all the needed fields, move to the Settings tab, choose Location as Post Type and select Restaurant to apply these fields to this post type.

When creating a new post in Restaurant post type, you'll see all the created custom fields:

Create a Template

Depending on the page builder you're using, there will be some differences in the creating page and template. You may need to create a template for the page or edit the page directly.

In this case, with Elementor, we need to create one. This template is to display all the posts along with their information. About the filter section, we'll create it later.

Since we'll have a list of restaurants on the page, we need a special type of template which is a loop. This option is provided by Elementor Custom Skin. You can try it.

Go to Templates > Theme Builder and choose Loop.

Remember to set the preview for the template.

Since the image and name of the restaurants are the featured image and title of the post, add the Featured Image and Post Title elements.

For the address of the restaurant, add the Text Editor element. Since the restaurants' addresses are saved in a custom field created by Meta Box and the custom field is for post, let's use the Dynamic Tags > choose Meta Box Fields in the Post section.

And then, select the corresponding field. In this case, it's Address.

For the voucher information, do likewise.

Now, all the restaurant's information has been displayed.

Save the template and remember to set the condition to apply this template.

Create the Page

Go to Pages to create a new page and edit it with Elementor.

Add the Posts element to the page.

In the Skin setting of the Posts element, choose Custom and then select the default template as the one we've just created.

Next, go to the Query section, choose the source as the post type you want. In this case, it's Restaurant.

Now, the preview shows all the posts with the information as we want.

Let's see how to add a filter section in the next step.

Add Filter

This task will be done by FacetWP. If you use other page builders, you can also create the filter as I'm doing in this practice.

In the admin dashboard, go to Settings and choose FacetWP to create a new filter.

Since we will filter the post by the promotion of the restaurant which is saved in the Voucher field, choose the Data Source as Voucher in the Restaurant post type.

Save the changes and copy the shortcode of the facet.

Then, go back to the created page editor with Elementor, add a Shortcode element to paste the code we've just copied.

After applying the code, you'll see a section to filter posts in the frontend. All the restaurants having the same coupons are filtered correctly.

Style the Page

Go back to the template of the page, you can style each element as you want.

In the event that you want to have more further styling, you can use some CSS code.

All the changes in style will be applied immediately. This is how it looks on the frontend. The filter section created by FacetWP works well and all the posts have been filtered.

Last Words

Using custom fields with the help of FacetWP is a brilliant way to create conditions and filter posts. If you see this practice is helpful, try it out and share the result with us. If you want to suggest any ideas, feel free to let us know by leaving a comment. Good luck!

How to Display Images from Cloneable Fields - P4 - with Bricks

WP Meta Box Plugin — Tue, 03 Jan 2023 03:01:47 +0000

Continuing the series of displaying images from cloneable fields, today we’ll use Meta Box and another page builder - Bricks.

Take the brand logos as an example:

Video Version

https://youtu.be/UZ-8JEEUNyc

Before Getting Started

Typically, we’ll use a custom post type to create multiple posts for brands. But now, I’ll do another way more conveniently and simply - creating a settings page. All brand information will be input onto that page. It means that all of them will be in one place only.

For this practice, we need these tools:

Meta Box core plugin: to have the framework for creating custom fields. It’s free, so you can download it directly from wordpress.org;
Meta Box Settings Page: to create settings pages to input images;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
Meta Box Group: to organize custom fields into cloneable groups, where we input images.
Bricks: to build the page

Create a Settings Page

Go to Meta Box > Settings Page > Add New.

In my case, the settings page is quite simple and contains only the image of each brand. As there’s no special setting, I'll just change the option name.

After publishing, you’ll see a new settings page named Brands appears as below:

It’s blank now.

Create Custom Fields

Let’s create custom fields for the settings page. They will be used to save the brand information.

In the admin dashboard, go to Meta Box > Custom Fields > Add New. I created fields with the structure below.

Field	Types of Field	ID
Brand Group	Group	brand_group
Brand Logo Upload	Single Image	brand_logo_upload
Brand Name	Text	brand_name

This is a group with 2 subfields inside. It is also set to be cloneable to have more spaces to add information for different brands.

After that, go to the Settings tab and choose the Location as the settings page that we’ve created to apply the custom fields to it.

Back to the settings page, and you’ll see the created custom fields appear. Moreover, to add another brand’s information, you can press the Add more button.

Now, just fill in the brand’s information in the fields.

Display Images on the Frontend

Let’s edit a page with Bricks. I chose the homepage for example.

First, to contain all the brands' information, add a new section. Then, put it in any place where you want to show it on that page.

Next, to add the title of the section, choose the Heading element and name it.

In the Container element inside the section, select the Div element to contain the brand information.

Then, to get the data of brands, enable the Use query loop button. And in the Query section, choose the type of data source as MB Group: Brand Group. In the name, you can see the ‘Brand Group’ is the name of the group that we’ve just created.

For the brand’s logos, as they are saved in the custom field created by Meta Box, choose the Image element > choose the Select Dynamic data button > select the right field - Brand Image Upload. Now all the brand's logos are displayed already.

For the brand’s names, choose the Basic Text element. We also use the Select Dynamic data button and choose the field correspondingly. Then, you’ll see the brand’s name displayed immediately.

On the homepage, you’ll see all of the brand information.

Style the Section

Now, go back to the page editor with Bricks, choose each element and change the settings to style them in your own way.

After styling, all the brand logos are displayed as we want.

Last Words

Is it so easy to display the images from cloneable fields with Meta Box and Bricks without coding, right?

Remember to follow our channel and share your result in the comment section!

---The publication at Meta Box---

Display the Most Viewed Posts - P2 - using Meta Box and Oxygen

WP Meta Box Plugin — Tue, 20 Dec 2022 02:25:31 +0000

Displaying the most viewed posts on your business website is a convenient way to attract viewers and potential customers. In this article, we will show you how to display your popular posts by views using Meta Box and Oxygen.

The image below is a specific example:

Video Version

https://youtu.be/3P6KJHquRL4

Before Getting Started

Since we're going to display the most viewed posts, we'll use a third-party plugin to count the post views. It's the Post Views Counter plugin.

For the posts, we'll create a custom post type named Restaurants, and each restaurant will be a post of that post type.

When displaying the most viewed posts, you may wish to show more than just the title and featured image (the default fields). In this case, I'll display extra information about the address, voucher, and logo. They'll be saved in the custom fields of the post.

Here are the tools we need for this practice:

Meta Box core plugin to have a framework for creating a custom post type and custom fields;
MB Custom Post Type : to create custom post types;
Meta Box Builder : to have a UI on the back end to create custom fields easily;
MB Views: help us create a template for the most viewed posts section.

Finally, we need Oxygen Builder. You should use its 3.9 version or higher, which has native integration with Meta Box.

Create a New Custom Post Type

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

Create Custom Fields

Each restaurant may have extra information saved in custom fields, so go to Meta Box > Custom Fields and create them.

After creating all the needed fields, go to the Settings tab > Location > choose Post Type as the Restaurant post type we've just created to apply the custom fields.

In the post editor, you will see all of the newly created custom fields appear.

Count the Posts View

Normally, there is no information about the posts' view available in WordPress by default. We must do it on our own. Install the Post Views Counter plugin, then go to Settings > Post Views Counter and check the box next to the post type whose views you want to count.

Right after that, you can see the view numbers of each restaurant appear. Based on these numbers, we'll choose which restaurant has the most views and display it in the section.

Create the Section

Edit a page with Oxygen, e.g., the homepage.

First, choose the Section component to contain all of the restaurant information. Then, add a Heading element and enter the title.

Set a Condition

To get all the posts of the Restaurant post type, select the Repeater component. Then, go to the Query section to choose the data source and set conditions.

Normally, you can choose the default or custom type to get the posts. However, in this case, I only want a specific number of posts to be displayed based on the condition, so I chose the advanced query type.

Now, let's create conditions to choose which posts to display. We'll add some query parameters as follows:

First, add a post_type parameter to specify that we'll get only posts from the restaurant post type. In the box, as shown in the image below, enter the ID of the post type for which you want to get the data.

Then, add another parameter named meta_query. This aims to choose which posts in the restaurant post type are displayed.

To limit the number of posts to display in the section, we add the post_per_page parameter and set the number of posts you want to display.

We've completed the condition settings. After applying, there are 6 boxes for 6 posts. It's equivalent to the number of posts we set for the section.

Display the Restaurants' Information

Now, it's time to display information about each restaurant. In the div that is inside the Repeater component, add an Image component to display the restaurant's image, then connect it with the post's featured image.

For the voucher information, choose a Text component and connect it to the corresponding field.

The next piece of restaurant information we want to display is the restaurant's logo. Choose an Image component. Because the logo field is created by Meta Box and it returns the URL, go to the Image URL tab to get data from this field.

To get the restaurant's name automatically, add the Text component and connect it with the post's title.

For the address information, do the same with the Voucher field. Add a Text component, then connect it to the Address field.

That's all. Now, the information for all of the most viewed restaurants is now available on the homepage.

Style the Section

For styling, go back to the page editor with Oxygen. Then, choose each component and change the settings to style them.

You can also add some CSS in the Custom CSS tab to have a more advanced style.

Go to the homepage; all the featured restaurants are displayed as we want.

Final Words

Through this article, I hope you'll be able to create your own version of the most-viewed restaurants with the help of Meta Box and Oxygen. Just give it a try and provide your findings in the comment section. Best of luck!