Working with the WordPress plugin shortcode – Checkfront

With your options configured, the final step is to generate your shortcode and add it to your WordPress page.

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

Callout icon of a cap and certificate, indicating additional learning resources.

Accessing the features mentioned in this article

Where can I find this feature using the top menu?

Manage > Integrations > Website Integration > WordPress

What more do I need to use this feature?

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 items, classic products, or both?

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

What is a shortcode?

A shortcode is a small, simplified code or keyword for a longer piece of content or function. Its meaning depends on the context.

In WordPress, a shortcode is written in square brackets, e.g., [checkfront options=tabs] or [checkfront options=category_select.

It’s a shortcut that tells WordPress to run some code and display a feature without you needing to write the full HTML/PHP.

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 Booking Page integration settings highlighting the Generate Code button to create a 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 editor page showing a basic shortcode [checkfront] inserted into a Book Now page.

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 placement may be before, after, or within your page content.

Using arguments with the shortcode

WordPress editor page showing a custom shortcode with styling and options inserted into a Book Now page.

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	Argument	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 the 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

Booking Widget setup page highlighting the first line of generated code to be copied into a website.

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.

Two methods can fix this issue. The first is to add the Booking Page to your webpage using the Booking Widget method.

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.
Could you 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.

You can try adding code to your header theme, but if that doesn't work, you can download a third-party plugin to do the job.

Callout icon of a bell, indicating alert.

Frequently Asked Questions

Is it possible to display multiple Checkfront accounts on a single WordPress website?

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

The plugin's default shortcode 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. You can add a code block with a generated Booking Widget code if you want multiple integrations on the same webpage.
Does the WordPress integration work with Elementor or other similar plugins?

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

You can integrate the WordPress shortcode with WordPress and Elementor by adding code at the top of web pages to load the necessary JavaScript. You add the following code in the section of your pages, preferably above any other scripts. 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

Related to