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

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:

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.

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.

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.

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:

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.

Finally, the widget editor also allows you to move blocks 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.

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
• Define the test variants
• Define conversion goals and actions
• Define if you want to apply segmentation
• Run the test and analyze its progress
• Apply the winning alternative as final

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.

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).

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.

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:

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.

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

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

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.