Nowadays, having an OTA (Online Travel Agent) website is very popular with companies and agencies, especially ones that supply the 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 the first article of this 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:

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

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.

Enter the necessary information for the Hotel post type of the OTA website

Step 2: Create Custom Fields for the Hotel Post Type

In this step, we need the 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 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.

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.

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

Field label Field type
Hotel Image Image Advanced
Address Text Area
Map Open Street Map
Type of accommodation Check Box List
Facility Check Box List
Distance from city center Text
Room Group
Room name Text
Room image Image Advanced
Room area Text
Number of adults Number
Number of children Number
Room price Number
Room facility Check Box List
Check in date Date
Check out date Date
Our last room Number

Note: You have to enter the label and ID for each field and remember them as well. We’ll insert these IDs into 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.

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.

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.

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.

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 use the Add Fields button inside the Room field to create these sub-fields.

Add sub-fields to the Room field to includes all the information of hotel rooms.

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.

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

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

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. 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 to edit it without touching the main theme (You can also download the free Justread theme here 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.

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.

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

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.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

2 thoughts on “Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms

  1. Hi,

    I have a website and I want to add channel manager and OTA to my wordpress

    How can you guys help me

    Kind Regards, Rinesh

  2. Hi this is an incredible article, and I've been hunting for some similar guide and plugins for around a year now, messing around (and wasting money) on LOTS!

    One query though - I'd like to be able to create the exact same functions, but for a Routes website, displaying routes on a map. I'm currently using the CM Maps Route Manager plugin to create these routes, which works great EXCEPT there is no customisation over the look, search, and filter. I need mine to look like how Booking.com is, but for searching and displaying route pages. Could I achieve this with these plugins? Can I upload GPX/KML files to create the route, and display these and many others at the same time on a Google map (I have API keys)? Similar to how Booking.com displays all their hotel locations on their map, except individual Route pages would need to show their actual route on the map, done through the GPX/KML file upload I mentioned?

    Thank you for any further help you can offer! I'm literally a click away from purching the MetaBox bundle!! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *