Child Themes and Style Variations

Damon Cook Avatar

·

Child Themes and Style Variations

What are some key similarities and differences between a child theme and a style variation? Let’s explore by taking a stroll down memory lane.

Child Themes

Child themes represent the legacy and stable features available in WordPress theme development. Suppose you want to customize an existing theme. In that case, it is well advised first to create a child theme, which references the original parent theme, and then quarantine your customizations in a separately maintainable codebase. Child themes are neat because they offer a portable and maintainable fork of the original theme’s features. You get all the features of the parent theme without the risk of things breaking if there is an update.

The Customizer

Next came the Customizer, a groundbreaking way to see a live preview of your site’s changes. Theme builders could register settings within the Customizer and allow users to customize the appearance. However, there were pain points around switching themes and losing changes.

The Customizer as featured in WordPress 4.6
The customizer as it appears in WordPress 4.6 with the Twenty Fifteen theme.

Style Variations

Style variations are a newer paradigm (available since Gutenberg 12.5 [Feb. 2022] and within the WordPress 5.9 release [May 2022]) that extended global styles and the potential of Full Site Editing and block themes.

Full site editing offers a no-code approach for users to change colors, switch headers, or even build one from scratch. Style variations allow theme authors to provide a different look and feel for the parent theme. So, the same premise as child themes, but an overhaul on the roadmap and infrastructure to get there. Extendability for developers and users is at the forefront of this venture.

Global styling is mainly surfaced through the theme’s theme.json file. Furthermore, if a style variation is offered, then the variation is placed in the theme’s styles/example-variation.json.

Browsing style variations within the Twenty Twenty-Two theme
Browsing style variations within the Twenty Twenty-Two theme

Global Styles

To understand the differences between Child themes and Style Variations. First, you have to grasp the introduction of global styles. Global styles are both a user interface area within the Site Editor and a series of APIs for developers to control in the theme.json file. So, you might previously have options in the Customizer or even rely upon the Custom CSS fields within the Customizer; now, you can target these within the theme’s theme.json file, but users can also override them within the Site Editor’s Global Styles interface. A user’s overrides are saved to the database.

Global styles are a significant evolution of the Customizer, and the need for custom CSS is smaller and smaller with each Gutenberg and WordPress release.

Similarities

Style variations are conceptually similar in some ways to child themes. Child themes were often a means to change the original theme’s appearance. By hooking up additional fonts, changing colors, and perhaps extending Customizer options. Style variations allow for this as well, but integrate with the Global Styles infrastructure.

Differences

The biggest distinguishing factor between traditional child themes and even just themes, in general, is that in order to allow for customizable features within the theme you would have to typically rely on either the Customizer or registering custom theme fields and reaching for the Settings API. With full site editing themes, the user can override many appearance settings through the Global Styles interface.

theme.json largely replaces the need for most CSS and it replaces the need for numerous calls for add_theme_support() in your theme’s functions.php. 🪄

The Future of Theme Variants

The line between the decision of when to create a style variation vs. when to create a child theme is thin. Day by day the advancements in Full Site Editing are certainly making style variations an appealing approach. They allow for a clean subset of adjustments to the parent theme while allowing the user to modify many appearance parameters within the global styles interface. The Customizer has been hidden away but is still accessible (if you know the secret URL within the WordPress install 😉).

Yes, you can even create a child theme with a style variation within. 🤯

Have you experimented with style variations yet? Let me (@dcook) know on Twitter.