Global Settings and Styles

Style Variations

Welcome to this lesson on creating style variations or simply theme.json variations.

With this lesson, we will:

  • define and describe style variations,
  • differentiate between theme and style variation JSON files, and
  • differentiate between a child theme and a style variation.

What are style variations?

Style variations are essentially alternative versions of theme.json that you can ship with your theme. They are custom named JSON files that are stored in your theme’s styles folder.

Any setting or style that you can add to theme.json can also be added to your style variation JSON file. This lets your users pick and choose which variation they want to use on their site. In a way, they are a sort of skin for your theme and they reflect the mood and tone of voice. This is a way to distinguish your website in a unique way.

You can bundle each of these alternative designs for your theme and let your users decide which is the best option for their site. Within the site editor, users can go into styles and choose a different style combination for their website.

Here in the default Twenty Twenty-Four theme, a user could choose the Ember variation. What that means is within global styles, they have a different palette and they have these four colors available. Within the gradient tab, they have an entirely different set of gradients and the duotone orange and white.

If we go over to the theme files, we see that each variation has its own separate JSON file. It’s important to note that when we create a style variation, the property duotone gradients and/or palette is replaced entirely. We don’t just swap out individual colors.

Differentiate between theme and style variation JSON files

One significant difference with a style variation is we add the title at the top under version. Our example here is Ember. And note again, theme.json has the duotones here that aren’t available when the user chooses the Ember style variation.

Differentiate between a child theme and a style variation

Now first, the similarity is the desire to override the parent theme’s theme.json file but they do it in a different way. If you had a child theme and it was active, and you had the addition of a theme.json file, the settings would override the parent themes.

Within a given theme, the style variations have the same ability to override the theme.json file. However, when a user selects a variation, those changes are considered to be user customizations and they’re stored in the database.

Next steps

If you want to learn more about style variations, refer to the theme handbook available to you on WordPress.org.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.