In this series, we would like to introduce a way to build a Hotel Booking website using Meta Box. Usually, a Hotel Booking page has 4 common pages as below:

  1. Room’s page where you show all the room information in the frontend;
  2. Booking page in backend for your internal using;
  3. Booking page in frontend for your customer’s using;
  4. Booking management page in the backend.

We are going to create all the above pages in this series with 4 posts. Regarding the customer accounts to make a booking, we have a post for your quick reference: How to Add Guest Author in WordPress using Meta Box.

Remember that this series is for hotel owners. In case that you want to build a website like booking.com or agoda.com, which is called the OTA site, please read this series instead.

But first of all, we need to prepare some following tools.

Before Get Started

We should install and activate all the following plugins and themes:

  • Meta Box Plugin: is a framework that allows you to create custom fields in WordPress;
  • MB Custom Post Type & Custom Taxonomy: This is an extension of the Meta Box plugin. It allows you to create and manage custom post types and custom taxonomy in an intuitive interface;
  • MB Frontend Submission: is an extension of Meta Box. It allows you to display custom fields in frontend to input data;
  • Meta Box Builder: This is an extension of Meta Box as well. It allows you to create, edit, and manage custom fields in an intuitive interface. If you don’t want to touch any code, you should use this plugin. There is another similar option, but free, which is the Online Generator tool. Otherwise, code every custom field by yourself. It’s optional only. In this series, I use Meta Box Builder for fast, so that you can see everything easier;
  • Meta Box Group: This is an extension of Meta box. It allows you to group multiple fields and clone them easily.
  • Theme: to avoid designing an interface for my website, I use a free theme which is Justread from Gretathemes.com. In the event that you’re using a page builder on your website, Meta Box totally compatible with them, especially Elementor and Beaver Builder. By using an integration plugin (free), you can get value from any field in the backend to show on the frontend easily without coding.

Now, let’s get started.

Part 1: Create the Room’s Pages

This is the page where you show all the hotel room information. Your customers visit this page, look around, and make a booking then.

Step 1: Create a New Custom Post Type

We are going to create a new custom post type used for the room’s page. MB Custom Post Type will help us to do this without coding.

In the admin dashboard, go to the Meta Box menu > Post Types > New Post Type.

Add a new custom post type in Meta Box menu
Add a new custom post type

Fill in the information for your new post type, then press Publish.

Fill information for the new post type in Meta Box Plugin

You will see a new menu appears on your admin menu named Room (name of the new post type).

Room menu appears in the admin menu after creating a new post type
A new menu appears in the admin menu after creating a new post type

Bonus: try this free Online Post Types Generator from Meta Box if you don't want to use the plugin.

Step 2: Create Custom Fields for Room Information

A hotel room usually has common information as below:

Information Description Field Type
Title Name of the room Default of WordPress
Quantity Quantity of the rooms in the same type Number
Number of Adults Occupancy Number
Max Children per room Occupancy Number
Additional information WYSIWYG
Gallery Image gallery of the room Image Advanced
Price Number

In there:

  • We use Title by the default field from WordPress. And, we will create new fields for others;
  • The field for Price: to make this instruction simple, I use Number for this field. If you have multiple prices for each room, you may create more fields.
  • If you need more fields for more information, just create ones. Meta Box supports 40+ field types that can meet all your needs.

Create a New Field Group

Before creating any custom fields, we need to create a field group (means custom meta box) to hold all the wanted fields.

Go to the Meta Box menu > Custom Fields > Add New.

Go to the Meta Box menu > Custom Fields > Add New.

Fill in the information for this group. In the Settings tab, choose the post type is which one you create in step 1.

Choose the post type where you want the custom fields display

Next, we create one by one field inside this field group.

Create a Custom Field in the Type of Number

In the Edit Field Group page, look to the left column and choose Number. A Number Field appears immediately in the right area.

Create a Custom Field in the Type of Number

Configure the information for that field then you get done.

Configure the information for that field then you get done.

We have 4 things which are the quantity of room, number of adults, number of children, and price. They are all in numbers, so we create 4 fields in the type of number.

Create a Custom Fields in the Type of WYSIWYG

As the same way of creating Number fields, choose WYSIWYG, you will get a WYSIWYG field.

Create a Custom Fields in the Type of WYSIWYG

Create a Custom Fields in the Type of Image Advanced for the Gallery

Look for Image Advanced in the drop-down menu and fill in the information for this field.

Look for Image Advanced in the drop-down menu and fill in the information for this field

Then, you will see all the field you created in the field group as below:

All the needed custom fields show on the field group

Finally, press the Upload button at the right above corner to save all the fields. Now, go to create a new post in Room, you will see the fields display on the post’s edit page.

Custom fields display on the post’s edit page
Custom fields display on the post’s edit page

Step 3: Create a New Taxonomy to Differentiate the Room Types

In the case that your hotel booking page has multiple rooms in the same type, eg: single, double, triple, quad, queen, king, twin. You’ll need a taxonomy to group those rooms into a type.

So, we create a new taxonomy named room-type, which allows you to create different room types. MB Custom Post Type of Meta Box helps you to this well.

In the admin dashboard, go to the Meta Box menu > Taxonomies > Add New.

Create taxonomy for hotel room type
Create a new taxonomy for room type

Configure information for this taxonomy.

Fill in the information for the taxonomy

And choose the name of the created post type in step 1 at the Post Type tab.

choose the name of the created post type in step 1 at the Post Type tab.

Press Publish to save to taxonomy, then go to the Room menu (your created post type) to create your needed room types for your Hotel Booking Website.

In the Room menu, choose Room Types and input the name of the room types as you want into the Name field > Add new Room Type. This actually is the same as creating Categories as you might know.

Create hotel room types
Create room types

Now, try to create a new post for a room, you will see this:

a fields is available to add the hotel room type

Step 4: Display Room Information in the Frontend

Now, we get the values from the created custom fields and show them all on a page called Room Page in the frontend. We had instructions to do this in the last blog posts with two ways of action:

  1. Code to get and show fields’ values > read this post: How to Create a Product Page using Meta Box Plugin;
  2. Use a page builder (Elementor or Beaver Builder) then get values directly by using widget / module without coding > read this post: How to Create a Classified Ads Website using Meta Box.

Final Words

You’ve got done in creating a Hotel booking page for showing your hotel room information already. This page is for your customers to research information before making any bookings. For the next steps, we will create the booking pages in both the backend and frontend. Please look forward to our upcoming posts.

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

1 thought on “How to Build a Hotel Booking Website Using Meta Box - P1

Leave a Reply

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