Split Testing Genesis WordPress Themes

If you’re planning to change the look and feel of your site, then you certainly need A/B testing! It doesn’t matter if it’s going to be a tiny update in your current theme or a completely revamped design; whenever you’re about to change something in your site, you need to make sure that the applied changes will make your site better. Today, we’ll discuss how Nelio A/B Testing can help you test Genesis-based WordPress themes.

WordPress Frameworks

As you may already know, creating themes from scratch is not an easy task. In order to overcome this complexity, one may simply use a Theme Framework, that is, “a drop-in code library used to facilitate the development of a theme”. In simple terms, frameworks are no more than parent themes with several functions and hooks aimed to kick-start the development process. Thus, creating a new theme is as easy as extending the framework through child themes (or even grandchild ones), where style customizations and additional functionality can be added.

One of the most popular frameworks out there is Genesis. It has clean and responsive HTML 5 code, it’s optimized for search engines, and it’s extremely powerful and reasonably priced. And, more importantly, it comes with regular updates and great support, probably because of its fame ;-).

How to Test Changes in my Current Theme

The process of creating A/B experiments is always the same:

1. Think about what you want to test: variant of our theme
2. Identify the goals you want to achieve: get more subscriptions
3. Map each goal, to the elements that can help you reach it: to subscribe, a user has to fulfill the subscription form (available in the sidebar of our blog)
4. Run the experiment and analyze the results!

Let’s assume we’re interested in creating an A/B experiment for increasing the subscriptions to our mailing list. Our blog looks like this:

with a right sidebar. Most western countries read from left to right, so maybe if we move the sidebar to the left it will gather more attention and, hopefully, more people will see the subscription form. So, what if the sidebar was on the left? Would that change have any impact on the subscriptions? Well, let’s test it!

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

Duplicate your Current Theme

Our blog is using Jane, a Genesis-based theme. As such, it offers several customization options and, in particular, it lets us modify the layout. So, how can we test the previous example? The first thing we’ll have to do is duplicate our current theme:

1. Go to WORDPRESS_INSTALL_DIR/wp-content/themes
2. Copy the directory jane and all its contents to a new one: cp jane jane-2
3. Edit the file jane-2/style.css and change the Theme Name: jane block to Theme Name: jane 2 (or whichever name you want to use)

* Alternatively, we could have used Duplicate Theme, a plugin that eases the process of duplicating themes (either by creating exact copies or child themes).

Now we have two themes that are exactly equal. However, they won’t probably look exactly equal, for all the customizations we made to our original jane theme where stored in the database, and those have not been duplicated. That can be easily solved using the Import/Export utility offered by Genesis:

1. Access the Dashboard
2. Go to Genesis » Import/Export
3. Select all checkboxes and click on Download Export File
4. Go to Appearance » Themes
5. Activate the alternative theme Jane 2
6. Go to Genesis » Import/Export
7. Import the export file we created in step 3
8. Make sure that the menus and widgets are properly defined in the alternative theme
9. Go to Appearance » Themes

Finally! Both themes are the same and look exactly alike.

Configure the Alternative Theme

In order to configure the alternative theme, we simply need to activate it (under Appearance » Themes) and configure all the changes we want to test respect to the original one. Among the changes, we may include new CSS styles, different layouts, alternative color palettes, and so on. In our particular example, however, we’re only interested in changing the layout:

1. Go to Genesis » Theme Settings
2. Under Default Layout, select the new layout

And that’s it! Easy peasy 🙂 Now you may want to reactivate the original theme (under Appearance » Themes).

The A/B theme Test

Once we have both themes configured, we can create the theme experiment. In essence, these are the required steps:

1. Go to Nelio A/B Testing » Add Experiment
2. Select New A/B Theme Test
3. Fill all the basic information and click on Next
4. Select the themes Jane and Jane 2
5. Add the desired conversion goals (in our example, the user has to submit the appropriate Gravity Form for subscribing)

Once we have everything set up, it’s time we run the experiment. We simply Start it and wait for the first results to come.

Make the Winner Theme Permanent

After a while, we’ll have detailed information on the conversion rates of each version and, if we’re lucky, one version will be clearly better than the other. When the results are statistically significant, we may stop the experiment and set the winning alternative as our new current theme.

If the original version won, you’re done! But, what if it was the alternative? We just stopped the experiment and, therefore, all our users are now seeing the original (worse) version! In order to make the alternative version (Jane 2) permanent, we have two options:

1. We simply go to Appearance » Themes and select Jane 2 (and ignore, from now on, the original Jane theme). This is quite easy to do, but we won’t receive future updates of the theme.
2. We manually apply to Jane the changes we applied to Jane 2. In order to do so, simply activate Jane 2, export its settings, reactivate Jane, and import Jane 2′s settings (which, in our case, will include the alternative layout).

Sum Up

In this post we’ve seen how to split test a Genesis theme. Basically, you just need to duplicate it, perform all the changes you want to test in the duplicate theme, and create a new A/B Theme test experiment to see if the changes make your site perform better than before (wrt the conversion goals you are interested in). This new experiment will test the original Genesis theme and the duplicate version you just created and configured. Finally, when the results are available, you need to make permanent the winning version (which might require some manual work).

I hope you liked this post! 😀 If you’re interested in theme testing, or if you want to share your ideas about the overall process, please comment!

Featured Image by John Morgan.