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