hotel booking wordpress website

Building a Hotel Booking WordPress Website in Gutenberg

Home > Blog > WordPress tutorials > Building a Hotel Booking WordPress Website in Gutenberg

Palmeria is a free WordPress Booking theme designed for small hotels, vacation rentals, cabins, chalets, spa resorts, and similar businesses involved in the lodging industry. And you know what, it’s not just another pretty enough free theme for the hotel booking WordPress website.

Palmeria has been crafted by MotoPress – the team with a two-year experience of learning the needs of homeowners and hoteliers, honing the hotel booking functionality and creating diverse WordPress solutions for long and short-term rentals.

To be more precise, Palmeria is a great addition to the MotoPress’ collection of rental property themes for any need and taste. Hence, its design and functionality deploy much more scalability and flexibility than any other average hotel booking theme. Time to back up my claim!

Palmeria Features – Four Dimensions

We think of the features of Palmeria along four dimensions:

  • It comes bundled with the MotoPress Hotel Booking Lite plugin – a full-featured WordPress reservation system and PMS for rental properties (its free version, actually). It enables you to build the entire properties directory and set bookings on autopilot.
  • The theme is built with and is customizable via Gutenberg – the new WordPress core editor. It ensures you’ll have a flawless visual editing experience of customizing content pieces as individual blocks, without third-party builders. It’s very easy to operate for non-tech people!
  • One-click demo data installation utility is packaged with the theme. You’ll just need to press a button and wait for the sample content to be imported. This will make your website look exactly like its mind-blowing demo, as well as help make the customization a plain sailing for you.
  • It’s fast. Palmeria is architected with minimum third-party integrations enabling you to stay independent and have a website optimized for better performance.

palmeria free hotel booking wordpress theme

 

As you see, no crazy bells and whistles.

All design WordPress blocks are created with Gutenberg, which is a native WordPress editor – the (newest) present and future of WordPress. The booking functionality core is a separate plugin, which allows you to feature listings and run check-in / check-out procedures automatically or manually (up to you).

The theme doesn’t lock you down with any suspicious plugins yet provides all on-demand tools required to run your business website. Awesome, agree?

We really love this review from the official wp.org repository:

palmeria hotel theme review

Couldn’t have said it better!

Palmeria Hotel Booking Website Design

Do you operate in tourism hubs or rustic areas? Probably it’s a beachfront villa or a guest house that you rent out? No matter the type and size of your establishment, Palmeria will bring a fresh and modern look to your rental unit providing your guests with an enchanting pre-vacation experience.

With readable fonts and simple icons, the layout is clean and elegant. Lots of pre-designed containers for high-resolution images will help you put emphasis on images that people are usually keen to see.

The online booking form is noticeable for users right away so that they can reserve a room or a guest house. The theme will resize automatically to look perfect on any modern device making it really convenient to book your spaces on the go.

hotel booking wordpress website book on mobile palmeria

Thanks to full-screen blocks in grid, Palmeria is easy to scan for relevant and actionable information presented in a beautiful way. It also makes the layout easily contrasted.

You can tell your story, showcase suites or holiday homes, highlight essential amenities, display the best views in a gallery and do more – some blocks keep the click-to-action buttons in user’s visual focus.

hotel booking wordpress website contained cta button palmeria

As you see, we’ve done the molding design work to help you create a professional online look – you’ll just need to add your content and configure the settings according to the aim and scope of your business.

Why such a damn good WordPress hotel booking theme is free?

Good question! On average, free booking templates are very limited. That’s why website creators usually prefer using premium themes like Oceanica. But not in the case of Palmeria. So the only answer to that question is: the WordPress Booking system bundled with the theme is a lite version of the plugin, namely, some of the premium features are excluded.

But do you need the premium version or you can get by with just the bare minimum? It depends on whether you need the whole bunch of things, which are available in the MotoPress hotel reservation plugin WordPress PRO only. Here is the comparison table for your reference:

Lite VersionPro Version
Technical supportFAQLive chat, email, tickets system
(we even login to your WordPress to help)
Built-in payment gatewaysPayPalPayPal, 2Checkout, Braintree, Stripe, Beanstream/Bambora, more on the way
Prices based on the number of guests
Prices based on the length of stay (weekly, monthly and custom rates)
Automatic & Manual bookings synchronization with OTAs (Airbnb, Booking, etc.)
Adding reservations from the backend (admin dashboard)
Attributes (Adding extra sorting options to the search availability form)

But I guess you are waiting for the walk-through, right? So let’s start.

How to build a hotel booking WordPress website: step-by-step guide

You can download Palmeria free Gutenberg theme for free and install any self-hosted WordPress website. Follow these steps to see that it’s really easy to create a Hotel Booking website of your own.

Step 1. Install and activate Palmeria theme

You can download it for free from the official wp.org repository:

Palmeria – free WordPress booking theme download

Then activate it as any regular WordPress theme.

Step 2. Import sample data

Make your website for hotel booking looks professional and clean like Palmeria demo in clicks. Head over to “Appearance menu” on your WordPress website and find the “Import Demo Data” submenu.

Before you proceed, make sure to install and activate all recommended plugins (use Begin activating plugins link): Gutenberg, Hotel Booking lite and Contact form 7. Then, run the importer by hitting on the “Import Demo Data” button.

One Click Demo Import

Upon the successful import, you’ll get this notice:

success import hotel booking wordpress website

Step 3. Add rental units via Hotel Booking plugin

MotoPress WordPress hotel booking system is a key tool for scale, operations, and growth of your hotel business online.

Now you can add all your rentals with their details via the Accommodation menu; you may add the unlimited number of rentals via Accommodation types.

It’s very easy to craft detailed descriptions – you just need to add text, click all the boxes that refer to amenities, size, pets, etc. Let’s elaborate.

In this menu, you can:

  • Add a unit description
  • Assign a category (like single, delux, etc.)
  • Add all in-room amenities

categories and amenities

  • Upload images to create a photo gallery
  • Add a room capacity (max number of adults, children and the unit size)
  • State bed types and view

hotel booking wordpress website view and bed type

  • Set the real number of units of this type available (e.g. two real accommodations under a single room accommodation type).
  • Select which of the extras are available for booking on the checkout.

hotel booking wordpress website services mp hotel booking template

Here is a frontend example of the single rental unit type:

palmeria hotel booking wordpress website single room type

If you want to include more custom details (attributes) to each accommodation type and moreover use them as sorting filters in the Search availability form, you’ll need a Pro version.

To display all rentals on the hotel room booking website, use the Accommodation Types Listing shortcode. In Palmeria, the list is added to the front page, so you need to insert a shortcode into the child page of the parent front page:

child and parent pages

There are two layouts you can choose from for the accommodation directory: classic or masonry (set the needed one via Appearance > Customize > Booking Options).

classic rooms layout

The default theme uses a masonry layout:

rooms and suites

The same layouts are available for the search results page.

If you haven’t used the demo data, insert the shortcode into the Gutenberg editor (optionally, with your custom attributes)

gutenberg shortcode listing

The image next to the listing is a simple featured image of the page.

The images you use as featured for the list of accommodations will be flexible and grow to support the size of the content they hold. In the demo, we are using images of the same size.

Step 4. Customize the home page of your hotel booking WordPress website

The header of Palmeria consists of three elements: a basic page title (heading), a page excerpt (intro text), and a background image as a featured image of the front page. You can modify it in a few clicks via Gutenberg.

palmeria front page

To update the website identity (upload your logo, write a headline, etc.) go to the Appearance > WordPress Customizer. It’s a very handy WordPress real-time editing experience.

Palmeria also supports changes of the header text color and background color, as well as an accent color (for buttons, links, etc.)

colors palmeria

Using WordPress Customizer you can also tweak two navigation menus, a footer menu, and a social icons menu. The “hamburger” menu is actually a sidebar widget you can edit via Appearance > Widgets > Sidebar.

sidebar menu

It’s a great way to put more content-rich and functional information to the quick-access menu in a compact way.

palmeria sidebar menu

As to the rest of the blocks, it’s very easy to customize the home page with the Gutenberg editor. Different sections are a set of blocks of individual child pages of the parent front page. So, to customize the look and content of each, simply open the respective page in Gutenberg.

Currently there are several beautiful default child pages (front page blocks), which can be fully altered according to your needs.

  • Food catering / restaurant

restaurant wordpress booking templates

  • Contact block

gutenberg blocks theme contact

  • Image Gallery

gallery gutenberg editor

And some other cool blocks. You can revamp all of them by turning them into any suitable sections. Each section comes with a featured image, which is a part of each semantic grid section (just like in the “Rooms” section described earlier).

Working with Gutenberg, you can use block-specific options for customizing front page sections: change font-weight, colors, upload images, create galleries, add and style buttons, etc. If you are comfortable with CSS and HTML, you can also add your custom styling to individual blocks.

palmeria gallery

Overall, with Gutenberg, you can style blocks individually having peace of mind that you are working with the official WordPress core editor.

Step 5. Pricing setup: seasonal pricing and rates

No matter whether you want to enable live bookings through the hotel booking WordPress website or just display the prices for each unit dynamically (i.e. depending on the high or low season), you need to configure the pricing points. First, add any number of ‘Seasons’ with any custom duration (e.g. weekends, Christmas, summer, etc.)

seasons hotel booking templates wp

After that, designate the seasonal price for individual room types via ‘Rates’ menu:

rates menu

Moreover, the booking price can optionally include obligatory taxes and fees – you can add them via Bookings > Taxes and fees. They will be included into the final accommodation charge (guests will see the details on the checkout page).

taxes and fees

This is just the minimum. The Hotel Booking Pro will give you a much deeper level of flexibility since you’ll be able to make the pricing points dynamic based on the number of people and the length of stay (weekly, monthly, etc. rates), not just seasons.

Step 6. Offer bookable extras

There are tons of ways to increase the sum of each check, and selling extras is definitely one of the best of them. It can be a food hamper, an airport shuttle, ski equipment or the like. The plugin allows adding an unlimited number of extra services with their own prices and periodicity (e.g. $12 per person or accommodation / once or daily charge).

services palmeria wp hotel booking free theme

The awesomeness of this feature is that you can offer only chosen services for accommodations selectively (via the Accommodation type menu)!

services frontend

Step 7. Add the Search availability form

If you use sample data, the real-time rental property finder form will be added automatically to the location as in the demo.

search form motopress hotel booking

However, if you are adding it manually, you’ll just need to use the Search availability widget in the Frontpage sidebar widget zone located under Appearance > Widgets on your WordPress dashboard.

front page sidebar palmeria

If you don’t need to enable travelers to search through all rentals, they can book directly from the property page; there is an availability calendar and a booking form for each accommodation.

To customize the look of the property search form, go to Accommodation > Settings and apply the preferable settings:

  • the max number of adults and children
  • state the age of children (it’ll be visible in the form)
  • set up whether to show both adults and children fields, only adults, guests or completely hide the fields related to the number of people.

search form settings

  • change a look of a calendar:

calendars hotel booking wordpress

As you see, it’s pretty flexible. You can customize the form to suit the need of any booking conditions consistent with your real business.

Step 8. Configure general plugin settings

Using the demo data importer, all system pages for processing bookings will be created automatically, so you don’t have a headache of setting them up manually.

Additionally, you can personalize the following basic settings as square units type, currency displayed, date format, default check-in and check-out time, etc.

general settings hotel booking

Step 9. Optionally enable live bookings

So now you know how to create online hotel booking website. Ready to accept live website reservations? You can enable the system to collect and store bookings automatically. You may go with any of the available modes in the Hotel Booking Lite:

  • Booking confirmation by the customer via email – guests just need to click the link in the email to add a new reservation to your database automatically.
  • Booking confirmation by admin – you should go through each booking request and approve them manually (e.g. call or email a customer and then confirm their booking via the admin dashboard).
  • Booking confirmation by payment – within a free plugin version, you can accept bookings via PayPal only (or use the Pay on arrival option). More payment gateways are available in a Pro version or via WooCommerce premium add-on integrated with Woo.

You are free to ask travelers to pay a full or deposit (percentage or fixed) booking price through your website. The plugin supports either.

wordpress hotel booking payment gateways

By the way, you may occasionally provide custom discounts for clients. Using the Coupons menu, simply generate coupon codes for travelers to use on the checkout page.

All received bookings will be stored in the Payment history as well as in the Calendar of all reservations. Go to the Bookings menu for all these operations.

To send automatic emails to the admin and customers (confirmation, cancellation, etc.), you can customize the email templates to include all hotel and booking details.

Moreover, if you currently use a middleman OTA for your listing and a brand WordPress hotel booking website is still on your agenda, keep in mind that with a Pro plugin version, you are able to sync live website bookings to those sent via OTAs. It’s a two-way near real-time synchronization able to avoid overbooking. To make this real, the platform you use must support the iCal file format.

If you don’t plan to receive bookings generated by users, simply click “Disable booking” via the plugin Settings menu.

Step 10. Apply advanced booking rules

The WordPress booking plugin also takes care of all special conditions you need to be applied during the booking procedure. For example, you can designate applicable check-in and check-out days, min and max days to stay for individual accommodation types or seasons. There is also an option to completely block a chosen accommodation for any specific term.

booking rules booking plugins wordpress

That’s it! I’ve covered the major steps you need to take to create a hotel booking WordPress website with a free Palmeria theme. As you might sum up, even a free version of the Hotel Booking plugin arms with a whole array of useful tools for a rental property WordPress website.

Step 11. Set up a blog

To optimize your hotel or vacation rental website for search engines, you need to blog regularly. We’ve made sure Palmeria is ready to keep your blog stylish and clean.

palmeria hotel booking wordpress website blog

For the blog archive page, you can go with either a grid or wide layout (set it via the WordPress Customizer).

If you want to go even further, make your hotel blog load instantly on mobiles by installing the WordPress AMP plugin – this is a WordPress integration cog for the dominant Google technology for mobiles. This plugin will give you full customization flexibility letting you create a visual experience on mobiles similar to the current website design.

Bottom line: Create The Best Hotel Booking Website With MotoPress!

By the time we get to Palmeria, we’ve spent considerable time deepening our understanding of the needs of the lodging industry: the booking technology, property management system, lightweight design, straightforward customization, lodging business marketing, and more. Put this all together and you have Palmeria – a free, absolutely stunning WordPress rental property website template. Now you do not need to think about how to create a hotel booking website. Now you just have a ready-to-go solution!

Download Palmeria

Demo Palmeria

Documentation

WordPress 5.0 has been already released, so Palmeria can be your one-stop booking template that seamlessly integrates with Gutenberg and a powerful reservation system by MotoPress. Moreover, our Getwid Gutenberg blocks plugin is going to take the theme customization even further with tons of extra content blocks (install it for free if you wish). Isn’t it a perfect combo by one team for your future hotel booking website on WordPress?

Got an idea to share? Already have feedback? Don’t hesitate to comment under the post!

Was this article helpful?

Yes No

You have already left your review.

6 Replies to “Building a Hotel Booking WordPress Website in Gutenberg”

  1. Hi:

    These plug-in are amazing. I am really enjoying building the site for our Beach Resort. There is something i’d like to do, but haven’t figured it out yet. The first time I tested a reservation the Confirmation went to my SPAM inbox. It’s been fine since I confirmed it was not SPAM. I would assume this will happen to a lot if not all customers when they try to make a reservation too. I would like to add a warning check SPAM inbox if they did not receive a confirmation email.

    I think the text message is generated by the short code for Booking Confirmation [mphb_checkout]. I want to edit the message”Details of your reservation have just been sent to you in a confirmation email. Please check your inbox to complete booking.” The URL displayed for this message is “xyz.com/booking-confirmation/?step=booking”. Can you tell me how to edit this message please?

    1. Hi, First of all, I’d recommend setting up SMTP for better and more secure email delivery. It may be helpful to deliver email notifications to inbox and not spam. There are many free plugins to set up SMTP on your site.
      As for the editing the texts added By Hotel Boking plugin, you may edit translations of the Hotel Booking plugin to change any text. You may use the Loco Translate plugin to edit translation in the dashboard of your site.

  2. Hello,
    I would like to thank yoy all for this awesome theme… However i am facing a strange issue regarding it’s operation : After several times of url use, the site crashes and needs to clear cookies in order to load it again properly. Further more, the palmeria wp admin url is not working until cookies have been cleared as well.
    Any ideas ?
    Regards,
    John

    1. Hi John,
      Thank you for your question. The situation you described reminds the usage of ModSecurity tool on your server. This tool does not support delimiters used in cookies from Hotel Booking plugin and some other plugins of WordPress though these delimiters are valid and widely used. We’d recommend to disable this tool on your server side. You may also submit a request to take a closer look at it.

Leave a Reply

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