Create an OTA Website Like Booking.com with Meta Box - P1: Create a Page to Introduce Hotel Rooms
Tags: wordpress
Published: 2020-09-29 02:23:17

Nowadays, having an OTA (Online Travel Agent) website is very popular with companies and agencies, especially ones that supply the [hotel booking](http://metabox.io/series/hotel-booking) service. Some of the most popular websites in this field are agoda.com and booking.com with professional hotel booking systems. If you want to build an OTA website just like them, follow our series "**Create an OTA Website Like booking.com and agoda.com**".

In this first article of the series, we'll create a single page for each hotel and create custom fields to enter the hotel information, and then display them on the website.

To do it, you need to install the following plugins:

-   [Meta Box](https://metabox.io/) plugin: This plugin provides a framework that helps you create [custom fields](https://metabox.io/series/custom-fields/). You can download this free plugin on [wordpress.org](https://wordpress.org/plugins/meta-box/).
-   [Meta Box Builder](https://metabox.io/plugins/meta-box-builder/): This is a premium extension of Meta Box plugin. It helps you to create custom fields with an intuitive user interface (UI) right on the backend.
-   [MB Custom Post Type](https://metabox.io/plugins/custom-post-type/): This free extension of Meta Box helps you to create post types easily. Alternatively, you can use the free tool [Post Type Generator](https://metabox.io/post-type-generator/) if you don't want to install the plugin.
-   [Meta Box Group](https://metabox.io/plugins/meta-box-group/): It's a premium extension of Meta Box plugin to create field groups to group custom fields together. This helps you to display custom fields in a well-organized way and make it more convenient to input data.

After installing and activating all the above plugins, follow these steps:

### Step 1: Create a New Post Type for the Hotel Page

**MB Custom Post Type** can help you do it easily. First, on the **Admin Dashboard**, go to **Meta Box** > **Custom Post Type**, click **New Post Type**.

![Create a new post type for the Hotel page of the OTA website](https://cdn-images-1.medium.com/max/800/0*hqqjG-kuWIONLp8X.png)

After that, enter the necessary information for the post type (I named this post type as **Hotel**) and click **Publish**. You can get more details about how to create custom post types [here](https://vi.fitwp.com/tao-custom-post-type-code-va-plugin/).

![Enter the necessary information for the Hotel post type of the OTA website](https://cdn-images-1.medium.com/max/800/0*POHXgnMfAYK6eKfh.png)

### Step 2: Create Custom Fields for the Hotel Post Type

In this step, we need the [Meta Box Builder](https://metabox.io/plugins/meta-box-builder/) extension to add custom fields for the newly created **Hotel** post type. Obviously, you can code manually to save money. But if you want to save your time from coding or you're not a coder, you can still use UI to create custom fields with the free [Online Generator](https://metabox.io/online-generator/) tool of Meta Box. Use it to generate code then add this code to the `functions.php` file.

In this article, I'll use **Meta Box Builder**. First, go to **Meta Box** > **Custom Fields** > **Add New**.

![Use Meta Box Builder to create custom field for the Hotel post type.](https://cdn-images-1.medium.com/max/800/0*suOKv-KJs--nsLLh.png)

Next, just drag and drop the desired fields on the left column to the **Fields** section on the right. Here are the custom fields and sub-fields that I've created for the hotel introduction pages:

![Drag and drop the desired fields on the left column to the Fields section to build a hotel page of the OTA website.](https://cdn-images-1.medium.com/max/800/0*VEW40v1d5n78BPyo.png)

Specifically, I choose the following field types corresponding to each field:

**Field labelField type**Hotel ImageImage AdvancedAddressText AreaMapOpen Street MapType of accommodationCheck Box ListFacilityCheck Box ListDistance from city centerTextRoomGroupRoom nameTextRoom imageImage AdvancedRoom areaTextNumber of adultsNumberNumber of childrenNumberRoom priceNumberRoom facilityCheck Box ListCheck in dateDateCheck out dateDateOur last roomNumber

**Note**: You have to enter the label and ID for each field and remember them as well. We'll insert these IDs to the code in the upcoming steps.

![Enter the label and ID for each field of the hotel page that is used to introduce hotel rooms.](https://cdn-images-1.medium.com/max/800/0*i3aZvaYtNrT7gl6t.png)

In addition, pay more attention to some special fields below:

**Check Box List** Field: In the **Choices** box, enter each choice in a line with the following syntax:

`ID-of-choice`: Choice name

![Enter each hotel name in a line.](https://cdn-images-1.medium.com/max/800/0*8pJ3o3ew1jBNQnyI.png)

**Address** field: it's used to enter the hotels' address on the back end.

![Enter the hotels' address on the backend of your WordPress website.](https://cdn-images-1.medium.com/max/800/0*gFG7Wtgm3kCtj6b3.png)

**Map** field: Fill in the **Address field** box with the field's ID of the **Address** field above to display the hotel location on a map on the front end.

![Display the hotel location on a map on the front end of your WordPress website.](https://cdn-images-1.medium.com/max/800/0*_tszzyRMQ2v4Y20x.png)

The **Room** group field is the group that includes all the information of hotel rooms such as Room name, Room image, Room area, Number of adults, Number of children, Room price, Room facility, Check-in date, ... Just drag and drop these fields to the **Room** field, and they will become the sub-fields of the **Room** field.

![Add sub-fields to the Room field to includes all the information of hotel rooms.](https://cdn-images-1.medium.com/max/800/0*uJTl4G_qC1RltJPC.png)

After creating fields, go to the **Settings** tab and choose the **Post types** as **Hotel**.

![Choose the Hotel post type for the page that introduce hotel rooms of the OTA website.](https://cdn-images-1.medium.com/max/800/0*IT1NiNmAKNu5-BCV.png)

### Step 3: Enter Information for Each Hotel

After creating post types in step 1, a new menu named **Hotel** shows up on the **Admin Dashboard**. Go to this menu to add hotels or enter the information for the hotels you want.

![Enter information for each hotel in the hotel menu of the OTA website](https://cdn-images-1.medium.com/max/800/0*M0sXMaq0tkDYy9fP.png)

The custom fields that we created in step 2 are all displayed in each hotel. Now you just need to fill in the information for these fields:

![Fill in the information for the custom fields of the hotel page that is used to introduce hotel room of the OTA website](https://cdn-images-1.medium.com/max/800/0*AyXResFv9x_DuZ-e.png)

**Note**: This is just the step to enter information from the administrator account on the backend. Normally, OTA websites have a page that allows hotel owners to add or edit information for their hotels right on the front end. To do it, in the next step, you can follow [this article](https://metabox.io/p1-add-guest-author-in-wordpress/#allow-guest-user-to-submit-posts-in-the-frontend). After that, hotel owners can create accounts, log in, and submit their hotel information in available forms right on the front end.

### Step 4: Display Hotel Information on the Front end

In this step, I'm using Justread theme. I'll create a [child theme](https://gretathemes.com/what-is-child-theme/) to edit it without touching the main theme (You can also download the free Justread theme [here](https://gretathemes.com/wordpress-themes/justread/) to try it).

First, I'll create a file named `single-hotel.php` to overwrite the `single.php` file with the following content:

<?php\
/**\
 * The template for displaying all single hotel\
 *\
 * @link <https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post>\
 *\
 * @package Justread\
 */

get_header(); ?>\
    <aside id="secondary" class="widget-area">\
        <?php dynamic_sidebar( 'sidebar-single-hotel' ); ?>\
    </aside><!-- #secondary -->

    <div id="primary" class="content-area">

    <div id="primary" class="content-area">

        <main id="main" class="site-main">\
        <?php\
        while ( have_posts() ) : the_post();\
            get_template_part( 'template-parts/content', 'single-hotel' );

            // If comments are open or we have at least one comment, load up the comment template.

            if ( comments_open() || get_comments_number() ) :\
                comments_template();\
            endif;\
        endwhile; // End of the loop.\
        ?>\
        </main><!-- #main -->\
    </div><!-- #primary -->\
<?php\
get_footer();

**Explanation:**

-   `<?php dynamic_sidebar( 'sidebar-single-hotel' ); ?>` : this code is used to create a separate sidebar for single hotel pages then move it to the left of the OTA website.
-   `get_template_part( 'template-parts/content', 'single-hotel' )`: this code will use the `content-single-hotel.php` file instead of the `content.php` file to change the single hotel page's content.

Additionally, you can find the content of the `content-single-hotel.php` file [here](https://github.com/wpmetabox/tutorials/blob/master/series-hotel-bookings-agoda/booking-hotel/template-parts/content-single-hotel.php).

Next, you should style the displayed fields with CSS to make it more beautiful. The content of my `style.css` file for styling the single hotel page is [here](https://github.com/wpmetabox/tutorials/blob/master/series-hotel-bookings-agoda/booking-hotel/style.css).

And here is the display of the information of the hotels on the single hotel page of my website:

![Display the information of the hotels on the single hotel page of the OTA website](https://cdn-images-1.medium.com/max/800/0*sQate7np2TGwk_uF.png)

It's all done! We've finished displaying information of hotels on each single hotel page.

### Last Words

In the upcoming articles, we'll create filters to search for rooms to book on both the hotel archive pages and single hotel pages. So, don't forget to follow us! If you have any questions or ideas, feel free to share that with us in the comment section.

 --- --- --- 

The publication at [Meta Box](https://metabox.io/create-ota-website-with-meta-box-p1/).