Working with the WordPress plugin shortcode

Learn how to generate and place WordPress shortcodes and how to extend the shortcode using arguments, which are values passed in the code to customize the experience.

Are you new to WordPress? Please read the first article in this series for an introduction to our WordPress integration.

Which plans include this feature?

Legacy: Soho, Pro, Plus, Enterprise, Flex
New: Starter, Growth (Subscription), Growth (Per Booking), Managed
→ Learn more about our new plans or how to change your plan.

Where can I find this feature using the top menu?

Manage > Integrations > Website Integration > WordPress

What prerequisites are there?

Admin permissions to manage integrations.
WordPress.com account with a Business plan or a hosted website with the free WordPress.org software.
Ability to copy and paste into your website code or have some helpful person do this for you!

Which Checkfront version supports this feature - classic, new or both?

This feature is available in both our classic version using items (Inventory > Items) and our newest version using products (Inventory > Products). → Learn more about products

Generating the shortcode

You should have selected all the options that make the most sense regarding your requirements. It's now time to generate the shortcode for your website!

WordPress Shortcode

Click the Generate Code button and copy the resulting shortcode to your clipboard. The basic shortcode generated looks like this:

[checkfront]

Once you paste the shortcode into your web page, publish it and check your results.

Placing the shortcode

WordPress Page Shortcode

With the shortcode pasted to your clipboard, you can head to WordPress and locate/create the page/post where you wish to embed the booking portal.

Place the shortcode wherever you want the portal to appear. This may be before, after, or somewhere within your page content.

Using arguments with the shortcode

WordPress Page Custom Shortcode

Adding arguments or specific values to the code controls how the booking portal appears and the information it contains.

The following is an example of what this custom shortcode might look like:

[checkfront style="color: #2C97de; font-family: Arial" options=tabs date="#20220902"]

Extending the shortcode

The following is a list of arguments that can be added to the basic [checkfront] shortcode to change the look and behaviour of your booking portal.

Type	Variable	Description
Inventory	`[checkfront item_id="3,8,37"]`	Show specific items or products
	`[checkfront category_id="2,3"]`	Show specific categories
	`[checkfront filter_category_id="3"]`	Limit upcoming events to a specific category
Options	`[checkfront options=tabs]`	Tabs as categories
	`[checkfront options=category_select`	Dropdowns as categories
	`[checkfront options=hidesearch]`	Hide search and calendar
	`[checkfront options=hidedates]`	Hide date picker
	`[checkfront options=tabs,hidesearch,hidedates]`
Language	`[checkfront lang_id="en"]`	Set default booking portal language
	`[checkfront locale_id=en_US"]`	Set default Customer language. Customers can change this from the menu bar. Supercedes lang_id
Style	`[checkfront style="color: #000000"]`	Font colour
	`[checkfront style="font-family: arial"]`	Font-family
	`[checkfront style="background-color: #873333"]`	Background colour
	`[checkfront style="color: #000000; background-color: #873333; font-family: arial"]`	Font styles combined
Date	`[checkfront date="20141224"]`	Fast forward to a specific date
	`[checkfront end_date="20140131"]`	Add an end date
Tracking ID	`[checkfront tid="promo-page"]`	Tracking ID

Searching Availability Error

WordPress Widget Code

After configuring the WordPress plugin and adding the shortcode to your webpage, you may experience an issue whereby the Booking Page does not appear when the website is viewed live on the web. Instead, you see a message that says Searching Availability.

There are two things you can do to fix this issue. The first is to use the Booking Widget method to add the booking page to your webpage.

Alternatively, if you wish to use the WordPress shortcode, then you can follow the instructions below to get it working as expected:

Navigate to the Website Integration area (Manage > Integrations > Website Integration) in the Checkfront Booking Manager.
Click on the Booking Widget tile.
Click on the blue Generate Code button.
Copy the first line of the provided code to your clipboard.
Paste the code you just copied into the page header on which the booking portal appears.

Your theme may be able to add code to the header, but if not, you can download a third-party plugin to do the job. Once you've done that, the booking information should be displayed correctly on your web page.

Be sure to allow browser cookies in the current browser session. Not accepting cookies may prevent the plugin from loading correctly.

Frequently Asked Questions

Is it possible to have multiple Checkfront accounts displayed on one WordPress website?

Yes! You need to add a host variable to the shortcode placed within the page. The “default” account is the original account you set up within the plugin.

The default shortcode with the plugin assumes the host you already have configured within the plugin, so the host for your second account needs to include the other account information in the shortcode.

For example:
[checkfront host=company1.checkfront.com]
[checkfront host=company2.checkfront.com]
Is it possible to have multiple shortcodes on the same webpage?
No. You can only have one shortcode per webpage. If you want multiple integrations on the same webpage, add a code block with a generated Booking Widget code.
Does the WordPress integration work with Elementor or other similar plugins?

It may be challenging to use our WordPress integration with Elementor. Please note we do not officially support external libraries, particular builders, or third-party tools.

You can try integrating the WordPress shortcode with WordPress and Elementor by adding additional code to the top of the web pages that help pull the necessary Javascript. You add the following code in the <head> section of your pages, preferably above any other scripts:

<script type="text/javascript" src="//YOURCHECKFRONTURL.checkfront.com/lib/interface--31.js"></script>

Make sure you replace YOURCHECKFRONTURL.checkfront.com with the actual URL of your Checkfront account.

If this solution does not work with the WordPress integration, we recommend using this script with the Booking Widget generated code.

< Configuring advanced options for the WordPress plugin

Articles in this section