How to Create a WordPress Child Theme

Everything You Need To Know About Child Themes in WordPress

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.

  1. In your WordPress directory, go to wp-content/themes.
  2. 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.
  3. Remember: No spaces in the name to keep errors at bay!
  4. Create two files to place in twentyfourteen-child : css and functions.php
  5. 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:

Child Theme

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.

  1. Using @import after Version like this: @import url(“../twentyfourteen/style.css”);
  2. 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:

Child Theme Examples

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.

Child Theme tips

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.

About author View all posts

Tracey Jones

Tracey Jones is professional WordPress developer and currently working with HireWPGeeks, a leading Druapl to WordPress theme conversion company across the globe. When she is not developing web sites she loves to write excellent stuffs related to WordPress and socializes it through social media platforms.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.