Wordpress - Developer Resources

Guides and resources for developers building and / or working with sites integrated with InflatableOffice's rental software.

Integrating InflatableOffice With WordPress

Overview and Quick Guide

It is highly recommended that you allow us to generate the client a new template site and you login and edit it from there. This will avoid all the setup and potential hosting issues with budget-hosts. Once you are done customizing the site and the client is ready to launch, we will assist with launching and will host the site at no additional cost.

If you insist on setting it up and hosting yourself, please continue reading:

Setting up InflatableOffice's plugin on your / your client's WordPress site allows that site to become fully integrated with the customer's IO account. Once installed and setup the IO plugin creates pages in WP for each product and category. In addition there is a page listing all categories and all products, a page for testimonials, quote forms and a contact us form.

See www.demorentals.com for a live example.

Once the WP site and IO are linked together any changes the customer makes to products will automatically push out to WP and will only update the [sc ....] content inside the product pages.

You typically cannot use a block builder tools such as Elementor or Divi on pages we generate, but they are fine to use on other pages like the home page. You can however use the Gutenberg block editor.

To make changes to all of the category or product pages, modify the shortcode templates. To reset to default, delete the shortcode, then deactivate / re-activate the IO plugin.

Modifying the quote or contact us pages can be done under InflatableOffice->Settings->Pages. To add testimonials, go to InflatableOffice->Settings->Testimonials.

IO PLUGIN: https://inflatableoffice.com/wp-plugin/inflatableoffice.zip

IO THEME: https://inflatableoffice.com/wp-theme/io-kenos.zip

You can use other themes, but you may run into styling issues with our cart. We recommend using our theme + elementor for the home page design.

Video Guide:


IO Integration - Detailed Overview

InflatableOffice Plugin / Integration Minimum Server Requirements

Our minimum hosting requirements are similar to those of the core WordPress software, we do however recommend at least the following:

  • WordPress version 4.9.8 or greater
  • PHP version 7.2 or greater
  • MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
  • PHP memory of 256M or greater
  • WP_MEMORY_LIMIT of at least 128M
  • If using Apache, we recommend enabling Apache mod_rewrite module if not enabled on your host be default
  • JQuery. Most WP themes have this already included, but some do not

First Steps and Plugin Installation / Setup

First and foremost you need a setup and functioning WordPress site. If you are unfamiliar with WordPress as a development platform it is recommended you first learn at least the basics of WordPress usage and development workflows. There are many great tutorials to be found online to help you get started. Not sure where to start? Check out this guide.

Once your WordPress site is setup you will need to install and setup the InflatableOffice plugin. The latest plugin can always be downloaded from:


Upload and install the plugin, a guide about installing WordPress plugins can be found here.

Activate the plugin.

Once installed and activated both the plugin itself and the customer's IO account needs properly setup to integrate together. To setup the plugin and integration follow these steps:

  • First, because the IO integration process needs to be able to create / modify WordPress pages to work, it needs it's own user account with AT LEAST Editor level access to the site to work. If you unfamiliar with creating WordPress user accounts, review this guide. Create a user with the following values:
    • Username: io
    • Email: Anything you wish (must be unique, we suggest a fake value).
    • First name: IO
    • Last name: WP Integration
    • Website: Field can safely be left blank.
    • Click show password and copy the suggested value or create your own STRONG password (save this, you WILL need it again soon).
    • You can unclick Send User Notification if you wish.
    • For Role, select Editor from the dropdown menu.
    • Click the Add New User button
  • Next, the plugin itself needs setup . Follow these steps to properly setup the plugin:
    • Click InflatableOffice->Basic Setup from the WordPress menu.
    • Enter the customer's IO user name into the IO Username field and click Save. What you enter here is important. Make sure the username you enter is the main IO account of that customer and not a worker account. Upon hitting save make sure that a field appears below titled Linked Quote Page with a dropdown menu showing the customer's quote pages. If this field does not appear or you see unexpected results then you are using the wrong username. If in doubt contact IO support.
    • Below this and below the Step 2 title, if there are no clients currently created, go ahead and create one. If there is one there, delete it and create a new one.
    • Leave this page up in your browser, you will need values from this screen in later steps.
  • Next, the customer's IO account needs prepared and setup for WordPress integration. To properly setup the customer's IO account for full WP integration follow these steps:
    • Login to the customer's IO account.
    • Choose the Settings tab.
    • Under Integration click Online Quoting.
    • Ensure the Online Booking Allowed, Allow Customers to View Rental Availability (Quote Request), and Allow Customers to View Rental Availability (Quote Confirm) options are all set to Yes. If not choose edit at the bottom of the page and set them to Yes. Make sure you click to click save when done.
    • Click into Testimonials. Ensure the customer has at least one active review. If not, go ahead and create one. Make sure to save it and set to be active.
    • Click into the WordPress settings page. Here you will add your site, IO user, and site client info. Click Add New. Enter your site URL INCLUDING the http:// / https://. Under the Checkout dropdown choose IO to use a quote form hosted on IO's server, or website to host your own quote form (recommended). Enter the Client ID and Client Secret from your WordPress setup. Do the same with WordPress user account you setup for use with IO. From the Inventory dropdown choose the inventory group you wish to sync to the site (for further info on page groups please consult the IO software documentation). Choose whether the site will sync automatically (recommended) or manually only. Finally click the disk icon to save.
    • Once saved click the green arrow in your new site settings to begin the first site sync. Watch for any errors. Most errors will appear relatively quickly but be aware that large inventories can take a long time to sync and errors can appear at any time. Do not reload this page until you receive a message telling you it is safe.
    • This process will create all the pages needed for IO / WP integration. However, the menus of the site must be handled manually. If you are unfamiliar with WordPress menu management, see this guide. See below for IO's recommended menu setup.

IO's Recommended Menu Setup:

There are infinite ways to setup WordPress' menus, and no one solution will fit all needs. However, as a general rule of thumb IO recommends the following menu structure as basis to start from:

  • Home - linked to base domain
  • Rentals - linked to ./all-categories
    • Your category pages as a submenu of this item
  • Specials - (optional) linked to custom page
  • About Us - (optional) linked to custom page
  • F.A.Q. - (optional) linked to custom page
  • Reviews - (optional) linked to ./io_reviews, custom page, or anchor tag to custom testimonial widget
  • Contact Us - linked to ./io_contactform or custom contact form

Site and Page Customization:

Site and page customization within WordPress is fairly straightforward. However, it is important to understand that not all types of pages within an IO integrated WP website can be modified in the same ways due to the use of custom shortcodes.

If you do not understand what a WordPress shortcode is, it is recommended you read this primer.

IO creates it own custom shortcodes and it is these shortcodes that must be edited if you wish to modify the layout or functionality of any content inside the shortcoded content inside the pages that the IO integration creates and modifies. However, for any individual product or category page or the all-categories / all-items pages, as long as any content you create for that page is not inside the [sc::] code block, our integration will not overwrite it and you can modify the content outside of the shortcoded section in that way. However, it is important that any changes you make to this page are made using the Text tab of the WordPress page editor and are written using plain HTML/CSS/JS and NOT using a visual page builder. Most page builders will break custom shortcode functionality on your site if used on these pages.

When shortcodes are used on a page, certain variables will be passed along with it for use in the shortcode. Consult below for a reference of common IO variables.

***To use a field, use the following format %%variable_name%%.***

Customizing the Rest of the Site

Other pages, such as your homepage or any custom pages you create can be created and edited by whatever means you normally prefer (IO recommends Elementor).

WordPress Development Tips

Recommended Backup Solutions

InflatableOffice recommends the UpdraftPlus WP plugin for managing backups. Please see these video guides for more information of running and managing WordPress backups.

Optimizing WordPress

Optimizing WordPress sites can be a huge subject with many variables that are dependent upon a site's build and use case. However, the good news is that by following a fairly simple checklist you can ensure that most sites are more than optimized enough to meet modern web standards. Please see this guide for more detailed info, but essentially the steps you should take boil down to these:

  • Choose the right host, and be careful about what hosting plan you choose.
  • Choose the WordPress theme / page builder you use carefully. It is our belief here at IO that the days of the traditional WordPress "theme" are rapidly coming to close and that with the advent of advanced page builders and the release of Gutenberg that the future of WordPress development lies in using backbone themes along with a page builder to build sites. As such IO recommends Elementor for both you are your customers.
  • Limit plugin usage. The more plugins you use, the slower your site will be. Choose only plugins you absolutely need.
  • Clean out the site's trash, or better yet, configure the site's wp-config.php file to auto empty the trash on a regular basis. See this guide for how.
  • Reduce Post Revisions, Drafts, Spam, Pingbacks and Trackbacks.
  • Optimize your images for the web. If you use a plugin for this, use then delete the plugin to keep the site clean. Better yet, optimize photos using your favorite photo editor (IO recommends GIMP) before upload to your site.
  • Be careful about adding ads to your site.
  • Consider not using official social media buttons & widgets. Writing your own isn't difficult.
  • Enable server side gzip compression. IO recommends using your site's .htaccess file to do this if your host uses Apache. See a guide for doing so here.
  • Minify and combine CSS and Javascript. IO recommends using a plugin for this. We recommend Fast Velocity Minify unless you use SiteGround hosting. In that case we recommend using SiteGround's built in SG Optimizer plugin.
  • Further steps you can take include: enabling browser cache on your site's server, using cache plugins, and using a CDN. However IO recommends caution with these optimizations as your customer's sites are likely to change fairly often and these approaches can keep the updates from appearing on customers browsers when intended unless steps are added to your workflow. If your site isn't optimized enough by the basic steps above and you do chose to try these, you do so at your own risk.

Custom Contact Forms

InflatableOffice offers two ways to place a contact form on your site that will fully integrate with your IO account. The first is built right into the plugin, and is a contact form found on it's own page located at https://{your domain}/io_contactform. The second solution is to build a custom contact form that can be integrated where ever you like on your site. This solution is more complicated and does require you be comfortable with PHP and web development. It also requires your site to use the Elementor Page Builder to work.

To create a custom IO integrated form for your site, first use Elementor's Form Widget to create a basic contact form and place it where you like on your site. Once created give your new form the Form Name of: Request Call Back. From there, our integration supports and requires the use of the following four form fields: Name, Email, Phone, and Message. You will need to create each of these fields. Once created enter the field name (from above) into Label and Placeholder, and select the appropriate Type using the following guide:

Field Name - Type

Name - Text

Email - Email

Phone - Tel

Message - Textarea 

After you enter these you will need to go that field's advanced settings and enter a Custom ID using the below guide:

Field Name - Custom ID

Name - firstandlastname

Email - email

Phone - cellphone

Message - notes

Once these are entered, go to the Submit Button settings area of the widget and here enter a Button ID of: io_cub. Finally, make sure the Actions After Submit settings area is cleared and you can then save the widget by clicking Update.

From here there is more to do. You now need to add the following code to your theme's functions.php file:

add_action( 'elementor_pro/forms/form_submitted', function( $module ) {
    $io_pagename = get_option('io_pagename');
    $page_name = urlencode($io_pagename);//'Demo+Rentals+LLC';
    $page_name = '&name='.$page_name;
    $params = '';
    if(isset($_COOKIE['adwords'])) $params.='&adwords=1';
    $link = 'https://www.inflatableoffice.com/quotes/contactme.php?nowrap=1'.$page_name.$params;
    wp_safe_remote_post( $link, [
        'body' => $_POST['form_fields'],
} );

It is important to keep in mind that changes made to your functions.php file are done at your own risk, and if the theme you are using is not your own then you should be creating and using a child theme before making changes like this.Troubleshooting Guide

403 errors

These errors mean something is blocking us from creating or updating the pages. Wordfence plug-in or some other similar firewall plugin could be causing this. Go to Wordfence->Options->Whitelist IPs and add the following under Other Options, then hit Save.

404 errors

This means the website wasn't found. It can be caused by recent changes to a website and you may just need to wait a little longer. Another potential solution is to de-activate the IO plugin and then re-activate it. We've also seen if you change the Wordpress->Settings->Permalink configuration to something different, save, then switch back to Post Name it solve the issue before.

Is this article helpful?
0 0 0