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. 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).
Step 2: Create Custom Fields for Room Information
A hotel room usually has common information as below:
|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|
|Gallery||Image gallery of the room||Image Advanced|
- 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, 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.
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:
- Code to get and show fields’ values > read this post: How to Create a Product Page using Meta Box Plugin;
- 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.
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
- How to Create ACF Flexible Content Field with Meta Box
- How to Create a Product Page using Meta Box Plugin
- How to Add Related Posts to WordPress Using Meta Box
- How to Create a Classified Ads Website using Meta Box
- Create Posts Series in WordPress Using Meta Box
- How to Add Guest Author in WordPress using Meta Box (Part 1)
- How to Add Guest Author in WordPress using Meta Box (Part 2)
- Create Dynamic Favicon in WordPress using Meta Box plugin
- How to Build a Hotel Booking Website Using Meta Box – P1