WordPress is undoubtedly one of the most popular content management systems available, powering nearly 75 million sites.
With a wide range of themes and plugins available, WordPress also one of the most customisable content management systems available … and it’s free!
Adding a booking system to WordPress.
With the wide selection of plug-ins available, there’s also a number of different options for adding a booking system to your WordPress website.
Inn Style let’s you quickly add a mobile-friendly, easy to use booking system to your website with just two lines of code, but you also have to option to add some nice customisation options using your WordPress theme and some custom fields.
Option 1. Quick and simple, within the page content.
Adding a booking system to your WordPress site doesn’t need a drawn out setup process or installation of plugins. With Inn Style, you can quickly add a snippet of code to any page and get a mobile-friendly easy to use booking system in minutes.
This approach can also be used within a page template.
Option 2. Something nifty for the WordPress developers.
If you’re a WordPress developer, you might want to add Inn Style to your page templates, so your customer can easily manage multiple pages of availability directly from the WordPress admin.
Here’s an example of what you could do. I’ll be using the Advanced Custom Fields plug-in for this, you can obviously use any custom fields tool, or roll your own directly within WordPress itself.
Setting up your Advanced Custom Fields
I’ll assume you’ve downloaded and installed your ACF plugin and are ready to start adding custom fields for your booking page templates in WordPress.
What we need to create
- A text field for the ‘bookable’ you’d like to return on a particular page
- We’ll also create new page template called ‘accommodation.php’ (or whatever you look, we’ll be using this template to return content about the room and the booking calendar.
Let’s start by getting the custom field set up. You can create as many custom fields as you like for your WordPress accommodation page e.g. features, galleries etc, but for this walkthrough, we’ll just setup one for the Bookable ID.
What’s a Bookable ID?
A ‘bookable ID’ is a unique ID for the unit of accommodation you’d like to get from the Inn Style account you’re using.
Want to create something that shows all availability on one page?
Easy. Just use this instead of specifying the bookable and using custom fields.
Continue reading if you want more options are more control.
Setting up a field using Advanced Custom Fields
- Click on the Custom Fields link in the WordPress Admin sidebar.
- Create a new Field Group
- Add a new Text Field called Bookable
- Set a rule so the field only appears on the Templates you’d like to use to show the Inn Style calendar
- Save your settings.
Adding the code to the template
Once that’s in place, we can prepare the inclusion of the custom field, which will return to bookable we’d like to show a calendar for.
(We’re using the demo account here, to use your account just swap demo with your Inn Style account subdomain).
Once you’ve added all this to the template, test it out by creating a new page, choosing the template you’ve created and entering the Bookable ID into the custom field you created.
Preview the page and you should see an Inn Style calendar for that specific bookable. Congratulations!
Things to consider
There’s a whole range of additional parameters you can add to the code that will do different things to the calendar in your template (filter rooms shown, hide policies, set background type etc). You can find out more about the additional settings in the booking system developer guide.
The calendar integration code returns a booking calendar built using Twitter’s Bootstrap framework, this means the booking calendar will adapt to match the space you put it in and be mobile friendly as standard.
Use the presentation options on Inn Style to edit the colours and fonts used on the calendar to better match the design of your WordPress template.