Working with the WordPress plugin shortcode

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 help from a skilled person to do this for you!
The WordPress feature is available to both those using items (Inventory > Items), a key feature of our classic version of Checkfront, and those using products (Inventory > Products), a key feature of our newest version of Checkfront.

New to Checkfront - Products ✨

Products (Inventory > Products) is the successor feature to (Inventory > Items) and is available in our newest version of Checkfront.

Not yet on our newest version and interested in upgrading? Please contact our Technical Support team for more information.

Discover more product-related help articles here: Products (New).

In this article, we look at how to generate and place WordPress shortcodes, as well as, how to extend the shortcode using arguments.

New to WordPress and the booking plugin? Be sure to read the first article in this series for an introduction!

Please read the full series of articles, accessed at the side and bottom of this page, to learn more about the WordPress booking plugin features.

Generating the shortcode

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

WordPress Shortcode

Click on 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 out your results.

Placing the shortcode

WordPress Page Shortcode

With the shortcode pasted to your clipboard, head back over to WordPress and locate/create the page/post in which 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 some of the arguments from the list lower down this page 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]`	Together they would look like this
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 simply 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 header of the page on which the booking portal appears.

Your theme may have an option to add code to the header, but if not, then 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.

Frequently Asked Questions

Is it possible to have multiple Checkfront accounts displayed in 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 to have multiple integrations on the same webpage, then you need to add a code block with a generated Booking Widget code.
Does the WordPress integration work with Elementor or other similar plugins?

It may be difficult to use our WordPress integration with Elementor. Please note, that we do not officially support any 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 isn't working with the WordPress integration, then we recommend using this script with the Booking Widget generated code.

< Configuring advanced options for the WordPress plugin

Articles in this section