How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
Tags: tutorial, metabox, elementor, wpgridbuilder
Published: 2022-08-18 02:38:02

Once again, we have a new tutorial for those who have a food online order website or something similar. This time, we’re going to <strong>display the a section for featured restaurants on the homepage</strong> using Meta Box, Elementor, and WP Grid Builder. We believe that this kind of showcase will help a lot in attracting your customers.

<!--more-->

This is how the section displayed:

<img class="aligncenter" src="https://i.imgur.com/HkEGy4I.png" alt="Example of Featured Restaurant." width="1000" height="289" />
<h2>Video Version</h2>
https://youtu.be/w9JLxvGAy4Y
<h2>Before Getting Started</h2>
There is something we need to make clear first:

In this tutorial, I have already made the homepage using Elementor. You can see that this section is shown as a slider. It is called a grid created by WP Grid Builder. In the grid, there are cards and each one displays information about a restaurant.

<img class="aligncenter" src="https://i.imgur.com/9NML7JD.png" alt="The illustration of Grid and Card in the restaurant section" width="1001" height="310" />

The restaurant's information will be saved in a post of a <strong>custom post type</strong>. Their names and images are the titles and featured images of the posts. And other Information such as address, voucher, and logo will be saved in the <strong>custom fields</strong>.

So, here are the tools we need for this practice:

First, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have a framework for creating a custom post type and custom fields. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.

We also need some Meta Box extensions for more advanced features. You can use <strong>Meta Box AIO</strong> or install the following extensions 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>
</ul>
As I said before, I built the page with <strong>Elementor</strong>. I use the Elementor Pro.

For the section, I use <strong>WP Grid Builder</strong>. This plugin allows us to display the restaurants which meet a condition.
In addition, <strong>WP Grid Builde</strong>r helps to get information from fields, so we’ll need the integration between WP Grid Builder and Meta Box. Besides, Elementor helps to create the section, and display the grid created by WP Grid Builder. Thus, we’ll need the integration between WP Grid Builder and Elementor too. You can activate them in the <strong>Add-ons</strong> section of WP Grid Builder.
<h2>Step 1: Create a New Custom Post Type</h2>
Go to<strong> Meta Box</strong> &gt; <strong>Post Types</strong> to create a new post type for your restaurants.

<img class="aligncenter" src="https://i.imgur.com/OyfXcNz.png" alt="Create a new custom post type for " width="1000" height="767" />
<h2>Step 2: Create Custom Fields for the Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong>, then create fields as you want.

<img class="aligncenter" src="https://i.imgur.com/qcgRv8D.png" alt="Create custom fields for featured restaurants" width="1000" height="767" />

To select and display which restaurant is featured on the frontend, I’ll create an extra custom field as the <strong>Switch</strong> type.

<img class="aligncenter" src="https://i.imgur.com/tOUm3JX.png" alt="Create extra custom field" width="1000" height="808" />

The Off status will show that the restaurant is not featured. Otherwise, the On status will let us know that the restaurant is featured.

After creating all the needed fields, 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/ahZWfHd.png" alt="Set location for restaurant post type" width="1000" height="716" />

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

<img class="aligncenter" src="https://i.imgur.com/oYwjdKI.png" alt="Created custom fields in the post editor" width="1003" height="829" />
<h2>Step 3: Create a Card</h2>
Go to <strong>Gridbuilder</strong> &gt;<strong> All Cards</strong> &gt; <strong>Create a Card</strong>.

<img class="aligncenter" src="https://i.imgur.com/qlbNjeQ.png" alt="Create a card" width="1000" height="783" />

You can change all the settings of the cards as you want in the <strong>General</strong> section.

To add content to the card, move to the <strong>Blocks</strong> section. First, choose the <strong>Title</strong> block to get the restaurant’s name and drag it to any place where you want to display it.

<img class="aligncenter" src="https://i.imgur.com/qbApMn9.png" alt="Set title, drag and drop to the position you want to display " width="1000" height="639" />

To style the title, go to the <strong>Appearance</strong> tab in the <strong>Edit</strong> <strong>Block</strong> popup, and change the settings.

<img class="aligncenter" src="https://i.imgur.com/UprwS9C.png" alt="Style the title" width="1000" height="639" />

For the information that is saved in custom fields created by Meta Box, I’ll add a <strong>Custom Field</strong> block.

<img class="aligncenter" src="https://i.imgur.com/MNvRMls.png" alt="Add a custom block to get the information saved in custom fields" width="1003" height="639" />

You can add a class name for the block in the Class Name section. It’ll help in styling later.

Also in this popup, the <strong>Source Type</strong> is <strong>Custom Field</strong> by default. To get the data from the field which we want to display the information, choose the name of the field in the <strong>Custom Field</strong> section.

We do this to display the voucher and address information as well.

For the logo, it is an image. However, WP Grid Builder has no pre-made block for displaying images from the custom field. So, we have a special way to have it. Go to the <strong>Theme File Editor</strong> in the <strong>Appearance</strong> menu and add the following code to the <strong>functions.php</strong> file.

<img class="aligncenter" src="https://i.imgur.com/r4xqHop.png" alt="Create a new custom block to get the image." width="1005" height="787" />

<pre>add_filter(
    'wp_grid_builder/blocks', function( $blocks ) {

        // 'custom_image_block' corresponds to the block slug.
        $blocks['custom_image_block'] = [
            'name' =&gt; __( 'Custom image block', 'text-domain' ),
            'render_callback' =&gt; function() {

                // Get current post, term, or user object.
                $post = wpgb_get_post();
                $image = get_post_meta( $post-&gt;ID, 'custom_field_name', true );

                if ( empty( $image ) ) {
                    return;
                }

                $source = wp_get_attachment_image_src( $image );

                if ( empty( $source ) ) {
                    return;
                }

                printf(
                    '&lt;img src="%s" width="%s" height="%s"&gt;',
                    esc_url( $source[0] ),
                    esc_attr( $source[1] ),
                    esc_attr( $source[2] )
                );

            },
        ];

        return $blocks;

    }
);</pre>
<strong>Remark</strong>: Just replace the <code>'custom_field_name'</code> by the ID of the custom field that you want to get the image.

These lines of code are provided by WP Grid Builder. I put it on <a href="https://github.com/wpmetabox/tutorials/blob/0a8495cb82525150d7afacf5c65baea55fd721c8/create-a-simple-listing-using-Meta-Box-and-WP-Grid-Builder/functions.php"><strong>Github</strong> </a>so you can refer to it.

Now, go back to the card editor, a new block named <strong>Custom Image Block</strong> will appear. Just add it to the card.

<img class="aligncenter" src="https://i.imgur.com/moPVdC6.png" alt="Choose Custom Image Block to get the restaurant's logo." width="1000" height="639" />

There is no need to change any options for this block because, in the code, I have already stipulated the ID of the custom field which we need to get the image.

So, we’ve done the card.
<h2>Step 4: Create a Grid</h2>
Go to <strong>Gridbuilder</strong> &gt; <strong>All</strong> <strong>Grids</strong> &gt; <strong>Create a Grid</strong>.

<img class="aligncenter" src="https://i.imgur.com/1mU3IzZ.png" alt="Gridbuilder &gt; All Grids &gt; Create a Grid." width="1001" height="752" />

To get the content that you want to display in the grid, go to the <strong>Content Query</strong> section, and choose the content type as Post Types. Then, choose the name of the <strong>post type</strong> that we’ve just created for the restaurant so that the grid can get all the posts from that post type.

<img class="aligncenter" src="https://i.imgur.com/kPnv9cS.png" alt="choose the name of the post type created to get the content to display" width="1000" height="832" />

Then scroll down and pay attention to the <strong>Custom Fields</strong> section - an important part. This is where you set the condition to display the restaurants.

<img class="aligncenter" src="https://i.imgur.com/Pi3bYW5.png" alt="Set the condition to display the restaurants" width="1000" height="692" />

We’ll display the restaurants which have the <strong>Switch</strong> field in the On mode only. So, fill in the ID of the <strong>Switch</strong> field in the <strong>Key</strong> <strong>Field</strong> section.

In the <strong>Fields</strong> <strong>Type</strong> section, choose <strong>Numeric</strong>. Since the value saved in the <strong>Switch</strong> field is 1 or 0 depending on whether it is set On or Off. so its field type will be recognised as numeric.

Next, just enter <strong>1</strong> into the <strong>Value</strong> <strong>Field</strong> box to choose showing the restaurants that have the <strong>Switch</strong> field set in the On mode.

Now, let’s move on to set the layout for the grid.

You can set this section to be a slide by choosing the <strong>Carousel</strong> option in the <strong>Grid</strong> <strong>Carousel</strong> section.

<img class="aligncenter" src="https://i.imgur.com/6KThSVc.png" alt="choose the Carousel option in the Grid Carousel section" width="1000" height="791" />

For the navigation of the slider, go to the <strong>Grid Builder</strong> section.

Oh, since back then, I haven’t stipulated which information displayed in the grid yet. So, move to the <strong>Card Style</strong> section, and set both the <strong>Default Card</strong> and Post <strong>Type Cards</strong> as the Featured Restaurants Card which we’ve just created.

<img class="aligncenter" src="https://i.imgur.com/IWRqW5y.png" alt="Choose the card styles you want to display for the post as Featured Restaurant" width="1000" height="792" />

Then, we've done the grid as well.
<h2>Step 5: Display the Grid on the Frontend</h2>
Let’s edit the homepage with Elementor.

Add a section to where you want to display it on the homepage. Add a <strong>Heading</strong>, name it, and style it as you want.

Then, search for the <strong>Grid</strong> element and drag it into the section. In the <strong>Content</strong> box, we need to choose the grid that we have just created.

<img class="aligncenter" src="https://i.imgur.com/wykz8KD.png" alt="In the Content box, choose the grid that we have just created" width="1000" height="639" />

Then, you’ll see just some of the restaurants displayed on the homepage. They are the featured ones.

<img class="aligncenter" src="https://i.imgur.com/QBwcKeC.png" alt="Featured restaurants as displayed on the homepage" width="1000" height="514" />
<h2>Step 6: Style the Section</h2>
We’ll use some CSS for this.

In the editor for the created grid of WP Grid Builder, go to the <strong>Customization</strong> section and add CSS code.

<img class="aligncenter" src="https://i.imgur.com/OY8PeaF.png" alt="Add CSS" width="1001" height="789" />

I also put this code on <a href="https://github.com/wpmetabox/tutorials/blob/0a8495cb82525150d7afacf5c65baea55fd721c8/create-a-simple-listing-using-Meta-Box-and-WP-Grid-Builder/custom.css"><strong>Github</strong></a>, so you can refer to it as well.

Now, go to the frontend, you will see a new look of the section.

<img class="aligncenter" src="https://i.imgur.com/HkEGy4I.png" alt="The new and better look of the section after styling." width="1000" height="289" />
<h2>Last Words</h2>
With the help of WP Grid Builder, displaying posts by a condition seems like quite easy for everyone. Let’s try it out and share the results with us. With the combination of Meta Box, Elementor, and WP Grid Builder, you can build a lot of awesome things, I think.

If you want to watch more tutorials on other topics, don’t hesitate to leave a comment.