WordPress is a fairly user-friendly application, particularly for the inexperienced. But, there are a number of gotchas that cause problems for WordPress neophytes. One that I’ve seen time and again is a failure to properly use child themes.
New WordPress users, in their enthusiasm, frequently install WordPress, choose and install a theme, and then go straight to work modifying it. After many hours setting up a theme and tailoring it to their satisfaction, they get on with the process of publishing content. Then, sometime later, they notice that WordPress is asking them to update the theme. Being a conscientious WordPress user, of course they update immediately. And then, when they refresh the site, they find that all the hard work they put into modifying the theme has been undone.
This happens because updates to themes overwrite the original files. Any changes to the theme’s PHP files or the CSS files will be undone by an update. This may seem like a flaw in the way WordPress is designed, but in reality it would be quite difficult to incorporate any potential changes into an updated version of the theme, particularly if those changes clash with edits made by the user. Fortunately, WordPress provides a mechanism for editing themes that will not be overwritten by updates: the child theme.
As the name suggests, a child theme is a “descendant” of the main theme, which is known as the parent theme. Anything included in the child theme automatically overrides the equivalent file in the parent theme. When the theme is updated, only the parent is changed, and everything in the child remains the same. In this way, WordPress users are able to freely edit their themes without worrying about the work being lost.
Many premium themes come with a child theme already installed, and when editing the theme that’s where changes should be made. But, most themes do not include a child theme — fortunately, it’s quite easy to make one.
The easiest way to create a child theme is to have this plugin do it for you. It makes creating child themes a one-click process and allows users to create as many child themes for each installed theme as they like. It’s possible that in some cases this plugin won’t be able to correctly generate a child theme, usually because the theme’s developer has done something non-standard, and in that case you’ll have to do it manually.
Manually Creating A Child Theme
First, you’ll need to launch your web hosting control panel’s file browser, or log-in to your hosting account with SSH or FTP. Navigate to the “themes” directory and create a new folder. You can call the folder whatever you want, but the tradition is to name it the same as the parent theme with “-child” added to the end.
Next, create a file called “style.css” with the following content.
/* Theme Name: Child Theme One Theme URI: http://myawesomesite.com/ Description: I can edit this without being sad when my changes are overwritten. Author: Me Author URI: http://myawesomesite.com/about/ Template: myparenttheme Version: 0.1.0 */
This lets WordPress know which theme it should import all of the files from. Only the “Theme Name” and “Template” fields are required, but it’s good form to add the others too.
Any files we put in this folder will override the equivalent file in the parent theme folder. In this case, we’re overriding the parent’s “style.css” file, which is the minimum you’ll need to create a child theme. In reality though, you probably don’t want to override everything in the parent CSS file, so you’ll want to add:
Put that underneath the text we’ve already added, and it’ll pull in all of the styles from the parent. Then, you can copy any styles from the parent you want to override, paste them below this line, and edit them as appropriate. CSS rules of priority will take care of the rest.
If you also want to edit the PHP files from your theme, the same basic process applies, but there is one major exception: the functions.php file. If you want to understand how to handle that file, and full details of creating child themes, take a look at this article in the WordPress Codex.