How to Add and A/B Test Widgets in WordPress 5.8

Published in Community.

Watch our video

There is a better version of your web

Comparison of two variants of the same page using A/B testing

Share this post

In WordPress, widgets are content that you can add to sidebars, footers, and other areas of your site to add certain features or functionality. They are designed to contain a variety of add-ons such as a menu, a calendar, a form, the display of the latest posts, and so on.

A vast majority of WordPress themes come with a set of pre-installed and ready-to-use widgets:

Widgets available in the Tech Mag theme
Widgets available in the TechMag WordPress theme.

Goals of the New Widget Editor

After the arrival of WordPress 5.8, in addition to the new block editing capabilities I already told you and the Full Site Editing functionalities, we now have a new block-based widget editor.

What are we looking for with this new widget editor? As Anne McCarthy commented in February 2021 on WordPress.org, the benefits to be achieved with the widget editor are:

  • allow users to create sidebar, header and footer layouts with familiar blocks,
  • to be able to enrich the design of the widgets visually without the need to go to HTML editors,
  • have a unified template and content editing experience, without the need to keep abstract ideas of how the content will be displayed,
  • many of the widgets that we had until now that were seen as a shortcode, will be seen as blocks (as, for example, the case of forms), being its edition much more fluid and intuitive,
  • the transition from widgets to blocks will be smooth so that developers can replace widgets with blocks, and
  • to avoid backward compatibility issues, the widgets will be editable from the Appearance » Widgets menu option as before.

So, for example, with the new widget editor I can create a footer with the block editor that contains a set of blocks that previously we could only add in the content of a page or post.

Footer created with the block editor
Footer created with the widget editor

New Widget Editor

Once your website is updated with the WordPress 5.8 version, when you access the Appearance » Widgets menu option, first we get the welcome screen to the widget block editor.

Welcome to the widget block editor
Welcome to the block Widgets.

After browsing the illustrative guide to the widget editor, we find a new widget editor that is much more similar to the block editor we already know. Goodbye to the widget management we used until now!

With this new editor, each widget area looks like a dropdown (it was similar before) where you can add content blocks.

New WordPress widget editor
New WordPress widget editor.

In order not to lose compatibility with themes and previous versions of WordPress, the widgets that came predefined with the theme become a new type of block called “legacy widget”. In this way, when you search for content blocks, they will appear as new blocks that you can also add in each widget area and you can modify their properties in a similar way as you did before (but not in the block properties of the sidebar, where you will only see that it indicates that it is a “legacy widget” and its description).

In addition to the legacy widgets, now in each of the widget areas you can also insert and modify any other type of block that we already knew:

Adding blocks in a widget area
Adding blocks in a widget area.

And not only that: you can also use the new theme blocks that have arrived with this version of WordPress in any widget area you want, thus adding great versatility to WordPress widget areas.

Adding a theme block in a widget area
Adding a theme block in a widget area.

Finally, the widget editor also allows you to move blocks between different widget areas.

Option to switch a block between different widget areas
Option to switch a block between different widget areas.

And as always, after making the appropriate changes in the widget editor, just update the changes to reflect them in your pages and posts.

Widget A/B Tests

The widget areas, as I have already mentioned at the beginning of this post, are areas that aim to add functionalities to our website that generally involve the user to performing some action. If we want to increase the number of visitors to our website that perform some action, the best tool we have at our disposal to improve this conversion rate is A/B tests.

In short and in the context of widgets, A/B test of widgets consists of, based on an improvement hypothesis (for example, a rearrengement of the widget blocks within an area to better display certain relevant information, or display the widget blocks in different areas, or change radically which blocks are shown in the widget areas), seeing if that change works better than what you had before.

Technically, an A/B test is nothing more than an experiment that consists of showing two variants of the same web page to different segments of website visitors at the same time and comparing which variant generates more conversions.

An image depicting how A/B testing works: traffic is split and each segment sees one variant, and then we check which variant got more conversions
In its simplest form, A/B testing proposes to randomly split the traffic to the site in two groups so that 50% of the visitors see the A design while the other 50% sees the B design. By monitoring how users in each group react, we can calculate the conversion rate of each group and, in case there is a statistically significant difference between the two, declare a winner design.

With the new widget editor, which opens up a wide range of possibilities in the design of pages and posts, the diversity ofA/B tests that you can create grows exponentially and, for this reason, they become much more relevant in the optimization of web conversion.

A/B Testing Your Widgets

You could create a widgetA/B test manually and jointly use Google Analytics for conversion analysis. But it will be much easier and cheaper for you to create widgetA/B tests with a tool like NelioA/B Testing (premium version from €29 per month), a WordPress plugin fully integrated to the different WordPress block editors, including the widget editor.

Once the NelioA/B Testing plugin is installed and activated, the NelioA/B Testing icon will appear on your WordPress dashboard with the different options with which you can create and analyzeA/B tests without using any external tool.

Let’s see, for example, how we create a widget test to analyze whether or not we have a category selector on a website, and thus see if it increases visits to its blog posts.

The different steps you must follow to create the widgetA/B test with NelioA/B Testing are:

Select the Type of Test to Create

NelioA/B Testing is a tool that allows you to createA/B tests of any type of WordPress element. Therefore, from the wide variety of elements to select from, the first thing you should do is select that you want to create anA/B test of widgets.

New test selector in Nelio A/B Testing 5.0
New test selector in NelioA/B Testing.

Define Test Variants

Next, in the editing window of a widget test, we must add a name to the test to help you identify it in the future and create the variants to test with respect to the original or control version (i.e. the design of widget areas that you currently have on your website).

Defining a widget A/B test with Nelio A/B Testing
Definition of a widgetA/B test with NelioA/B Testing.

To create a new variant, you must give it a name in the field next to the letter of the variant you are creating and click on the “Edit” link that appears below it. You will see that it takes you to the new widget editor that we have just seen.

By default, a new variant is an exact copy of the set of widgets that you currently have on the web. Now it is as simple as changing the variant using the editor as I explained above. Add, modify, move around, or delete the blocks you want in the different widget areas and, when you have the variant ready, save it.

Editing a variant of a widget test
Editing a variant of a widget test.

Define Conversion Goals and Actions

After defining the variants in your test, the next step is to define the conversion goal of the test. For what purpose are you creating this test? In our example the purpose is to get more visits to the blog posts. How do we define it?

Go back to the test edition and in the “Conversion Goals and Actions” section, you can add as many goals as you want by clicking on the +New link.

For each of the goals you have defined, you have different types of conversion actions to track your visitors. For example, you can monitor when they access a certain page, when they click on a certain element on your website or when they send a contact form. Click on the action button that interests you and for each type of action you can define your own configuration parameters. For example, you can click page visit and select the pricing page or select to submit a form to see how many visitors subscribe, etc.

In the example of the widget test we are explaining, we would define the conversion action as visits to our blog page:

Definition of the objectives and conversion actions of an A/B test
Definition of the conversion goals and actions of anA/B test.

Segment Your Traffic

One of the interesting features of anyA/B testing tool is that you can segment your traffic. That is, you can set only some visitors to participate in a test. For example, by country, time, language, browser, device, etc. If you want more details on how to implement traffic segmentation with NelioA/B Testing, Antonio explained it in detail here.

Run the Created Test and Analyze its Progress

And that’s it, now all you have to do is press the button to start the test and analyze its progress. Nelio A/B Testing will take care of splitting the traffic coming to your website so that they only see some of the variants created and analyze their behavior.

By using Nelio A/B Testing, you don’t have to worry about how long you need to run a test or to control the statistical confidence of the data. You will be able to see the total number of conversions and visits to each variant. You will also be able to see the percentage improvement (or deterioration) of each variant compared to the original version.

Apply the Winning Alternative

Finally, if it turns out that one of your variants is better than the rest, NelioA/B Testing will let you know and you’ll be able to apply it as the final version on your website. That is, the widget areas that you have designed in your winning variant will become the final version of your website.

Showing the status of the results of an A/B test
Showing the status of the results of anA/B test.

And that’s it, now you have a new version of your web design that converts better than the original version you had.

Conclusion

WordPress 5.8 version has arrived with a great set of new features. The new widget editor gives us the option to add a lot of functionality to areas of our website that until now were limited to the predefined widgets that came with the theme.

This new range of possibilities allows you to test much more varied page designs than we had until now. Having a tool like NelioA/B Testing to create widget A/B tests integrated in WordPress ensures that you can optimize the conversion on your pages with data without leaving your WordPress editor.

Featured image by Striving Blogger in Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.