How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
Tags: tutorial, ox, dynamicdata, oxygen
Published: 2022-12-13 01:50:23

We've already had a series of <a href="https://metabox.io/series/featured-restaurants/">showing the featured restaurants</a> for online food order websites. This time, we're going to do it using Meta Box and Oxygen.

<!--more-->

Here is my example:

<img class="aligncenter" src="https://i.imgur.com/5u7QYM9.png" alt="Example of showing featured restaurants " width="933" height="584" />

<h2>Video Version</h2>

https://youtu.be/GZ8dFWAhnXA

<h2>Before Getting Started</h2>

In my case, I have already made this homepage using Oxygen. The section is to show the featured restaurants which are chosen manually in the backend by a custom field. The restaurants will be stored in a <strong>post type</strong>, and each one will be a post. Along with the default information as title and featured image, I also add some extra ones and display them such as logo, voucher, and address, is saved in <strong>custom fields</strong>.

Furthermore, I also set a condition. It indicates that only selected posts will be displayed in this section. I'll use a special custom field to know when a post is selected.

Here are the tools we need for this practice:

First, to have framework creating a custom post type and custom fields, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>. We also need some Meta Box extensions for more advanced features. You can use <strong>Meta Box AIO</strong> or install the following ones individually:

<ul>

   <li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type</a>: to create custom post types;</li>

   <li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have a UI on the back end to create custom fields easily;</li>

   <li><a href="https://metabox.io/plugins/mb-admin-columns/">MB Admin Columns</a>: to show the status of whether the restaurants are featured or not in the list of posts.</li>

</ul>

The last one is Oxygen. You should use the 3.9 version or upper, which has integration with Meta Box already.

<h2>Create a New Custom Post Type</h2>

Go to <strong>Meta Box &gt; Post Types</strong> to create a new post type for the restaurants.

<img class="aligncenter" src="https://i.imgur.com/J971WAs.png" alt="Create a new custom post type" width="1000" height="579" />

<h2>Create Custom Fields</h2>

Go to <strong>Meta Box &gt; Custom Fields</strong> and create fields as you want.

<img class="aligncenter" src="https://i.imgur.com/BHG0wDo.png" alt="Create custom fields" width="1000" height="673" />

To select which restaurant is featured on the frontend, I'll create another custom field as the <strong>Switch</strong> type so that users can change the selection button.

<img class="aligncenter" src="https://i.imgur.com/Mr1qsiG.png" alt="Create custom field as Switch type to select which restaurant is featured on the frontend" width="1000" height="818" />

This field will display as a button and has two status. The <strong>Off</strong> status will indicate that you do not want to recommend the restaurant. Otherwise, the <strong>On</strong> status will let us know that you want to feature the restaurant.

<img class="aligncenter" src="https://i.imgur.com/RPBme1A.png" alt="Off and On status to show you want to feature restaurant or not" width="1000" height="698" />

Since I want to show the status of the restaurant and quickly compare the results when displaying the restaurants on the homepage, I use the <strong>MB Admin Columns</strong> extension from Meta Box. To do it, tick the box as in the image below. However, this is just an optional part

<img class="aligncenter" src="https://i.imgur.com/PZUWCYs.png" alt="Use MB Admin Columns extension to show the status of the restaurant and compare the results" width="1000" height="816" />

After that, go to the <strong>Settings</strong> tab &gt; <strong>Location</strong> &gt; choose <strong>Post Type</strong> as the <strong>Restaurant</strong> post type that we've just created to apply the custom fields to it.

<img class="aligncenter" src="https://i.imgur.com/6txnpzB.png" alt="Set location for the post type " width="1000" height="531" />

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

<img class="aligncenter" src="https://i.imgur.com/OEQLG3l.png" alt="All created custom fields in the post editor" width="1008" height="714" />

These are the posts that I created as an example. You can easily see which restaurants will be featured like this.

<img class="aligncenter" src="https://i.imgur.com/qI2RZfk.png" alt="Example of created posts to see which restaurants will be featured" width="1000" height="665" />

<h2>Create the Section for the Featured Posts</h2>

First, select a <strong>Section</strong> component to contain all of the restaurant's information. Add a <strong>Heading</strong> component and name it to have a title for the section.

<img class="aligncenter" src="https://i.imgur.com/1RadUWF.png" alt="Create the section for the featured posts" width="1000" height="519" />

<h3>Set a Condition</h3>

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

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

<img class="aligncenter" src="https://i.imgur.com/56WjHRI.png" alt="Select a Repeater component to get all the posts of the Restaurant post type" width="1000" height="501" />

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

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

<img class="aligncenter" src="https://i.imgur.com/gefnfAE.png" alt="Enter the ID of the wanted post type to get the data" width="800" height="296" />

Next, add another parameter as <code>meta_query</code>. This aim to choose which posts in the restaurant post type are displayed.

<img class="aligncenter" src="https://i.imgur.com/9dgat9w.png" alt="Add another parameter as meta_query to choose which posts in the restaurant post type" width="1001" height="550" />

<span style="text-decoration: underline;"><strong>Explanation:</strong></span>

<ul>

   <li>In the <strong>key</strong> option, fill in the ID of the field named <strong>Feature the Restaurant?</strong>, because the condition will be set based on the value of this field.</li>

   <li>In the <strong>type</strong> option, enter <strong>numeric</strong> since this switch field has 2 options: On or Off, corresponding to 1 and 0. They are the numeric type.</li>

   <li>In the <strong>value</strong> option, add the value as <strong>1</strong> because it's defaulted to the yes status of the switch field. It means that only posts where the switch field is in On status will be displayed in this section.</li>

</ul>

To limit the number of posts to display in the section, we add the last parameter. Choose the <code>post_per_page</code> parameter and set the number of posts you want to display.

<img class="aligncenter" src="https://i.imgur.com/1YXSJi4.png" alt="Add the post_per_page parameter to limit the number of posts to display " width="1000" height="708" />

We've done the settings for the condition, press the <strong>Add Parameters</strong> button.

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

<img class="aligncenter" src="https://i.imgur.com/hfC2d2H.png" alt="Equivalent number of boxes for the posts " width="1000" height="563" />

<h3>Display the Restaurants Information</h3>

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

<img class="aligncenter" src="https://i.imgur.com/wjnVBty.png" alt="Display the restaurants information" width="1000" height="594" />

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

<img class="aligncenter" src="https://i.imgur.com/lgm6Ybz.gif" alt="Choose a text component and connect it to the corresponding field" width="1000" height="563" />

To get the restaurant's name automatically, add the <strong>Heading</strong> component, and connect it with the title of the post.

<img class="aligncenter" src="https://i.imgur.com/fBjvwKO.gif" alt="Add a heading component to get the restaurant's name" width="1000" height="563" />

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

<img class="aligncenter" src="https://i.imgur.com/r5FcAHS.gif" alt="Add a text component to get the address information" width="1000" height="563" />

The last one we want to display is the restaurant's logo. Choose an <strong>Image</strong> component. Because the logo field is created by Meta Box and it returns the URL, go to the <strong>Image</strong> <strong>URL</strong> tab to get data from this field.

<img class="aligncenter" src="https://i.imgur.com/y9FhJjD.gif" alt="Choose an Image component to display the restaurant's logo" width="1000" height="563" />

That's all for getting information about the featured restaurants. Now, on the homepage, all the featured restaurants' information is displayed.

<img class="aligncenter" src="https://i.imgur.com/o9MDqBS.png" alt="All the information is displayed" width="700" height="979" />

<h2>Style the Section</h2>

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 <strong>Custom CSS</strong> tab to have a more advanced style.

<img class="aligncenter" src="https://i.imgur.com/wj2TehN.png" alt="Style the section" width="1000" height="787" />

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

<img class="aligncenter" src="https://i.imgur.com/5u7QYM9.png" alt="All the featured restaurants are displayed as wanted" width="933" height="584" />

<h2>Final Words</h2>

With the some easy-to-do steps above, you can have a hand in creating the featured restaurants' section easily. Let's try it out and share the results with us. Take care!