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:

Room’s page where you show all the room information in the frontend; Booking page in backend for your internal using; Booking page in frontend for your customer’s using; 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. There is another similar options, but free, which is the Online Generator tool. 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.

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

If you don’t want to spend money on premium plugin, but still don’t want to code manually, try this free Online Custom Post Types Generator.

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;

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.

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

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.

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 Assign To Post Type section.

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.

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:

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.