In the previous posts, we know how to show the featured restaurants using page builders. However, what if you don’t use any page builder, how can you do it? The answer is using MB Views. In today’s practice, let’s see how to display the featured restaurants using Meta Box only with the help of MB Views.

This is a section on the homepage that I created for example to show the featured restaurants:

The example of the created section

This homepage is built by Gutenberg and there is a section to show the featured restaurants which are chosen manually in the backend.

Video Version

Before Getting Started

Each restaurant is a post of a custom post type. Besides the basic information which is the title, featured image of the post, the restaurant’s extra information is saved in custom fields. So, we need the Meta Box plugin to have a framework to create custom post types and custom fields.

We’ll also need some of Meta Box extensions to have advanced features:

You can install these extensions individually or use Meta Box AIO to have all of them.

Create a Custom Post Type

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

Create a custom post type

After publishing, you’ll see your newly created post type on the menu.

Newly created post type appear in the menu dashboard

Let’s create custom fields.

Create Custom Fields

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

Create custom fields

Here are all the fields that I created.

Created fields

Besides some normal fields for typical information, I create a Switch field to choose whether to feature the restaurant or not.

Create a Switch field

Turning on the switch button means that the restaurant will be displayed in the section and vice versa.

Turn on the switch button

I’ll also show the values of this field in the admin column to see whether the restaurant is featured or not by ticking this box. This setting is available only when you have the MB Admin Columns.

Tick to choose Show as admin column

And this is how it displays on the admin dashboard.

The fields will display like this

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

Set location for the created fields

Then, you’ll see all the newly created custom fields in the post editor. The switch field is also displayed. You can turn on or turn off the button to choose to feature the restaurant or not. Just fill in the information for the restaurant.

All the newly created custom fields in the post editor

Create a Template for the Section

Go to Meta Box > Views > Add New to create a new template that will be used to the section.

Create a template for the section

In the Template tab, add some code to display the featured restaurants:

Add some code

<pre>{% set args = { post_type: 'restaurant', posts_per_page: -1 } %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}
{% endfor %}</pre>

In there:

{% set args = { post_type: 'restaurant', posts_per_page: -1 } %}

This line of code is to declare to get posts from the 'restaurant' post type.

The function mb.get_posts( ) is to get posts. And I also have a loop to get multiple posts as above.

Since we just want to display only the restaurants which are featured, we need to add a condition inside the loop.

Add a condition inside the loop

<pre>{% if post.feature_the_restaurant == 1 %}
{% endif %}</pre>

This is the condition to display the selected posts only. feature_the_restaurant is the ID of the Switch field. Corresponding to the On and Off status of it, the value that is saved will be 1 and 0, respectively. So, this line of code means that if the posts have the switch field turned On, they will be displayed.

Now, let’s insert fields inside the condition to display information from the posts. You can easily get these lines of code by using the Insert Fields button and then choose the corresponding fields you want to get the data from.

Insert the fields inside the condition

<pre><img src="{{ post.thumbnail.full.url }}" alt="{{ post.thumbnail.full.alt }}" width="{{ post.thumbnail.full.width }}" height="{{ post.thumbnail.full.height }}" />
<img class="logo" src="{{ post.logo.full.url }}" alt="{{ post.logo.full.alt }}" width="{{ post.logo.full.width }}" height="{{ post.logo.full.height }}" />
{% for item in post.voucher %}
{{ item.label }}
{% endfor %}
{{ post.title }}
{{ post.address }}</pre>

Add the code

That’s all for the code to get the information of the restaurants.

Now, set this template type as shortcode. After publishing, there will be a shortcode automatically generated like this:

Set the template type as shortcode

Let’s display the section on the homepage. Go to edit the homepage and choose the area where you want to add the section. In there, add a Heading block to name the section.

Add a Heading block to name the sectionNext, add a Shortcode block, paste the one you’ve just copied from the view.

Add a Shortcode block

Add the shortcode

Now, all the restaurants’ information has been displayed.

All the information has been obtained

Let’s move to the next step to style this section.

Style the Section

Back to Views and edit the created template. We’ll add some div classes to the code first.

Edit the created template

Next, go to the CSS tab and add some code.

Add some code in the CSS

I’ve uploaded all the code that I used on Github so you can easily refer to it.

Now, you’ll see the new look of the section on the homepage.

The new look on the homepage

Last Words

With MB Views, it’s a very convenient and quick way to show the featured restaurants anywhere on your site no matter what theme or builders you are using. Furthermore, whenever you change the page design, the section will be not affected. Let’s try it and enjoy!

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 -P3- Using Meta Box
  61. How to Create Buttons with Dynamic Link using Custom Fields
  62. How to Create Category Thumbnails & Featured Images Using Custom Fields
  63. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  64. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  65. How to Create Download and Preview Buttons - P3 - Using MB Views
  66. How to Create Download Buttons in WordPress - Using Custom Fields
  67. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  68. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  69. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  70. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  71. How to Create Notification Using Custom HTML Field
  72. How to Create Online Admission Form for School or University
  73. How to Create Online Reservation Form for Restaurants using Meta Box
  74. How to Create Relationships - P1 - Using Meta Box and Oxygen
  75. How to Create Relationships - P2 - Using Meta Box and Bricks
  76. How to Create Relationships - P3 - Using MB Views
  77. How to Create Relationships - P4 - Using Meta Box and Breakdance
  78. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  79. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  80. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  81. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  82. How To Display All Listings On A Map With Meta Box
  83. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  84. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  85. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  86. How to Display Images from Cloneable Fields - P3 - with Elementor
  87. How to Display Images from Cloneable Fields - P4 - with Bricks
  88. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  89. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  90. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  91. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  92. How to Display Product Variations - P3 - Using Meta Box and Bricks
  93. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  94. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  95. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  96. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  97. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  98. How to Display the Most Viewed Posts - P1 - using MB Views
  99. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen

Leave a Reply

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