WordPress

Run A/B tests on your WordPress site with a single line of code. No plugins required (though a plugin makes it even easier).

Step 1: Add the CADENCE Script

There are two ways to add CADENCE to WordPress. Pick whichever feels easier.

Option A: Use a plugin (no code editing)

  1. In your WordPress admin, go to Plugins > Add New
  2. Search for Insert Headers and Footers (by WPCode) and install it
  3. Go to Code Snippets > Header & Footer (or Settings > Insert Headers and Footers, depending on the plugin version)
  4. Paste this single line in the Header section:
html
<script src="https://cdn.softpath.co/sdk/v1/cadence.min.js" data-project="YOUR_PROJECT_ID"></script>
  1. Click Save

Option B: Edit the theme file directly

  1. Go to Appearance > Theme File Editor in your WordPress admin
  2. Select your active theme from the dropdown (top right)
  3. Find and click header.php in the file list on the right
  4. Find the </head> tag and paste the script tag from above right before it
  5. Click Update File

Using a child theme?

Edit the child theme's header.php, not the parent theme. Changes to the parent theme get overwritten when it updates.

Get your Project ID

Find your Project ID (like proj_Ax8mK2pQr4nB) on your project Settings page in the CADENCE dashboard, under the Quick Install tab.

Step 2: Verify Installation

Open your WordPress site in a new tab, then:

  1. Right-click anywhere on the page and select Inspect
  2. Go to the Console tab
  3. Type Cadence and press Enter
  4. You should see an object with methods like init, getVariant, and track

You can also check the Network tab for a request to cadence.min.js (status 200) and a request to /api/sdk/p/.../config.

Or go to your project Settings page in the CADENCE dashboard and click Test Connection.

Step 3: Create a Visual Test

Once CADENCE is installed, you can create A/B tests entirely from the dashboard:

  1. Go to your project in the CADENCE dashboard
  2. Click New Experiment
  3. Set the Target URL to the WordPress page you want to test (e.g., https://yoursite.com/landing-page)
  4. Open the Visual Editor to make changes (swap headlines, change button colors, hide elements)
  5. Click Start when ready

CADENCE automatically detects when visitors land on the matching page, assigns them to a variant, and applies the visual changes. No code changes needed on your WordPress site.

Step 4: Track Conversions

Zero-code: HTML attributes

Add data-cadence-goal to any element in your WordPress HTML:

html
<button data-cadence-goal="signup-click">Sign Up Free</button>
<a href="/pricing" data-cadence-goal="pricing-visit">See Pricing</a>

You can add these attributes using the WordPress block editor's Advanced > Additional CSS class panel (for some blocks) or by editing the page HTML directly.

Zero-code: Dashboard rules

In the CADENCE dashboard, configure conversion rules on your experiment:

  • URL match — track when visitors reach /thank-you or /order-confirmation
  • Click selector — track when visitors click #buy-now-btn or .cta-button

WooCommerce conversions

For WooCommerce stores, the easiest approach is a URL match rule targeting your order confirmation page (usually /checkout/order-received/). This tracks completed purchases without any code.

Troubleshooting

Script not loading

  • Make sure the script tag is inside the <head> section, not the footer
  • If using a caching plugin (WP Super Cache, W3 Total Cache, etc.), clear the cache after adding the script
  • Check that your theme isn't minifying or combining scripts in a way that breaks the data-project attribute

Visual Editor can't select elements

WordPress sites and the CADENCE dashboard are on different domains, so the Visual Editor may show a cross-origin warning. Use manual CSS selectors instead of clicking elements. See Visual Editor > CORS for details.

Caching shows old variants

If your caching plugin serves the same HTML to all visitors, the SDK still works because it runs client-side (in the browser). However, full-page caching at the CDN level (e.g., Cloudflare with full HTML caching) can delay script loading. Make sure the CADENCE script tag is not stripped by your CDN cache settings.

What's Next