Skip to main content
All CollectionsWebsite Integration
Adding Inn Style to your Wordpress website
Adding Inn Style to your Wordpress website

There's a number of different ways to add Inn Style to a Wordpress website.

Hannah Benneworth avatar
Written by Hannah Benneworth
Updated over a year ago

WordPress is undoubtedly one of the most popular content management systems, powering nearly 75 million sites. It's also one of the most customisable.

Adding Inn Style to WordPress

With just two lines of code, you can add Inn Style's mobile-friendly, easy-to-use booking system to your website. You also have the option to customised things, using your WordPress theme and some custom fields.

Option 1. Quick and simple, within the page content.

There's no need to install any plugins – you can simply add a snippet of code to any page, and the booking system will be ready to go in minutes.

<a href="https://demo.innstyle.co.uk" class="btn btn-success">Book online now!</a>

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, but you can 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

  • A new page template called ‘accommodation.php’ (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. 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 a particular unit of accommodation in Inn Style. 

Want to create something that shows all availability on one page?

Easy. Just use this instead of specifying the bookable and using custom fields.

<script id="InnStyle-js" src="https://developer.innstyle.co.uk/calendar.min.js"></script><script>InnStyle('demo');</script>

You'll need to make some modifications if your website is running over a secure connection.

More options and more control.

Setting up a field using Advanced Custom Fields

  1. Click on the Custom Fields link in the WordPress Admin sidebar.

  2. Create a new Field Group

  3. Add a new Text Field called Bookable

  4. Set a rule so the field only appears on the Templates you’d like to use to show the Inn Style calendar

  5. Save your settings

Adding the code to the template

Make sure you’re working within The Loop. First we’ll call the Inn Style calendar Javascript.

<script id="InnStyle-js" src="https://developer.innstyle.co.uk/calendar.min.js"></script>

Once that’s in place, we can prepare the inclusion of the custom field, which will return the bookable we’d like to show a calendar for.

<?php $bookable = get_field('bookable'); ?><script>options = {bookable: <?php echo $bookable ?>};InnStyle('demo' , options);</script>

(Remember: 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.

Preview the page, and you should see an Inn Style calendar for that specific bookable. Congratulations!

Things to consider

Extra options

There’s a whole range of parameters that you can add to the code to alter the calendar in your template (e.g. filter rooms shown, hide policies, set background type etc). You can find out more about these additional settings in our Developer Guide.

Responsive design

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, making it mobile-friendly as standard.

Theme Editor

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.

Did this answer your question?