Author: Nick Schäferhoff

With the advent of the WordPress Site Editor (aka Full-Site Editing) and block themes, the way WordPress users have to think about how to modify their websites and themes has changed dramatically.

These days, instead of style.css and functions.php, there is a new central file for block themes: theme.json. Plus, instead of CSS and PHP, you need to be familiar with a new type of markup to make changes to it. Its name is JSON.

While that might sound scary, the good news is that JSON is actually quite approachable. With a bit of technical understanding and tenacity, it’s not that hard to understand and to start making theme changes by yourself.

To help you get there more quickly, this post is an absolute beginner’s guide to JSON and how to use it in WordPress. In particular, we will cover what JSON exactly is, which function the theme.json file fulfills in WordPress block themes, and how to use it to modify your themes.

Take a deep breath and keep an open mind, it’s going to be fine, I promise.

What is JSON?

Let’s start off with elephant in the room. What exactly are we talking about when we say JSON?

You might have heard about it before, especially in connection with the WordPress JSON REST API. JSON, short for JavaScript Object Notation, is a lightweight data interchange format. That means, it’s a way to represent, store, and exchange data between different systems, applications, or platforms.

There are other such formats out there, such as XML or CSV. However, what’s special about JSON and the reason why it has become so popular in recent years is that it’s not only easy for machines to parse and generate but also for humans to read and write. More on that below.

Although it originated from JavaScript, JSON has become a language-independent format. Most programming languages now have built-in support or libraries for parsing and generating JSON data. That’s also one of the reasons why it is widely used in web applications and APIs for data transmission.

Basic JSON Syntax

As mentioned earlier, JSON is actually quite simple. It basically shows data in key-value pairs, meaning it gives you the name of something and displays what value it has, such as "color": "#ffffff". If you have ever worked with CSS, this type of format should look very familiar.

Aside from that, JSON markup has the following features:

• Keys are strings, meaning words, and the value can be a string, number, boolean (true or false), null, array (meaning, a list of values), or another JSON object.
• JSON objects are delimited by curly braces (“{}”) while arrays use square brackets (“[]”).
• Keys and string values are enclosed in double quotes.
• The data format is strict, and any deviation from the standard syntax will result in a parsing error.

Already feeling lost? Let’s go over an example to make things clearer:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
						"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
			],
		},
	"styles": {
		"color": {
			"background": "var(--wp--preset--color--base)",
			"text": "var(--wp--preset--color--contrast)"
		},
	}
}

The above first defines a version of a file. It is divided into a settings and styles section, both of which define certain colors. In the settings part, the colors are assigned to a subcategory palette and displayed as an array containing several colors as well as values called name and slug.

The styles segment defines two colors, one for background, one for text. Both are only specified as variables. You can see that all the formatting mentioned above applies and how it’s easy to understand which keys and values belong together.

Is that at all understandable? Because it it is, the good news is that the example above is taken directly from WordPress. So, if you feel like that wasn’t impossible to understand, you are ready to start using JSON to modify WordPress block themes.

What is the WordPress theme.json File?

Ever since the introduction of Full-Site Editing/the Site Editor and block themes, there is a technology shift going on in the WordPress platform. Instead of CSS and PHP, it is increasingly relying on JavaScript and JSON to get things done.

The best example for that is theme.json. It’s a configuration file for block themes that helps to manage global styles and settings. It allows theme developers to define default styling, options, and configurations for the entire site and single blocks across the theme.

That way, theme.json can change both how the theme looks and what options are available for users to make their own changes. This gives you a single, central way to build and modify block themes, especially since anything you configure here applies to both the front end of your site and the WordPress editor in the back. What’s more WordPress will read the markup in the file and create the necessary CSS styling for you.

Before, the editor and website front end used different style sheets that you had to maintain separately. In addition, theme developers offered settings in different ways, even when using the WordPress Customizer.

Now, with the new, unified approach, users will have a more congruent experience.

Of course, as the file ending suggests, theme.json is written in JSON. As a consequence, if you want to learn to work with it and block themes, you need to be familiar with the markup that it is written in. That’s what we’ll do in the rest of this post.

How theme.json Is Structured

theme.json file has three main parts: settings, styles and custom templates/template parts. Here’s what you can control in each section:

• Settings — Contains global styles, meaning available color palettes, font families and sizes as well as other text options, theme widths, spacing, and borders. Basically, the fundamental controls to change your theme’s look. It can also do the same for individual blocks and you have the ability to set custom CSS variables.
• Styles — Here, you define the default styling of the theme, meaning the default values it should use for many of the options mentioned above. For example, you can set the theme background color and font families it will use for headings and body text. Again, the same is possible for single blocks. This is basically what style.css used to do.
• Custom Templates and Template Parts — Where you define the page templates and template parts that will be available in your theme and point the theme to the accompanying HTML files.

Using JSON to Customize WordPress Block Themes

To give you a better understanding how this is relevant to modifying WordPress block themes, let’s go over a number of practical examples.

Loading Local Custom Fonts to Change Theme Typography

The first thing we are doing is load some font files placed on the server to introduce a different kind of typography to your theme. We have a detailed article on that topic, in case you want to see more details, so here is a slightly shorter version.

The options for that are located in theme.json under settings > typography and then under fontFamilies.

{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": {
					
			}
		}
	}
}

In block themes, you add new fonts using these values:

• fontFamily — This is the name of the new font as it will appear in the CSS markup. It can include fallback fonts.
• name — The font name that will appear in the WordPress editor.
• slug — A unique identifier that WordPress uses to create the custom CSS property.
• fontFace — This corresponds to the CSS @font-face rule. It is the part that really enqueues the font.

In order to work, fontFace needs to include several other pieces of information:

• fontFamily — The name of the font once more.
• fontWeight — A list of available font weights separated by spaces.
• fontStyle (optional) — You can set the font-style attribute here, e.g. normal or italic.
• fontStretch (optional) — For example, for font families that have a condensed version.
• src — Path to the local font file.

Here’s an example of what that looks like:

{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "Advent Pro",
					"slug": "advent-pro",
					"fontFace": [
						{
							"fontFamily": "Advent Pro",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./fonts/advent-pro-v20-latin-regular.woff"
							]
						},
						{
							"fontFamily": "Advent Pro",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./fonts/advent-pro-v20-latin-italic.woff"
							]
						}
					]
				}
			]
		}
	}
}

Note that you can include several font files in fontFace, e.g. to load different styles. As mentioned earlier, you need to separate them with curly braces and a comma to do so.

For a way to add local Google fonts to your theme without manually changing the markup, you can also use the Create Block Theme plugin.

Modifying Hover and Focus Styles

Next, we want to deal with how to modify hover and focus styles for elements like links and buttons in WordPress block themes. Note that this is not yet in WordPress Core at the time of this writing. If you want to take advantage of it, you need to install the Gutenberg plugin so that you can use the latest improvements and features.

To make changes to hover and focus styles, can use the pseudo elements :hover, :focus, :active, and, for the outline property, :visited. The settings for this are located in themes.json under styles > elements > link or, alternatively, button.

{
	"version": 2,
	"styles": {
		"elements": {
			"button": {
			},
			"link": {
			}
		}
	}
}

Here’s how to define styling for your links:

"styles": {
	"elements": {
		"link": {
			":hover": {
				"typography": {
					"textDecoration": "none"
				}
			},
			":focus": {
				"outline": {
					"width": "2px",
					"color": "#111",
					"style": "solid"
				}
			},
			":active": {
				"color": {
					"text": "var(--wp--preset--color--secondary)"
				},
				"typography": {
					"textDecoration": "none"
				}
			}
		}
	}
}

The above markup does the following:

• It states that links should not be underlined when someone hovers over time with their mouse cursor.
• In the focus state, it adds an outline that is two pixels wide, solid, and has the color code #111111.
• When active, the link text takes on a color defined by a CSS variable and, again, is to set to have no text-decoration value.

Modifying Block Theme Colors

In this example, we want to introduce a custom color palette and also disable the option for users to make their own color options. You would do this, for example, to make sure that everyone on your website can only use approved brand colors and not introduce something else to your website design. We will also go over how to add colors to specific blocks or elements so that you can predetermine what they look like.

Understanding Standard WordPress Color Settings

To do this, you first need to know what color palettes are available in Gutenberg by default. These are:

• WordPress default color palette — This is always available. It provides colors that will prevail even at a theme switch. That’s why they are used for block patterns.
• Theme color palette — Ships with the theme and is custom to which theme you are using.
• User color palette — Colors added by the user via the available color picker. You can define them in the global styles under Colors > Palette.

One or several of these always appear when accessing the color options for any of the blocks or global styles.

Eliminating Color Options

Let’s first hide the default color palette and gradients. You can do this under settings and color like so:

{
	"version": 2,
	"settings": {
		"color": {
			"defaultPalette": false,
			"defaultGradients": false
		}
	}
}

Like many other options, it’s also possible to do this for single blocks. For example, here it is for the heading block:

{
	"version": 2,
	"settings": {
		"blocks": {
			"core/heading": {
				"color": {
					"defaultPalette": false
				}
			}
		}
	}
}

In addition, you can disable the custom color picker, so that website users won’t try to create and use their own colors.

{
	"version": 2,
	"settings": {
		"color": {
			"custom": false,
			"customGradient": false,
			"defaultPalette": false,
			"defaultGradients": false
		}
	}
}

If you input the above markup, all the usual color options will not be available, except for the theme colors.

Adding a Custom Color Palette

Next, we want to add our own color palette. We do this in the same place in theme.json by adding a palette key and then adding an array with the slug, color, and name for each of the colors you want to include.

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#1B1031",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#FFFFFF",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#FF746D",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#551C5E",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#FB326B",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		}
	}
}

With this present in theme.json, you will find your own color options in the back end (and, in this case, also applied to your site).

You can also do the same for gradients and duotones. In almost all cases you can use pretty much any CSS color declaration. Hex, RGB/A, color names, whatever you want, even CSS variables. Only duotones strictly take Hex and RGB color values.

In addition, it’s possible to do the same for single blocks (be sure the names and slugs are different than in your sitewide settings):

{
	"version": 2,
	"settings": {
		"color": {
			"blocks": {
				"core/paragraph": {
					"color": {
						"palette": [
							{
								"color": "#1B1031",
								"name": "Block base",
								"slug": "block-base"
							},
							{
								"color": "#FFFFFF",
								"name": "Block contrast",
								"slug": "block-contrast"
							},
							{
								"color": "#FF746D",
								"name": "Block primary",
								"slug": "block-primary"
							}
						]
					}
				}
			}
		}
	}
}

Setting Default Colors

Finally, let’s cover how to set default colors for blocks and page elements. Here’s how to change the background and text color of the quote block:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/quote": {
				"color": {
					"background": "#222",
					"text": "#fff"
				}
			}
		}
	}
}

As you can see, setting default colors happens under the styles section. Here, we are targeting the core/quote block under blocks and defining a background and text color. Here is what it ends up looking like on the page:

By the way, if you want to find out what other settings you can tinker with in theme.json, refer to the developer handbook.

Introducing Additional Theme Styles

One of the best features of the Site Editor is that it offers style variations. These allow WordPress users to completely modify the look of their themes (colors, fonts, block styles) with the click of a single button.

Twenty Twenty-Three comes with a whole bunch of them.

How can you implement this in a theme? Simple, by including additional theme.json files.

A few notes:

• For WordPress to pick up the additional files, you need to place them inside a directory called styles inside your theme folder.
• The extra files get loaded in addition to the main file and override the included styles. That means, you only have to include markup for what you actually want to change. This is similar to child themes.
• You can name the new files whatever you want, as long as they end in .json. The Site Editor will automatically use the file name (without extension) as the display name in the back end. However, you can also include a custom name by adding "title": "[your preferred name]" at the top of the file.

For example, here is the (shortened) content of one of the style variations that Twenty Twenty-Three ships with:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Canary",
	"settings": {
		"color": {
			"duotone": [
				{
					...
				}
			],
			"palette": [
				...
			]
		},
		"layout": {
			"wideSize": "650px"
		},
		"typography": {
			"fontSizes": [
				...
			]
		}
	},
	"styles": {
		"blocks": {
			...
		},
		"elements": {
			"button": {
				...
			},
			"h1": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			},
			"heading": {
				"typography": {
					"fontWeight": "700"
				}
			},
			"link": {
				"typography": {
					"textDecoration": "none"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)",
			"fontSize": "var(--wp--preset--font-size--small)"
		}
	}
}

This is the theme.json for the “Canary” theme style. As you can see, it introduces new duotone and color palettes, adjusts the layout width, and adjusts font sizes. It also adjusts the styling for several blocks and elements like buttons, headings, and links. At the end, it also changes the general theme font size.

All of this is enough to adjust the theme appearance quite dramatically:

At the same time, the theme variation file does all of this in about 250 lines of markup, while the original theme.json of Twenty Twenty-Three is over 700 lines long.

By the way, another option to create theme variations is to use the aforementioned Create Block Theme plugin. It has the possibility to export your current modified design as a variation to use on other websites.

Changing the Styling of Individual Blocks

We have already shown above how you can make changes to singular blocks. Just to formally mention it here more generally, you can modify singular blocks in settings and styles, each under blocks.

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"letterSpacing": "-0.019rem"
					"textTransform": "uppercase"
				}
			}
		}
	}
}

Here is what the markup above looks like in action:

It’s possible to target blocks via core/blockname, e.g. core/paragraph for the paragraph block. You can find the names of all of the core blocks here.

Adding Template Parts and Templates

The final thing we want to talk about in terms of modifying block themes via theme.json is the ability to add templates and template parts. You find those as options in the Site Editor when clicking on the WordPress logo in the upper left corner.

Naturally, in order to show up in the theme, you need to register them somewhere, which is another thing that happens inside theme.json. The exact location is under templateParts and customTemplates. These are placed at the base level of the file, meaning the same as version.

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blog-alternative",
			"postTypes": [
				"page"
			],
			"title": "Blog (Alternative)"
		},
		{
			"name": "404",
			"postTypes": [
				"page"
			],
			"title": "404"
		}
	],
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "comments",
			"title": "Comments"
		}
	]
}

Each entry under templateParts takes three keys:

• name — This is the name/slug of the file for this template part, e.g. if you input “small-header”, your file would have to be named small-header.html.
• area — This matters so that the Site Editor knows where to assign each part. templateParts know three areas: header, footer, and uncategorized. If you don’t specify either of the first two, the template part will default to the latter.
• title — This is the name of the template part visible in the editor, make sure it is descriptive.

Objects under customTemplates also take three attributes:

• name — Same as for templateParts. Needs to correspond to the name of the associated HTML file.
• title — Also same as above, appears in the editor.
• postTypes — An array of post types this custom template supports such as post or page.

Custom templates and template part files need to be placed inside the templates and parts folders in the theme directory respectively. You need to build them out of block markup, which you can also do by creating them in the visual editor and exporting them. More information on that here.

WordPress theme.json Generators

If you want to create your own theme.json, below are some helpful tools to make the process quicker. They allow you to simply pick settings and styles from a visual user interface and then download or copy the corresponding theme.json file to your theme.

• ThemeGen Block Theme Generator
• WPTurbo theme.json Generator

Resources

For additional information on JSON and how to use it in WordPress block themes, check out these resources:

• Mozilla Developer Network: Working with JSON
• JSON.org
• Full Site Editing
• Block Editor Handbook

Ready to Modify WordPress Block Themes With JSON?

Modifying block themes is very different than working with classic themes. Instead of functions.php and style.css, a lot of the work happens in theme.json and HTML files.

This can be a bit intimidating at first, especially if you are not familiar with JSON. However, as you have probably seen above, the markup is quite simple to understand and get used to. It also offers a powerful way to make sweeping changes to the look and behavior of your theme.

Hopefully, with the examples above, you feel capable of implementing some of them yourself.

Have you modified your WordPress theme via JSON markup before? Please feel free to share your experience in the comments!

The post How to Modify WordPress Block Themes (JSON Beginner’s Guide) appeared first on Torque.

Widgets are a popular way to add extra functionality, features, and information to different locations of WordPress websites. They allow you to put anything from contact forms over calendars to lists of your latest blog posts on your web pages.

However, in order to do so, you first need widget areas — at least in classic WordPress themes. These are special designated parts of WordPress themes where, if you add widgets to them in the back end, they will show up in the front end as well.

Block themes using the WordPress Site Editor, on the other hand, no longer have widget areas. Here, adding widgets works very different than before, which is reason enough to cover this entire topic.

In the following, we take a look at different ways to add widgets to your WordPress theme. We talk about how to use widgetized areas and create new ones in classic themes, as well as how to make widgets show up in your block themes.

What Are Widgets and How Do You Use Them?

Before getting to the more technical stuff, let’s first settle real quick on what we are talking about when using the term “widget” in relation to WordPress. If you are using a non-block theme like Twenty Twenty-One, you find their settings under Appearance > Widgets.

This shows all the widget areas available in your current theme (here, it’s only the footer) and the widgets they contain. Everything visible here also corresponds to the front end of your website.

Typically, widgetized areas will be in the footer, sidebar, or header. However, you can also place them pretty much anywhere you want (as you will soon see).

How to Display Widgets on Your Site

The widget menu used to have a different user interface, but by now it has been converted to work with the block editor like the rest of WordPress. Therefore, you can use it like any other instance of the WordPress Gutenberg editor.

Add blocks via the block inserter (the blue plus button in the upper left corner) or its smaller version in the widget areas. You can also remove blocks in the usual ways and change their look and behavior in the right sidebar.

The blocks you can use span the usual options. Paragraphs, headings, tables, images — anything is possible.

Typically, widget areas are used for more dynamic sections where the information updates itself. You can still find those under the Widgets category in the block inserter.

As you can see they include things like displaying archives and categories, a list of your pages or the latest posts and comments, RSS feeds, or a search bar. Don’t forget to click Update in the upper right corner so that any changes you make here become permanent.

Alternatively, you find all of these settings also in the WordPress Customizer (Appearance > Customize) and then in the Widgets tab.

The advantage here is that you can preview how everything will look like on the page directly in the editor.

Creating New Widget Areas in Classic WordPress Themes

Ok, so far so good. We have settled on what widgets are and in which part of classic themes you can manage them.

However, what if you are not satisfied with your choice of available widgetized areas? What if you would like to be able to add widgets in other locations of your theme?

In that case, you have to create them yourself, which is what we will go through now.

1. Register Your Widget Area

Creating widget areas in a WordPress theme is a two-step process. The first step is to register them.

You do that using the register_sidebar() function inside functions.php. It looks something like this:

function ns_register_top_banner_widget() {
	register_sidebar( array(
		'name'          => 'Top Bar',
		'id'            => 'top-bar-widgets',
		'description'   => 'Widgets in this area will appear in a bar at the top of the site.',
		'before_widget' => '<div id="%1$s" class="widget top-bar-widget">',
		'after_widget'  => '</div>',
		'before_sidebar'=> '<div id="top-bar">',
		'after_sidebar'=> '</div>',
	) );
}
add_action( 'widgets_init', 'ns_register_top_banner_widget' );

Note: Like many theme changes, you’d be advised to implement this in the form of a child theme.

Some explanation of the different parts of the code snippet and what they mean:

• name — This is the name of the widget area that will appear in the WordPress back end.
• id — You need to give the widget area an id so you can display it later.
• description — This used to show up inside the Widgets menu. You can use it to, for example, explain the location of the sidebar to other users. However, it will only appear for WordPress versions not using the block editor for widgets, so you can also omit it.
• before_sidebar and after_sidebar — These two parameters allow you to add HTML markup before and after the widget area. That way, for example, you can wrap it in a <div> container.
• before_widget and after_widget — Same as above but for any widget that appears in this area.

There are other parameters you can use with register_sidebar(). You can learn more about them in the documentation. However, for our purpose, the above is enough.

Once present in functions.php and with the file saved, the widget area will already show up in the WordPress back end.

2. Outputting Widget Areas in Your WordPress Theme

While you can already see the widget area in the dashboard, currently putting any blocks or widgets in there will have no effect. That’s because there is not yet any markup that tells the theme to output whatever you add to it.

This happens via the dynamic_sidebar() function. For example, to output the widget area that you created above anywhere in your theme, you can use this function:

<?php dynamic_sidebar( 'top-bar-widgets' ); ?>

Note how the code contains the same id as the widget area created earlier in order to display it.

While the above works, it often makes sense to use a slightly more complex snippet:

<?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?>
		<?php dynamic_sidebar( 'top-bar-widgets' ); ?>
<?php endif; ?>

The code above first checks if the widget area in question has any widgets in it and adds it to the page only if that is the case. It also contains some more markup like HTML classes and ids to make it easier to customize the output via CSS.

That only leaves the questions, where do you put this markup?

The answer: Anywhere in your theme files where you want the widget area to appear. Typically that is inside page template files like page.php or single.php. However, you can also add it to something like header.php or footer.php. To make a decision, it helps if you know the template hierarchy and understand how themes work.

In this case, for the Twenty Twenty-One theme, we place it inside header.php right after the opening of the page.

With the code in place, when we now put a widget inside the newly created area, it will show up on the website in the intended place.

Alternative: Use WordPress Hooks to Display Widget Areas

Instead of adding the code snippet directly to your page templates and theme files, you can also achieve the same output using WordPress Hooks.

These are little pieces of code placed in strategic locations inside the aforementioned files that you can use to tell WordPress to execute functions in that very place without physically placing the code there. Instead, you can place the functions in question inside functions.php. Doing so has the benefit that it’s possible to manage all your widgetized areas from a single place.

What would that look like for our case?

Here’s how to place a widget area using a WordPress hook:

function ns_output_top_banner_widget() {
	
	if ( is_active_sidebar( 'top-bar-widgets' ) ) :
		dynamic_sidebar( 'top-bar-widgets' );
	endif;
}

add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

The Twenty Twenty-One theme has a hook named wp_body_open() insider its header file. By hooking into it, we can display the widget area in the same place without modifying the file itself.

As mentioned, the code snippet goes inside your (child) theme’s functions.php. This method is especially suitable for themes that contain a lot of hooks, like the Genesis Framework.

How to Add Widgets in Block Themes

So far, we have only talked about how to create widget areas in classic themes. However, what about block themes, which – after all – will likely become the de-facto standard for WordPress themes.

Here, because the Site Editor works very differently, you don’t really have widget areas. You will also notice that the Appearance > Widgets menu does not exist.

However, you can still add widgets, content, and other elements to your theme using similar principles as above.

Enter Page Templates and Template Parts

The first thing to notice here is that you are a lot less constrained in your placement of widgets with the block editor. Since you are not limited to pre-configured widget areas, you can place any page element pretty much where you desire.

However, you can still use blocks like widgets in classic themes by using page templates and template parts. Access them in your block via menu in the Site Editor on the left (click on the WordPress logo in the upper left corner to open it).

This gives you a list of available page templates on your site. They usually range from page over archive templates to the 404 page.

It’s similar to what you would find if you had a look at the theme files in a classic theme.

Under Template Parts, on the other hand, you find templates for parts of your website like the header, footer, or comment section.

Click on any of them to open in the editor. Alternatively, you can also make changes to your templates and template parts via the Template Editor. That is a slightly reduced version of the Site Editor that you can open via the normal page editor. Just open your desired page, click on the template name under Template, and then Edit template.

You can also pick another template from the drop-down editor.

Adding New Elements/Widgets

If you know how page templates work, you probably understand that any changes you make here will affect not just a single page but every single piece of content on your website that uses the page template or template part. Therefore, any page elements that you add to them will appear everywhere on your site where those are active.

For example, you can add a latest post widget to the footer template part.

If you do, and save, it also appears on the front end of the website for every page where this template part is present.

If you think about it, that’s not very different from how classic widget areas work. They are also simply a way to add page elements and content so that they are reproduced in the same place across your entire website.

The only difference here is that there is no need to edit files. Instead, you can do all of it in the visual editor, WordPress creates and modifies the files for you.

Creating New “Widget Areas” in WordPress Block Themes

So, how do you create new widget areas in block themes?

The answer is: You don’t really. However, the closest equivalent to it is creating new page templates and template parts. Doing so allows you to add content that will show up only in limited parts of your website.

Let’s go over an example to make things clearer. Say you want to do the same thing we did manually on top. In the past, you would have to register a widget area and then add the code to output it. With the Site Editor, you can achieve the same thing. Only in this case, it’s much easier.

One possibility is to create a new template part. For that, under the Template Parts menu in the editor, click the plus icon at the top.

In the menu that appears, give it a name (for example, “Header with top bar”) and choose the type (in this case, Header, of course), then start editing. Populate it with any page elements, widgets, and content you need or desire.

When you are done, you still need to assign it to the page template that you want it to appear in.

For that, go to that template (in this case, Home) and find the existing header. Click on it, then on the three dots to open its menu, and choose Replace header.

This will open a menu with available template parts and patterns on your site.

Pick the one you just created to input it, then save the page template. If you now go back to your website’s front end, you see your newly created header live on the page (and only there).

How to add New Widgets/Blocks

The final question that remains when talking about how to create widgets and widget areas in block themes is how to add more widget choices. After all, by default, you are only limited to a handful of options. Luckily, there are different ways to add more.

For one, you can install Gutenberg block plugins, many of which contain different widget blocks such as forms, maps, or carousels.

In addition, you also have the possibility to install singular blocks with widget functionality. For that, first click on the block inserter inside the WordPress Site Editor.

Once open, enter a search term for the kind of block you are looking for in the field at the top. Besides any options already present on your site, the editor will also search the WordPress block directory and show fitting options.

If something sounds like what you are looking for, simply click on the block in question to install it on your site and insert it into the page in the current position. Place it in the page template or template part where you want it to appear and save. Then, admire it on the front end of your site.

By the way, you can always remove singular blocks that you installed in the Plugins menu in case you don’t need them anymore.

Widgetizing WordPress Themes is Not That Hard

Adding widgets and widget areas in WordPress is an important skill to display a wide array of features and information on your site. They help to make your site more interactive, informative, and usable.

In classic themes, the approach to creating widget areas is a little more technical. You need a rudimentary understanding of WordPress file architecture and feel comfortable with a code editor and making adjustments to PHP code. In block themes, on the other hand, you can do the same with just your mouse cursor.

What’s important to keep in mind is that the principles are the same, only the implementation differs. Now that you know how it’s done, use this knowledge to improve your site!

What is a must-have widget that you like to place on your websites? Are you using a classic or block theme to implement it? Let us know in the comments!

The post How to Add Widget Areas to WordPress (Block & Classic Themes) appeared first on Torque.

Trying to come up with strategies for enhancing user engagement, boosting conversions, and achieving your business objectives can seem intimidating. It’s a lot of effort to stay on top of all the details. Thankfully, there is a way to streamline these efforts: WordPress A/B testing.

A/B or split testing can help you improve the most important aspects of your site. It’s a great tool for optimizing your website performance and conversion rates.

If you’re ready to take your WordPress website’s performance to the next level, we’ll show you how. In the article below you will learn what A/B testing is and why it matters. After that, we’ll guide you through setting up a split-testing plugin on your WordPress site and teach you how to run tests effectively. We’ll also pinpoint which elements it makes sense to test and provide clear insights into analyzing the results.

So if all of that sounds good, read on. We have a lot of ground to cover. 

What is an A/B Test?

A/B testing is a way to test different versions of a webpage or app against each to see which performs better. It helps to find out what users react to better and optimize their experience in the process. The ultimate aim? To maximize conversions.

Users randomly see the variations over time and their behavior is monitored and analyzed for any disparities in performance. Ultimately the design variant with higher engagement rates will become your top choice.

Before starting an A/B test, it’s essential to have a strong understanding of the expected outcomes and determine what exactly to test. Whether headlines, images, button colors or more – split testing provides insight into how individuals respond to changes on your website and will guarantee reliable results when done correctly.

For accurate results, it is essential to conduct a thorough A/B testing process that involves the following steps:

1. Articulate an exact hypothesis of what you are trying to assess.
2. Generate two different versions of your web page.
3. Randomly show both versions to users and carefully observe their behavior. Run the experiment for a sufficient sample size and duration in order to obtain reliable outcomes.
4. Using data-driven insight, select the version which achieved better performance as your final design solution.

Why Are A/B Tests Important for WordPress Site Owners?

A/B testing is a crucial tool for people who desire to get the most out of their site. It enables you to assess how effective your content and design or app elements really are and test alternatives. This allows you to discover which works best in order to optimize conversions on your site.

Testing is not only a great way to reduce risks associated with introducing major changes. It also allows you to trial different ideas and assess the effect that each possible change has on user behavior before making any substantial alterations.

Running a split test also provides an opportunity for website owners to identify what works and what doesn’t. This allows you to adjust your strategy in order to get the most from your online presence. The best opportunity are pages with clear calls-to-action. Any page where the expectation is that visitors will perform a task, i.e. make a purchase, sign up for a newsletter, or fill in a form. Specifically, landing pages, contact pages, and checkout screens are the best candidates.

To deliver the optimal experience for users and to maximize conversions, revenue and ROI, it’s essential to have an understanding of visitors’ behaviors and preferences. A/B testing provides you with this knowledge quickly so that you can implement changes accordingly.

As you might’ve guessed, this sort of testing is essential for any website regardless of its size, complexity, industry, or niche. It’s an invaluable tool that all WordPress website owners should consider employing.

Setting Up A/B Testing Plugin on Your WordPress Website

Now that you understand the importance of A/B testing, it’s time to learn how to get started.

1. Install the Visual Web Optimizer Plugin

One popular tool for A/B testing on WordPress is Visual Web Optimizer. To use it, you’ll first need to sign up for an account on the company’s website. That’s where you’ll be configuring the majority of your tests.

Sign-up is free and you get a 30-day trial for A/B tests. During the process, you will also have to define which website you are going to use the software for and be given the code to run Visual Web Optimizer on your site.

However, we want to integrate the tracking code another way. For that reason, once you’ve signed up, you’ll next need to install their plugin, which connects your account to your WordPress site.

To do this, go to Plugins in the WordPress dashboard and click Add New. Search for “Visual Web Optimizer” and click Install Now then Activate.

The first thing the plugin will ask you to do is input your VWO account ID.

You find this on the Visual Web Optimizer dashboard in the upper right corner. It’s simply a six-digit number. Enter the ID in the WordPress settings, save, and the plugin will take care of the rest.

Note that Visual Web Optimizer is not the only plugin available for A/B testing on WordPress. There are other options available as well, which we’ll cover in more detail at the end of this article. However, to give you an impression of the work involved, VWO is a good example.

It also offers features like built-in analytics, visitor segmentation, and heatmap analytics. These can help you track and analyze the performance of your tests.

2. Choose What to Test

When launching your A/B test, it is essential to identify the website elements you wish to evaluate. As mentioned, these may include headlines, images, call-to-action buttons and layouts. To ensure the best outcome, it helps to prioritize testing changes to these components based on their anticipated effect and how easy they are to implement.

It’s also essential to think about your site’s objectives and what you intend to accomplish through A/B testing. Remember that the tested changes should be based on a particular hypothesis rather than randomly selected. This is key for ensuring successful results from your experiments.

3. Create a Control Version of the Page or Post You Want to Test

Once you’ve identified what to run a split test on, create a control version of your page or post. This is essentially a base design that serves as the control. It allows you to compare it with other versions in order to measure changes accurately.

Most often, the control version is simply your current website design without any changes that you want to test. Likewise, this will be the version that the majority of visitors will see. It will be the benchmark for the performance of the variations. In this case, we are using the design below.

4. Create One or More Variations of the Page or Post

After that, it’s time to set up one or more variations of the page or post in question. All of that happens on the Visual Web Optimizer homepage. When logged into your dashboard, go to Testing > A/B and then click Create an A/B Test to get started.

In the next screen, define the pages you want to run a test on (in this case, that’s simply the homepage).

When you are done, click Next. VWO will then automatically open the defined URL in their visual editor where you can create the design variations. In this case, we want to do a simple thing: make the “hire me” button on the right side of the navigation menu stand out more. That’s very simple. You can just click on it and then choose Edit element to create the variation.

This opens up the options menu for that element.

Here, under Styles, we can define a background color, adjust the font color, as well as change margin and padding. Here is the result:

When satisfied, click Next to finish the design part.

Note: Make sure to only change one element at a time to ensure accurate test results. For example, if you want to test the effect of a new headline, create a variation that only includes the new headline. By limiting yourself to one change at a time, you will know exactly what variation made all the difference.

5. Define Which Metrics to Track

The next step is to define the metrics that you want to track for your A/B test. This can be clicks, page visits, form submissions, and a range of other events that you can set up. In this case, we set it up so that it tracks the clicks on any pages where the goal URL is the “hire me” page (except for from that page itself).

Once you have figured everything out here, it’s time to click Next again.

6. Run Your A/B Test

Now the real test starts. In the last step, you need to name your test and configure what portion of your website’s visitors are shown the control version, while the rest are shown one of the variations.

This can be an even split, you can set up custom proportions, or have VWO automatically move more traffic to the variation that performs better. In addition, you are able to use less than 100% of your traffic for the test.

Once you have made your decisions, click Create to get to the summary page. Check that everything is as you wish and then start running the test by hitting the Start Now button at the bottom.

From here, it’s simply a waiting game. Be sure to run the test for a sufficient amount of time to gather statistically significant data. How long that takes depends on the size of your sample and the difference in performance you want to detect.

You can use the built-in analytics tools to track metrics such as click-through rate, conversion rate, and bounce rate for each variation. It also comes with over 20 different predefined segments you can use to further break down your test results. These include time of day, browser, location, and new vs returning visitors.

7. Implement the Winning Variation

Once you’ve determined which variation performed the best, implement it on your live website. Continue to monitor the key performance indicators of the page to ensure that the positive impact lasts.

It’s vital to recognize that A/B testing is not a sporadic event, but something that should be part of your regular routine. That way, you can provide the best experience for visitors and make sure your site copy and design is effective.

Additionally, various elements like seasonality, user behavior, and traffic sources can have an impact on the results of these tests. This is why it’s generally recommended to run more than one test to ensure consistent and reliable outcomes.

Lastly, it’s important to note that split testing is not a replacement for user research or usability testing. Rather, it’s a complementary tool that can help you make data-driven decisions and improve your website’s performance. It’s recommended to use it in combination with other user research methods. That way, you can gain a comprehensive understanding of your users and their needs over the long-haul.

Other Plugins Worth Considering

In addition to the Visual Web Optimizer plugin, there are several other options you can use for A/B testing your WordPress website:

• Nelio A/B Testing: A WordPress plugin that allows you to run A/B tests on your website’s pages, posts, custom post types, and taxonomies. It includes features such as heatmap analytics, visitor segmentation, and conversion tracking.
• Optimizely: This platform is a more advanced A/B testing tool. It allows you to run A/B tests on your website as well as apps and also offers features such as personalization, multivariate testing, and behavioral targeting.
• Split Hero: Here’s another example of a platform that offers website testing and personalization. Split Hero comes with multivariate tests and redirect tests. It includes heatmaps, visitor segmentation, and conversion tracking.
• AB Press Optimizer: This one can run both A/B and multivariate tests on your WordPress website’s pages and posts, as well as custom post types and taxonomies. It supports heatmaps, segmentation, and conversion analytics, too.
• Icegram Engage:  A general engagement and testing tool. It offers A/B testing, funnel analysis, visitor segmentation, and heatmaps.

It’s important to note that these are just a few of the options available. When running split tests, it’s recommended to research and compare different and plugins to find the one that best suits your needs.

A/B Testing in WordPress is a Must for Future Success

As a website owner, you can greatly benefit from A/B testing. It is an invaluable tool that allows you to compare various versions of your webpages and features. Doing so will help you discover how to improve your pages for increased click-through rate and conversion rates. And who doesn’t love that?

Split testing allows you to make data-driven decisions about your website’s design and functionality. It can optimize the overall user experience, minimize bad decisions, and continuously improve your website’s performance over time.

By regularly conducting A/B tests and implementing the changes that lead to the best results, you’ll be able to reach your goals more efficiently. And with the right tool or plugin, you can easily get started without huge upfront costs. A/B testing is a “must” for any website owner who wants to maximize their success.

Do you A/B test regularly? If not, will you start now? Let us know in the comments! We’d love to hear your thoughts.

The post WordPress A/B Testing: How to Run Split Tests in WordPress appeared first on Torque.