When you choose a theme for your website it’s rare that you’ll take it “as is”; most of the time you’ll want to modify and adjust it to suit your needs. When the modifications you want to make are definable in the theme’s options then there’s no issues that arise, but when you’re making more complex changes like adding your own CSS to restyle the theme, or adding PHP changes to extend or customize the functionality of the theme then you’ll run into a little problem. When an update to your theme is released you will of course want to take advantage of the increased flexibility and fixes it offers, but installing the update will wipe out the changes you implemented in the theme’s files. There are ways around this from a purely practical point of view; you could keep a list of changes and re-implement them after the update is installed, or store copies of the files that you have changed and replacing them after the update (assuming that these files haven’t been updated of course!). Though these methods work in practice, they are still unwieldy, slow and the steps will need to be reapplied after every update, which will eat up your valuable time.
Fortunately, the developers who’ve contributed to WordPress’ development foresaw such an issue and included support for a feature known as Child Themes. This is an extremely useful mechanism for separating the base theme code from our modifications, so that they are independent entities. This allows us to update a theme without fear of losing all our hard work, since our changes are stored separately. In a way, the child theme can be thought of as both a visuals and functions overlay for the theme; the base theme package contains all the elements of the theme, and the child theme sticks its own elements over the top.
What’s even more encouraging about this functionality is that it’s really very easy to set-up; if you’re only making a minor change you can get your child theme running by creating just one directory that contains one file.
How to create a Child Theme
The first thing to do to to get started with our child theme is to create a new directory called THEME_NAME_-child, where THEME_NAME is the name of the theme we are going to add the child to, in the wp-content/themes/ folder of your WordPress installation. Then, we need to create a file called style.css and add it to our new directory; it’s a good idea to use a code editor like Sublime Text for this step, but you can use a plain text editor if you so desire. It’s not actually necessary to create a directory with the -child suffix, but it is very commonly used and highly recommended as it highlights that you are using a child theme of a particular theme.
In the style.css file that we just created we will need to add the following code:
/*
Theme Name: Parent Theme Child
Template: parent-theme
Version: 1.0.0
Text Domain: parent-theme-child
*/
/* Load the CSS code from a base theme */
@import url('../base-theme/style.css');
/* Insert our own CSS code below */
This code defines some details regarding the new child theme, such as its parent, and imports the CSS code from the parent theme. With a basic file like this, we can start adding our own CSS code to style the theme our own way.
How does the code work? In the line:
Template: parent-theme
We specify the name of the base theme’s directory that we are looking to extend; it is very important that this is correct otherwise the child theme will not function correctly. The other fields are not as ultra-important as the Template line, but they provide information related to the child theme which may be useful later. For example, if you wanted to create a child theme for the standard Twenty Fourteen theme, you need to create a twentyfourteen-child directory with a style.css file within that contains the following code:
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Version: 1.0.0
Text Domain: twentyfourteen-child
*/
/* We load CSS code from a base theme */
@import url('../twentyfourteen/style.css');
/* Our CSS code we insert below */
The above code is essentially a simplified version of a standard theme style.css file; we may also include other header parameters like: child theme’s author or a link to a child theme’s page, etc… but in the majority of cases it’s not necessary and sticking to the basics above is more than enough.
If you would rather avoid using the @import function to load CSS code from a base theme, we may use another method. To do this, we should create a functions.php file in our child theme directory and add the following code to it:
<?php
add_action('wp_enqueue_scripts', 'child_theme_css');
function child_theme_css() {
wp_enqueue_style('parent-theme-css', get_template_directory_uri() . '/style.css');
}
It is a more elegant method and we personally prefer this method.
So we’ve got our style.css file and can now add our own CSS code to the theme. But wait! CSS code is not the only thing you can override with a child theme. In fact, you may modify all the other theme files too. All that you need to do is copy the file to the child theme directory, including any directory structure that the base theme has, and modify the copied file with your changes. What this means is that if a theme’s files that we want to overwrite are stored in a subfolder of the theme directory, then we will need to recreate the folder structure; we can’t just copy the file only to our child theme folder.
For example, if we want to override the functions.php file, we can just copy the file directly to our child theme directory (or create a new file with the same name) and modify it; since the file is in the root of the theme directory we don’t need to create any additional directories. However, if we wanted to overwrite the inc/config.php file, which is not in the root of the theme directory but stored in a folder in the root called inc, then we would also need to create a new folder in our child theme’s folder called inc, and then copy the config.php file to this new folder.
The functions.php file is unique because it generally includes the majority of a theme’s additional functions, so in order to avoid issues with overwriting this file after updates a very interesting mechanism has been implemented – the functions.php file is loaded from both a base theme and a child theme, but the file from the child theme is loaded directly before the file from the base theme. Thanks to this it’s possible to overwrite functions from the base theme without making a mess.
Does this solution have any disadvantages?
Of course, there are some issues that may be encountered when implementing a child theme – it may happen that the changes that you implement in the copied files for overwriting don’t actually work. This is likely due to the base theme not including full support for child themes. In this situation it’s worth contacting the theme’s author and letting them know, as this issue often only affects certain files or is due to certain functions selected in the functions.php file that can be easily addressed. Fortunately, support for child themes is quite common so these problems rarely occur.
The second disadvantage is that if there are huge modifications that greatly change the existing functions in the base files, then we will have to make the changes in our overwritten files ourselves (in order to be able to add the new functions) – unfortunately, it’s impossible to completely eliminate this problem but it does restrict the scope of our fixes to comparing specific files instead of the whole theme as the list of files overwritten can be seen immediately in the child theme directory.
Alternative solutions
If we’re looking to modify the CSS code of a theme only and don’t much care for editing files and FTP-ing files about the place then there are some other solutions that will let us modify the CSS without losing changes after a theme updates. One such solution is the JetPack plugin, which includes a module called Custom CSS to keep things in the WordPress backend if directory diving isn’t your thing.
Other Interesting Facts
In the WordPress themes repository, which houses a massive collection of themes for you to try, it is in fact possible to add child themes that extend an existing theme to the repository. Such themes, in addition to the usual link to the download and a preview of the theme, also include a link to the base theme:
Summary
Child themes enable easy and safe modification for your themes without fear, and modifications created using this method are protected even when updating a base theme.
A child theme always includes a style.css file in which the Template attribute specifies the name of the base theme. The functions.php file is loaded from both themes in order to ensure the code is overwritten effectively.
If you’re looking to modify CSS code only, then it’s worth considering using a plugin that allows you to overwrite existing CSS code.