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 display the a section for featured restaurants on the homepage using Meta Box, Elementor, and WP Grid Builder. We believe that this kind of showcase will help a lot in attracting your customers.

This is how the section displayed:

Example of Featured Restaurant.

Video Version

Before Getting Started

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.

The illustration of Grid and Card in the restaurant section

The restaurant's information will be saved in a post of a custom post type. 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 custom fields.

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

First, we need the Meta Box core plugin to have a framework for creating a custom post type and custom fields. It’s free and available on wordpress.org.

We also need some Meta Box extensions for more advanced features. You can use Meta Box AIO or install the following extensions individually:

As I said before, I built the page with Elementor. I use the Elementor Pro.

For the section, I use WP Grid Builder. This plugin allows us to display the restaurants which meet a condition.
In addition, WP Grid Builder 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 Add-ons section of WP Grid Builder.

Step 1: Create a New Custom Post Type

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

Create a new custom post type for

Step 2: Create Custom Fields for the Custom Post Type

Go to Meta Box > Custom Fields, then create fields as you want.

Create custom fields for featured restaurants

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

Create extra custom field

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 Settings tab > Location > choose Post Type as the Restaurant post type that we’ve just created to apply the custom fields to it.

Set location for restaurant post type

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

Created custom fields in the post editor

Step 3: Create a Card

Go to Gridbuilder > All Cards > Create a Card.

Create a card

You can change all the settings of the cards as you want in the General section.

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

Set title, drag and drop to the position you want to display

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

Style the title

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

Add a custom block to get the information saved in custom fields

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 Source Type is Custom Field by default. To get the data from the field which we want to display the information, choose the name of the field in the Custom Field 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 Theme File Editor in the Appearance menu and add the following code to the functions.php file.

Create a new custom block to get the image.

add_filter(
    'wp_grid_builder/blocks', function( $blocks ) {

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

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

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

                $source = wp_get_attachment_image_src( $image );

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

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

            },
        ];

        return $blocks;

    }
);

Remark: Just replace the 'custom_field_name' 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 Github so you can refer to it.

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

Choose Custom Image Block to get the restaurant's logo.

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.

Step 4: Create a Grid

Go to Gridbuilder > All Grids > Create a Grid.

Gridbuilder > All Grids > Create a Grid.

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

choose the name of the post type created to get the content to display

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

Set the condition to display the restaurants

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

In the Fields Type section, choose Numeric. Since the value saved in the Switch 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 1 into the Value Field box to choose showing the restaurants that have the Switch 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 Carousel option in the Grid Carousel section.

choose the Carousel option in the Grid Carousel section

For the navigation of the slider, go to the Grid Builder section.

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

Choose the card styles you want to display for the post as Featured Restaurant

Then, we've done the grid as well.

Step 5: Display the Grid on the Frontend

Let’s edit the homepage with Elementor.

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

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

In the Content box, choose the grid that we have just created

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

Featured restaurants as displayed on the homepage

Step 6: Style the Section

We’ll use some CSS for this.

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

Add CSS

I also put this code on Github, so you can refer to it as well.

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

The new and better look of the section after styling.

Last Words

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.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

Leave a Reply

Your email address will not be published. Required fields are marked *