Create a WordPress Child Theme
Child themes are the saving grace of all WordPress developers who are testing the waters on theme development; who want to edit their themes without the imminent threats of breaking the entire website at a code error and losing the changes after a theme upload. While most people get overwhelmed with the concept of how to create a WordPress Child Theme, the process is actually quite simple.
Child themes work by inheriting the style and functionality of another (called ‘parent’) theme. And since I’m an analogy junkie: Think of it as a transparent plastic-overlay which you can paint on without actually making any changes in the original piece of art.
It’s ridiculous how terrifying the idea of child themes is to WordPress Theme beginners. So in an attempt to reduce anxiety over child themes, this simple article will explain how to:
1. Create a Child Theme
Manually
This is as simple as creating a new folder.
- In your WordPress directory, go to wp-content/themes.
- Create a new directory and name it after your Child theme. Note that it is considered good practice (but not a necessity) to name your child theme after the parent theme. For e.g., if you are creating a child theme for Twenty Fourteen theme, you should name the Child theme: twentyfourteen-child.
- Remember: No spaces in the name to keep errors at bay!
- Create two files to place in twentyfourteen-child : css and functions.php
- Told you it was easy.
Via Plugin
If you want to go an even easier route (or don’t want to access FTP or shell-account): Install One-Click child theme plugin, which will give you a ‘Child Theme’ option right under the ‘Themes’ and create a child theme for the theme that’s currently active.
Be sure to name the child-theme after the parent. (“What? Just reinforcing good behavior…”)
2. Edit a Child Theme
This is the fun part, and we will do it in two steps. Chop shop!
Editing style.css
We created a stylesheet to live inside the newly created child-theme directory. This is one of the two files that are mandatory. So basically, from now on, any CSS changes you want to make, start right here.
Before you begin, add this bit of code at the top:
The most important parts of that bit of code are Theme name (required) and Template, which corresponds to the template file in the parent theme directory. Since we are working with Twenty Fourteen, that’s the template we called. You, of course, need to adjust this (and the rest of the data) accordingly.
We have aligned the WordPress template, and now we can add the CSS. There are two ways to do that.
- Using @import after Version like this: @import url(“../twentyfourteen/style.css”);
- Or you can go with the correct method of enqueuing the parent theme stylesheet using wp_enqueue_scripts and wp_enqueue_style() in the child theme’s functions.php file (a better practice for performance, as suggested by Google and Yahoo).
If you’re going with this one, make sure your child-theme’s functions.php opens with this:
You can remove get_template_directory_uri() if your parent theme does not use more than one stylesheets. Your child theme’s style.css will load automatically and override the stylesheet we called from the parent theme.
Editing functions.php
This is as simple as it could get.
There’s an interesting use of a child-theme’s functions.php. Since it is loaded before the parent theme’s functions-file, you can make the user functions of the theme ‘pluggable’ (read: replaceable by a child theme) by the simple process of declaring them conditionally.
Things to watch out for:
- When (not) to make a child theme: Developers often go overboard at using child themes. Reserve it for when you need to make larger changes (than background colors and typography). But if you’re thinking of editing the entire layout, structure, and functionality; create a new theme instead.
- “This is not the directory you’re looking for”: There’s a difference between get_stylesheet_directory() [this is to include files that reside within the child theme’s directory structure] and get_template_directory() [this one points to the parent theme’s directory]
- Overwriting functions in parent theme: check your child theme functions with function_exists(), everytime.
Endnote
Easy, wasn’t it?
There are so many things you can do with child themes. Just look at WooThemes, who are now selling pre-designed child themes of their Storefront theme.
And if you have some child-theme tricks, share them with us in the comments below.
