- Optimizely Classic
- Optimizely X Web Experimentation
- Optimizely X Web Personalization
- Optimizely X Web Recommendations
This article will help you:
- Set up the Optimizely WordPress plugin
- Add the Optimizely snippet directly to the header template
- Implement the snippet on WordPress.com websites
If this is your first time using Optimizely on WordPress, you need to add a small snippet of code to the <head> tag of your website's code to start running A/B tests.
You have two options for implementing the snippet on WordPress:
Option 1: Install the Optimizely plugin, which automatically places the snippet in the most optimal position on your page (recommended)
Option 2: Add the snippet to the header template for more control over the snippet's placement (especially if you want to use the site’s version of jQuery)
Learn important best practices and pitfalls for implementing Optimizely with a tag manager, or read about a different tag management system.
Read about using the Optimizely WordPress plugin for headline testing.
Option 1: Install and configure the Optimizely plugin
The Optimizely WordPress plugin is the easiest way to integrate with WordPress. The plugin inserts your Optimizely snippet as high as possible in the <head> tag and allows you to create headline variations, compare headline performance, and launch winners, all without leaving WordPress.
The plugin automatically updates the <head> tag in the header.php file, even if you change themes.
In the WordPress Admin panel, navigate to Plugins and click Add New.
Enter "Optimizely" in the search field and click Search Plugins. The Optimizely plugin should be at or near the top of the results.
Click Install Now.
You might be prompted to enter your site's FTP credentials—your hosting company or site administrator can provide them.
When the installation is complete, click Activate Plugin.
You'll be redirected to the list of plugins you have installed. Click Settings under the Optimizely plugin listing or select the shortcut to the Optimizely plugin in the left menu bar.
Click the Configuration tab.
Enter your API token and click Connect Optimizely.
Under Choose a Project, choose the Optimizely project that you want to use for this site.
Add class names to post links and headlines
If you plan to use the Optimizely WordPress plugin for headline testing, make one change to optimize performance: add class names to any page where your headlines appear. Headlines usually appear in multiple places on your site, such as the home page, category landing pages, and related links, so multiple CSS selectors may be involved. Any page where your headlines appear must have a unique identifier (the class name) on the page so that Optimizely can make changes to the headlines.
Use the WordPress Post ID, which is guaranteed to be unique, as the identifier. Add the following class to your HTML on any page that your headline is displayed:
12345 is the Wordpress Post ID)
Your links will change from this:
<a href="http://blog.optimizely.com/using-optimizely-on-wordpress">Using Optimizely on Wordpress</a>
<a href=”http://blog.optimizely.com/using-optimizely-on-wordpress” class="optimizely-12345">Using Optimizely on Wordpress</a>
If you already have class names, add the class like this:
<a href=”http://blog.optimizely.com/using-optimizely-on-wordpress” class="headline optimizely-12345">Using Optimizely on Wordpress</a>
Also, make sure you adjust the HTML on the post detail page, since that headline usually isn't linked:
<h1 class="optimizely-12345">Using Optimizely on Wordpress</a>
This way, there is only one headline with the class name on the page at any given time. You only need to write one line of code in the variation code settings to make changes to the headline.
Option 2: Add the snippet to the header template
Do not use this option if you already installed or plan to install the Optimizely WordPress plugin. If you install the plugin and add the snippet to the header template, you’ll have two snippets on your site, and your experiments will not be effective.
If you don’t want to use the WordPress plugin, integrate Optimizely by adding the snippet directly to the theme’s header template file.
The header.php file is unique to each theme. If you change themes, and you aren't using the WordPress plugin, you need to update the header.php file.
In the WordPress dashboard, navigate to Appearance > Editor. Choose the Header template file (header.php) from the list of templates on the right.
Paste your Optimizely snippet, including the <script> tags, as high as possible in the head tag.
Click Update File.
Sites hosted on WordPress.com
If your site is hosted on WordPress.com and the two options for implementing the snippet are not available, you can integrate Optimizely by manually pasting the snippet into the body of your page or blog post.
In the WordPress dashboard, navigate to Pages and find the individual page you want to test. Click Edit.
In the page editor, click the Text tab in the upper right corner, paste the Optimizely snippet on the first line, and click Update.