Raise your hand if you have customized more than 5 WordPress sites. Keep it raised if it’s more than 10. If I get to 20, and your hand is still raised, then it's hard for me to imagine that you haven't used a child theme. Working with child themes is one of the best practices of overriding parent WordPress themes. Over the years, WordPress themes have become quite diversified, but sometimes it's difficult to get started without making changes in them.
Suppose you installed one of the default WordPress themes e.g. TwentySixteen, TwentyFifteen, etc. You toyed around with its styles and added a few PHP functions. But what happens when the theme developers release an update for that theme? The only two choices you are left with is to either update it letting go of all the changes which you've made or stick with the outdated version making your website prone to security vulnerabilities.
Here, a Win-Win strategy is to build a child theme for any kind of theme customizations.
In this post, you are going to learn about the right way of creating child themes in WordPress. I will also share code from my _child boilerplate for this very purpose. So, let's begin by first learning about the concept and importance of child themes in WordPress.
What are Child Themes?
The concept of child themes is based on basic parent-child relationship. All WordPress themes whether free or paid are parent themes. While every child inherits characteristics from its parent; similarly a child theme gets all functionalities and features from its parent theme.
According to the WordPress codex:
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
If the parent theme undergoes, an update nothing happens to its child theme. Only the theme contents of parent get modified, while the modifications in the child theme stay the same.
Therefore, maintaining modifications while enjoying the latest code from the theme's author is only possible with a child theme. Later, in this article, I'll discuss methods to create a child theme. But for now, let's take a look at the differences between a parent and a child theme.
- A child theme works only if both the parent and child themes are installed. However, you activate the child theme later.
- A child theme is solely related to its parent theme i.e. no other parent theme bears a connection with the child theme of a different parent.
- Any changes in the parent theme do not affect the child theme
Benefits of Using Child Themes
The concept of child themes in WordPress is simply great. I offer child themes with all of my premium themes, and a professional developer should always include them as a part of their theme package. Now let's explore certain benefits of child themes.
- A child theme saves your customizations. By using a child theme, you can make direct changes to the base code without the fear of losing your modifications if the theme is updated.
- A child theme is the first step towards learning how to code the WordPress way.
- Child themes can improve your overall workflow. By using a single parent theme, you can cater multiple clients with different levels of functionality and complexity.
Components of a Child Theme
A child theme is directly derived from a parent theme inheriting all the features and functionalities. That being said, here's the most basic composition of a child theme:
- A child theme directory: This is the root folder where a child theme files reside.
- style.css file: This file holds all the styling properties of your child theme.
- functions.php file: It contains definitions of the functions which are called in your child theme.
You may include as many template files as you want, but the above files are the very basic requirements of any child theme.
Creating Child Themes in WordPress
Now you know about several features and aspects of a WordPress child theme. You have learned what child themes are, why they're important, and why you should use them; it's time to discuss how to create a WordPress child theme.
Well, the easiest way of creating child themes is through WordPress plugins. Numerous free plugins exist in the repository which makes child themes creation as simple as possible.
The Child Theme Configurator plugin creates child themes in a few clicks. With its powerful CSS editor, you can customize them to an extended level of functionality. This plugin not only identifies but also overrides the exact CSS attributes which you want to change.
Child Themify plugin also makes its place in the list of my recommended plugins for creating child themes. The plugin is very lightweight and creates child themes at the click of a button.
If you are a developer, then you'll certainly be more interested in giving my child theme boilerplate a spin. It is named as _child (aka. Underscore _child). I built _child to optimize the entire workflow of creating child themes in WordPress. This boilerplate provides you with an intuitive child theme, where all you need to do is mention the parent theme’s slug to create a fully functional child theme. The '_child' boilerplate helps me build child themes in a controlled and professional manner. You can find this boilerplate at GitHub Now, let me explain the two pre-built files which you'll get with this boilerplate.
The style.css file contains the default header comment at the top; which helps WordPress to recognize it as a child theme's stylesheet. Here, the tags for Theme Name and Template are most important. You can replace Template tag with the appropriate parent theme slug and put a child theme name, and you are good to go.
The code for style.css is as follows:
In functions.php file, there exists a function called
aa_enqueue_styles() which enqueues style sheets for the parent theme first and then for the child theme. Coding it this way always keeps the child theme's styling dependent on the parent theme. This is a performant way of enqueueing the parent’s stylesheet.
Many developers @link the parent’s theme in the CSS which loads way to slow because the browser is forced to download the styles from parent and can only download the child theme styles once the parent stylesheet is downloaded. But when you enqueue both stylesheets separately, browsers can pipeline them to be downloaded at the same time; hence improving your page speed.
For further reading, I wrote about it here.
The code for functions.php is as follows:
Wrapping It Up!
Doesn’t matter, if you are an end user or a developer; child themes are the right way of customizing your parent themes. And now you have two plugins and one boilerplate through which you can hit the ground running. I am sure reading this post gave you a new perspective on handling child themes. Any thoughts about this article? Post them in the comments below.
Finally, you can catch all of my articles on my profile page, and you can follow me or reach out at Twitter @mrahmadawais; to discuss this article. As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.