How to Build a Hotel Booking Website Using Meta Box - P1

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.

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

You will see a new menu appears on your admin menu named Room (name of the 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:

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.

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

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.

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 Image Advanced for the Gallery

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:

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.

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.

Configure information for this taxonomy.

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

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

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.

• How to Build a Hotel Booking Website Using Meta Box - P1
• How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
• How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
• How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page

• How to Build a Hotel Booking Website Using Meta Box - P1
• How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
• How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
• How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page