So, what are they?
Once you have selected a theme that mostly does what you want, a child theme gives you a safe way to customize and override the original theme. The basic idea is that the majority of the code is provided by the parent theme. The child theme contains just those things that you want to alter.
You will activate the child theme in WordPress as the theme for your site, but the parent theme also has to be installed and available on the system. (Note: for multisite installations there is a way for super admins to assign a child theme to individual sites without making it available for general use.)
The advantages of child themes are that all your customizations are kept together and apart from the parent theme. This both eases development and lets you maintain a regular update cycle on the parent theme without breaking your modifications. Also, if things go really sideways you can deactivate the child theme.
When to use them
Some WordPressians (WordPressionists? Wordprestidigitators?) spin up a child theme as a matter of course for a new site. There is little to be lost and not much work in what I call the MVCT (minimum viable child theme, because there aren’t already enough acronyms in this thing).
However, you really only need a child theme if you need to customize templates (a type of php file we’ll talk about in a moment), add additional files (PHP, CSS, or Javascript), or wish to add small bits of custom code.
What about Custom CSS?
If all you need to do is customize CSS using existing tags, classes and other selectors, then there is no real need for a child theme. You can do what you need to do in the WordPress interface. Recent versions of WordPress now include a custom CSS area in the Appearance menu. However, I am also fond SiteOrigin’s CSS plugin, especially for recommendation to end users, as it provides a visual/dialog-based environment.
Very nice, but what can I actually do with Child Themes?
There are several common things that a WordPress developer might wish to do and might reach for a child theme to help accomplish. These correspond roughly to the challenges set in Part 2 of this session.
- CSS changes (design/how things look): I know I just said above that this can be handled in the WordPress interface, but there are occasions where a developer may want to handle this in child theme.
- CSS modifications are complex
- Developer prefers to write CSS changes in an IDE or Editor
- Developer is using an IDE and wishes to keep CSS changes together with their other changes.
- Developer is using a version control system such as GIT and wants CSS changes to be captured in their repository
- Developer is using CSS tools such as SASS/SCSS, LESS
- Logic changes: a key file in a theme/child theme is the functions.php file. This allows a developer to include program logic in the form of what WordPress calls “actions” and “filters”. In short, you can program it to do things that you want it to do.
- Template additions/changes: These organize the output and display of WordPress. Typical types of template changes are: introducing a unique design for a single page, altering headers/footers, altering display order of information on the page, adding widget areas, etc.
- Front-end behaviour changes: This primarily involves adding Javascript code to alter the behaviour of page elements. We will not undertake this as a practical exercise in part 2 mostly because my Javascript is weak at the moment and we’ll likely be short on time. The principles are described however.
Here’s the thing
There are a lot of inter-related areas, tools and languages that can be of great advantage in putting together your child themes. We don’t have even close to the time to delve into any of them, let along each of them, in great depth. Using an iceberg metaphor we’ll look at approximately what is circled in red in the photo below.
The good news, however, is that you can start small and draw in what you need as needed. I started by having a problem I needed to solve and learning just enough to solve it; and then taking on another problem. (ad infinitum)
