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.

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

Before Get Started

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

  • Meta Box Plugin: is a framework which allows you to create custom fields in WordPress;
  • MB Custom Post Type: 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: 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. Otherwise, code every custom field by yourselves. It’s optional only. In this series, I use Meta Box Builder for fast, so that you can see everything easier;
  • Meta Box Group: 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

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.

Create a new field group
Create a new field group

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
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
Create a Custom Field in the Type of Number

Configure the information for that field then you get done.

Configure the field
Configure the field

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, look at the left column, and choose Advanced > WYSIWYG, you will get a WYSIWYG field.

Create a Custom Fields in the Type of WYSIWYG
Create a Custom Fields in the Type of WYSIWYG

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

At the left column again, choose Upload > Image Adv. (means Image Advanced) and fill in the field information on the right.

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

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
All the needed custom fields show on your 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 and choose the name of the created post type in step 1 at the Assign To Post Type section.

Fill in the information for the taxonomy
Fill in the information for the taxonomy

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 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.

Leave a Reply