Child Themes in WordPress – Getting Started

The Basics of Child Themes

There are many reasons why you should create child themes when using any customization. If you modify the CSS or PHP directly in a WordPress theme, and later update the theme, all of your changes will be lost.

With child themes, you can update the parent themes without overwriting your custom styles.

I prefer to use a theme released directly from WordPress.org, such as Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, etc., because they are the most stable and maintained.

Sometimes, none of these are close enough to the design I’m going for, and I’d spend far too much time rewriting and modifying it.

In those cases, I browse the Popular and Featured themes on WordPress.org, looking mainly for active installs, rating and number of ratings, and when it was last updated.

resortica-lite wordpress theme child themes
Credit: Resortica Lite theme by Code Themes

Creating a child theme opens up a great deal of customization, without being overwhelming. You can customize your child theme as much or as little as you want.

For the purpose of this tutorial, I’m going to be using Twenty Seventeen (to begin the theme I will be using for this site!).

The Stylesheet

The first step when creating a child theme, and really the only required step is the header in the style.css file.

I use CSS preprocessors (typically I use Sass, but my current favorite is Stylus). I use them to keep my stylesheets separate and modular, then compile them into one.

This is the structure I follow for my Sass, SCSS, or Stylus files, more or less:

stylus/
  |__ reset.styl
  |__ typography.styl
  |__ colors.styl
  |__ header.styl
  |__ body.styl
  |__ footer.styl
  |__ media-queries/
    |__ 200.styl
    |__ 480.styl
    |__ 768.styl
    |__ 992.styl
    |__ 1200.styl

As stated above, I develop child themes locally before uploading them to a live site.

So, create a folder in your themes directory, i.e. /var/www/html/wordpress/wp-content/themes, named twentyseventeen-child, or as appropriate if you’re using a different parent theme.

Create your style.css file and add the following code.he Basics

This header must be at the top of your style.css file (or style.styl), to be a valid Child Theme.

/*
Theme Name: Twenty Seventeen Child
Theme URI:
Author: Kimberly Pennington
Author URI: http://kimberly.codes
Template: twentyseventeen
Description:
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: twentyseventeen-child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url("../twentyseventeen/style.css");

Once you have saved the stylesheet, you should be able to see your child theme listed on the Themes Page.

child themes wordpress

To show an image instead of the blank transparency, you can either copy the screenshot.png from your parent theme, or create a new screenshot.png.

You can take a screenshot and simply add “CHILD THEME” across the picture, or take a screenshot once you have done some customization.

If you use an image different from the parent theme, it makes it a little easier to distinguish which is which on your Themes page.

The recommended dimensions for screenshot.png are 1200 x 900.


You should now be able to activate the theme and begin making your modifications!

In a later post, I’ll show you had to make some serious changes to the themes, but for now, you can experiment with new CSS styles.


As always, if you encounter any errors during the process, remember to Google that shit!

Errors are inevitable when learning new skills.

The best way to learn new skills is to keep going, and keep digging, when you run into these problems.

Though it can be frustrating at times, in the end you will have learned something new! (Yay!)

Thanks for reading!

/kimberly

Syntax Highlighting by EnlighterJS

About the Author

Kimberly is currently a Test Automation Engineer for Mozilla, with a focus on automating web accessibility testing.

While she always enjoys learning new technologies, her current focus is python, and when she has free time (she doesn't), she enjoys JavaScript programming and learning about Data Analysis.

When not coding, Kimberly spends time with her three young boys, brand new baby girl, and her partner, in Durango, CO.


One Reply to “Child Themes in WordPress – Getting Started”

Comments are closed.