Using A Child Theme in WordPress
If you develop WordPress themes, chances are that you fall into one of two camps. You may be the person who takes premium themes and customizes them to your client’s wishes. Or, you may be a custom builder who writes everything from scratch. Chances are you use a lot of the same code, functions, and themes in your endeavors, and may even have a core theme created with all of those little bits of code.
Regardless of your method to the madness, I cringe a little bit when I see someone slicing and dicing a theme straight out of the box. You lose the ability to further update functionality in the core theme, and you end up (sometimes completely) rewriting the theme just to make your site work. It’s inelegant, and may lead to problems in the future. But, there’s a better way: Build a child theme, and customize that intead.
A child theme is a theme that is based on an already created template set. It takes the functionality, color scheme, options, and code from the parent theme and allows you to make changes without messing with the original code. If you update the parent theme, the child theme will still retain any changes while adding any new functionality straight in — a win-win for everyone!
Funny thing: It’s highly underutilized. A survey by Elegant Themes shows that only 35% of people who customize their theme use a child theme when doing so. I think it’s because people don’t understand how. And I’m here to fix that!
Creating a Child Theme
Step 1: Create a sub-folder for your child theme (FTP)
You can name it ‘themename-child’, or name it something completely different. That’s up to you.
Step 2: Create the minimum files for your child theme
At the bare minimum, you need a style.css file. This file will do two things:
- Contain the over-writes for any style changes you want to make
- Let WordPress know that this theme is a child theme instead of a parent theme.
Here’s an example of the top of my old style.css theme
/* Theme Name: The Binary Church Version: 3.0.3 Description: This is a child theme. Author: Mitch Canter Author URI: https://mitchcanter.me Author Email: mitch@studionashvegas.com License: GNU General Public License v3.0 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Template: parthenon-core */ /* Import Standard Styles ---------------------------------------------------------------------------------- */ @import url( '../parthenon-core/style.css' );
There’s a couple of things worth noting here:
- The ‘template’ line has a link to the folder name of the theme I’m building on top of. That could be ‘standard’, ‘twentytwelve’, or any number of things – it’ll depend on which theme you’re using.
- That same slug is used below in the @import URL statement. That import statement brings in the current theme’s stylesheet.
- The only required entries here are Theme Name and Description – everything else is optional (but nice to have).
Step 3: Activate the Theme in WordPress
Once you’ve done this, go back to your site and view it. It should look exactly the same – and that’s good! Unless you’ve made any style changes to the theme, nothing will be different – it’s still pulling from the old styles (and your new stylesheet). One thing to keep in mind: any new styles you add need to go under the import statement; the order of operations say that styles further down the file will overwrite ones closer to the top, so any styles you use will over-write the default styles pulled in by the import statement.
Step 4: Make a copy of any .php files in your WordPress theme you want to change
Want to add something to the header? Make a copy of header.php and insert it into the new folder. Now, WordPress will call that file first, and will call any changes. Any un-changed files can remain in the parent theme directory and will be untouched.
A Quick Rule of Thumb on Theme Location using BlogInfo
There’s two ways to pull information from a theme’s folder using <?php bloginfo(); ?>: ‘stylesheet_directory’ and ‘template_directory’. Using ‘stylesheet_directory’ will pull from the child theme folder, while ‘template_directory’ will pull from the parent theme folder. Make sure to use them accordingly!