If you have a WordPress site, there are two ways to install Xola buttons, this article provides step-by-step instructions for both methods. You can manually add the code snippets to your website or utilize the Xola WordPress plugin.
Manually add Code to Wordpress
The first method we'll dig into is adding buttons without the plugin. To add buttons to your WordPress site without the plugin, you'll need to have administrator access to both Xola and your WordPress site.
- Obtain Xola's Global JS Code.
Copy the code block located below this paragraph or follow the instructions from this article.
- Locate your common header/footer.
Once you have your code, click on the row titled, "Appearance" and choose "Editor" from the pop-up menu.
Then, look at the column labeled, "Templates" and choose "Header" from that list. Click where it says header.php
- Add Xola's Global JS Code to your common header/ footer.
Next, paste Xola's Global JS Code into the text box. This code should be the absolute last thing in the text box. After that select the Update File button.
Tip: Now is a good time to consider backing up your existing code in this section, so that you can have it on hand should you find the need to revert to your old header.
- Obtain checkout button code.
Time to add your checkout button code. To find that, please follow these steps:
- Login to your Xola admin.
- Select Settings.
- Select Code.
- Hover over the button you would like to put on the site, and select Copy.
Tip: Not sure what checkout type to use? Have a look at the Types of Buttons article for a look at the different options availabile to you.
- Add checkout button code to your WordPress pages.
Now, we will be adding your book now buttons! First, navigate to the pages where you would like your Xola checkouts to be located. You can find this by clicking on "Pages" in the lefthand column of WordPress, and then choose the page you wish to edit.
Important to note for this step, is that depending on your WordPress site's set up - there may be many ways to add custom HTML on your pages. Due to the highly customizable nature of Wordpress, this means that there is a chance that certian Wordpress themes will require different steps to add in Xola HTML code, and my affect the results that you see.
Add the book now buttons by pasting the HTML button codes into the text boxes in Wordpress. You can click "Preview Changes" on the righthand side to see a preview. Once you're satisfied with the changes, select update.
Tip: If you do not click update, your changes will not be published.
Add Buttons with the Xola WordPress Plugin
The second method for adding the book now buttons to your WordPress site is by utilizing the Xola WordPress plugin. You'll need to be logged into the admin section of your WordPress website with the admin privileges to install a plugin and edit the pages that will have the button displayed.
- Login to WordPress Admin.
Please login into your WordPress admin screen. If you have a standard WordPress install, the URL structure will default to this: http://www.sample-domain.com/wp-login.php
- Locate Xola's WordPress Plugin.
Once you are logged in, go to Plugins > Add New.
Search Xola in the upper right hand corner and press enter.
- Install the Xola plugin and follow the steps to activate.
- Sync WordPress plugin with Xola.
To do this, you'll need to have the admin email address that you use for Xola. This can be found in Xola by navigating to Settings > Account. You want the email address listed next to Current email. Once you've put that into the text entry field in WordPress, select the "Sync Xola Account" button.
Once you sync you'll be able to view all of your available listings.
- Customize your button's style.
If you would like to use a custom button style you can do so within WordPress. Go to the Xola tab in the left-hand sidebar and select Button Settings.
Tip: At a minimum, you'll need to define a custom CSS class for class="xola-custom".
- Use the plugin to add Xola buttons to your pages.
Now we're ready to put a button up on your WordPress site! Navigate to the page where you would like to display Xola Book Now buttons. You can find this by clicking on "Pages" in the lefthand column, and then choose the page you wish to edit.
Once you're on your desired page, select the Xola icon and then select the listing that you would like the button to link to from the list that appears. Once you do so a 'WordPress shortcode' will go into the page content. This will look something like this: [xola-button id="12345678901234567"]
Note: You can only use a WordPress shortcodes in the page content or a sidebar content areas. If you need to add a button in a place outside those areas you will need to utilize Method 1 from this articel, and manually insert HTML code directly into the theme.