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: Growth (Subscription), Growth (Online Booking Fee), 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 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, 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
Back to topYou 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!
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
Back to topWith 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
Back to topAdding 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
Back to topThe 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 |
|
Show specific items or products |
|
|
Show specific categories |
|
|
Limit upcoming events to a specific category |
Options |
|
Tabs as categories |
|
[checkfront options=category_select |
Dropdowns as categories |
|
|
Hide search and calendar |
|
|
Hide date picker |
|
|
|
Language |
|
Set default booking portal language |
|
|
Set default Customer language. Customers can change this from the menu bar. Supercedes lang_id |
Style |
|
Font colour |
|
|
Font-family |
|
|
Background colour |
|
|
Font styles combined |
Date |
|
Fast forward to a specific date |
|
[checkfront end_date="20140131"] |
Add an end date |
Tracking ID |
|
Tracking ID |
Searching Availability Error
Back to topAfter 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. |
-
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