How to build a hotel site using WordPress

How to build a hotel website using WordPress

We all know WordPress first started as a blogging platform and later on it has developed and become the most popular CMS in the world. It means that not only blog but also any kind of website can be created by using WordPress. However, my post today will focus on the hotel field with booking room service to show you how to build a hotel website using WordPress.

As a specific type of website, a hotel booking website has it own requirements such as  Search Room Form, Room List (with features of each type), Room Management, Booking Management, etc. which we will solve one by one.

In this article, necessary elements and features for a hotel website will be analyzed and if you are looking for other information related to the hotel aspect, you can take a look at these articles:

As a specific hotel website, following services/ features should be provided to users:

  • The search room form
  • Room management
  • Booking
  • Payment
  • User management

I will divide this tutorial into two ways of approach (the basic approach would be skipped).
– First way: Using e-Commerce plugin to manage the rooms as products. In this case, I would prefer to use the most popular plugin – WooCommerce.
– Second way: Using the plugin which specially fits with this specific type of website.

Creating the hotel site

First of all, before touching to the first approach, I would like to mention about the The search widget. If you take a look around, you will see the search widget is a must have element of a hotel booking website. Customers will not waste their time on seeing the whole web page to find available rooms and room types.

How to build a hotel site with WordPress - Agoda search widget
Agoda search widget
How to build a hotel site using WordPress - Booking.com search widget
Booking.com search widget

 

How to build a hotel site using WordPress - Hotel Master theme search widget
Hotel Master theme search widget

And to achieve this feature, you can simply download and use some free plugins like Advance Search Widget or AB Categories Search Widget. Both of them provides the ability for you to restrict categories you would search. In basic need, your search widget much cover these options: Check-in dateCheck-out date, Number of guests (adult and children). And the more option you have, the more specific room they can find, and it can be a good point of User Experience when visiting your site.

The first approach

WooCommerce: Define room or room type as a product, set price and show. Since WooCommerce is a complete service for online business, the above features seem to be covered. However, the room is occupied in a certain time, as a result a product (room/ room type) would be automatically increased after checking out and normally you have to update it manually. Let’s try to see if we can use WooCommerce like a hotel booking tool.

There are different room types: standard, deluxe, suite…and capacity (single bed, double, number of adults, children, …) in the hotel. Now I will define a hotel Room as a product, type as product category and the capacity as product tags. Therefore We can use product management flow in WooCommerce as room management in a hotel site service. And here is the screenshot:

How to build a hotel site using WordPress - Woo Product Category Room Type
WooCommerce Product Category as Room Type

As you can see, the product category is used to define the room capacity with 3 types: Single, Double and Triple. Therefore We have now a taxonomy to classify our hotel rooms.

How to build a hotel site using WordPress - WooCommerce Product Tag as Room Capacity
WooCommerce Product Tag as Room Capacity

Next, I use product tags to define the room capacity of each type: 1 adult, 2 adults, 1 child, 2 children, etc. This step provides more details in each room capacity and also will fit to each room type below.

How to build a hotel site using WordPress - WooCommerce Product as Room
WooCommerce Product as Room

When all the property is ready, let show our rooms.  Here We have 2 types: Standard and Deluxe rooms, you can classify them by services (include or exclude morning buffet, bathtub etc) and the hotel rooms are fully described as list of product. You can set the property (number of available rooms), set price, payment gateway for reservation, etc.

Now, take it to front-end and place the shop page into the navigation menu and rename it to “Rooms” as the room list.

Room Menu
Room Menu

So, when a customer clicks to the Rooms in the navigation, they will be redirected to the rooms list.

How to build a hotel site using WordPress - Room List
Room List

 

And the single room view with full description:

How to build a hotel site Using WordPress - Single Room View
Single Room View

It looks quite good. However, the “Add to cart” button seem not to be reasonable in this situation. Let’s change it into “Book this room”. You can follow the instruction here at WooCommerce to change it:


add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
return __( 'Book this room', 'woocommerce' );
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' ); // 2.1 +
function woo_custom_cart_button_text() {
return __( 'Book this room', 'woocommerce' );

}

The “Book this room” button looks much better now:

How to build a hotel site using WordPress - Book this room
Book this room

There are some more messages you need to change in order to get completely fit with the hotel site, but I will leave this job to you guys.

Finally, We have to provide a search form for customer to find out the best room for their needs. The WordPress plugin Search and Filter should be used to create a customize search page/widget that optimize for a hotel booking site. This plugin provides us a list of available filtering which we can use to search for product availability. You can see in the screenshot that it has been used to filter the room capacity and room capacity detail.

How to build a hotel site using WordPress - Search Booking Page
Search Booking Page
How to build a hotel site using WordPress - Search Room Type
Search Room Type
How to build a hotel site using WordPress - Search Room Capacity
Search Room Capacity

Kindly note that the above way of creating hotel room is using all free plugins which cost you no single penny. However, you can try other premium plugins to approach for example: Using WooCommerce Bookings with WooCommerce Bookings Availability Search Widget. If you are interested in this approach, I will show you in other article.

The second approach

– Another way of approach to build a hotel site with WordPress is using a specific plugin to this type of task. In this case I would choose the Online Hotel Booking System WordPress Plugin from bestsoftinc. (You can take a look at Online Hotel Booking System WordPress Plugin Pro if you like).

You can install this plugin in any WordPress Theme, then your hotel site can be divided into 2 parts: Front-end and Back-end. This plugin will turn your WordPress site into a fully features hotel site.

Frontend

How to build a hotel site using WordPress - Search Form
Search Form

As a certain need of a hotel site, a hotel booking plugin has to provide a search form which is optimized to its data and make sure it will return the best result.

How to build a hotel site using WordPress - Search Result
Search Result

With a certain condition, the best fit room types will be returned for customer to choose. From here, you can select number of room, room type as you want. After being sure with their choice, they can process to the advance payment. Let’s see.

How to build a hotel site using WordPress - Payment options
Payment options

There are three popular choices of payment: Paypal, Credit Card and manual.

How to build a hotel site using WordPress - Customer Details
Customer Details

And fill in your information to process the payment

How to build a hotel site using WordPress - Booking Details
Booking Details

Backend

Together with front-end for the customer to search and look for room, We always need a backend for administration to manage room type, booking, payment, create new information and many other tasks.

Let’s take a look around for details. Here you can see the room capacity, you can add/remove or change the value of the room capacity as would fit for your hotel.

 

How to build a hotel site using WordPress - Room Capacity
Room Capacity

Along with the room capacity manager, of course there is a room manager page where you can control the number of available room, the information for each room type. You can also add/remove or edit those room.

How to build a hotel site using WordPress - Room Manager
Room Manager

The booking manager is very useful part. It provide features which are not available in WooCommerce. You can see the number of booking with specific filter like who will check in or check out today.

How to build a hotel site using WordPress - Booking List
Booking List
How to build a hotel site using WordPress - Booking List Advance Filter
Booking List Advance Filter

Extended features

Assuming that you have now a hotel site with all the necessary features, you can add “Review” for each room using one WordPress plugin like WP Review or WP Product Review

Conclusion

There are many ways to use WordPress other than a blogging platform and turning it into a “Hotel reservation” site is one of those. If We can take advantage of WordPress features and ability, we can create useful tool/service for our own need. I hope that this article can give you useful information about how to build your hotel site using WordPress with different ways of approach.

Other than hotel site, WordPress power can make more interesting, useful web application. Which type of WordPress site do you want to build further? If you have any idea and desire us to dig deep down and give you a recommendation, you are welcome to give comment below and in the next “How-to” article, We will cover it.

Ratings

5 out of 5 stars based on 71 rating(s).
  • Brian Link

    I am a WordPress Developer, Freelance Blogger. I want to travel the world, learn everything and share my knowledge. Meet me at @halink0803