Tutorials WordPress

Why You Need a Child Theme And How to Create Your Own

WordPress Finished Website
Written by ellice

Picture this: you’ve found the perfect theme for your WordPress blog. Well, almost perfect. After tweaking the menu font from Times New Roman to Open Sans and changing the sidebar background color from green to robin’s egg blue, it fits your exact vision. Until two weeks later, when the theme creator releases a new version with an essential security update. You upgrade your theme only to notice that — poof! — your custom changes have all blown away.

Luckily, you don’t have to spend your days reimplementing your changes and dreading new updates. There’s an easier way to customize your blog while retaining most of the look and feel you love: you can create a “child” theme, which inherits the “parent” theme’s functionality while adding those styling modifications that are unique to you. Even if you update the parent theme, the child theme retains your changes as long as you like.

It takes just one .css file in order to turn a regular WordPress theme into a custom child theme, and it takes less code than you think. The following is a step-by-step guide for creating a child theme from any regular WordPress theme you already have in mind.

Note: This is an intermediate tutorial that assumes you know at least a little bit of HTML and CSS. You don’t need to be a master, but we will be editing the code of a theme. If you aren’t comfortable with that yet, you might want to browse the W3Schools free CSS tutorial or enroll in Codecademy’s free HTML/CSS web track.

1. Begin With a Parent Theme and Plan Your Changes

TwentySixteen WordPress Theme

This is Twenty Sixteen, the theme that WordPress.org created and released for this year. If you’re looking for a base theme on which to make changes, definitely consider checking out their yearly releases, like Twenty Fifteen, Twenty Fourteen, and so on.

I like it for the most part, but I want to make a few changes. That black border is too harsh for me, and I’d like it to be blue. I’d also like to change the font.

First, I open Chrome Developer Tools by going to View → Developer → Developer Tools in the Chrome browser menu. (If you prefer Firefox, you can go to Tools → Web Developer → Inspector in the Firefox menu.)

WordPress Developer Tools

Developer Tools lets me inspect the theme and see where the “rules” are coming from. By manipulating the right CSS class, I can figure out what I’ll need to put in my child theme to make my changes. For example, you can see that by editing the background color to #0099ff, I can change the border from black to blue. Of course, Developer Tools is just for temporary playing around, and when I refresh this page, the border will be back to black.

2. Create Your Child Theme Folder and Files

It’s important to label your child theme carefully, beginning with the name of the folder you put it in. That way, WordPress knows how to identify it automatically. Appending “-child” to the end of the name of the original theme is the best practice. So in my case, since Twenty Sixteen is inside a folder named “twentysixteen,” I name my folder “twentysixteen-child.”

WordPress Theme Folders

The first file I need to create is style.css, a css file that includes relevant information about my theme and the custom styling I want to add to its appearance.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twentysixteen-child/
Description: My first child theme, based on Twenty Sixteen
Author: Lauren Orsini
Author URI: http://lorsini.com
Template: twentysixteen
Version: 1.0.0
Tags: two-columns, blue, right-sidebar
Text Domain: twentysixteen-child
*/

I begin by filling out the necessary details. Only “Theme Name” and “Template” are required. WordPress needs to know the name of the theme, and it also needs to know which theme it should consider this theme’s parent, in this case, Twenty Sixteen. The rest you can fill out with your custom information, or leave blank. In fact, this structure has become standard for people interested in publishing their themes to WordPress.org. If you’re just building your child theme for personal use, all you need is the theme name, description, author, template, and version.

Now, I need to add the styles I want to change. I want to change the black border to blue, and I want to change the header font to Georgia. The header font is displayed in three places in the theme—site title, entry title, and widget title, so I need to make sure to include all three CSS classes in my style in order to affect all three locations.

WordPress Theme

After I finish this, my child theme is functional. I could install it at this step, but it would only have two styles, and the rest would be default. That’s not what I want; I want the theme to inherit the styles of Twenty Sixteen. So I need a second file, titled functions.php.

Simply copy-paste the following code into the functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

This is a function that will enqueue the parent and child style.css file. To enqueue something is to add it to the queue of similar items to be processed by the browser. This function makes sure both sets of styles are loaded in the correct order on a viewer’s screen.

A final, optional step is to create an 880×660 image (PNG file type recommended) from a screenshot of your child theme. That way, if you have a lot of themes installed, you’ll be able to see what this one looks like at a glance.

3. Upload Your Child Theme to WordPress

Now I have a folder, titled twentysixteen-child, that contains two files — style.css and functions.php. It’s time to compress that folder into a zip file and upload it to my site.

Navigate to Appearance → Themes and select “Add New,” which will allow you to upload a zip file. WordPress will first check that the parent theme is installed, and if it is, you should be allowed to upload your theme. If the parent theme isn’t found, it won’t work.

WordPress Uploaded Theme

Now, you should be able to see your theme in the list of uploaded themes. Here’s what mine looks like when I click on it. Notice I did not add a preview image to my theme, but it still worked. But see how it includes all the information I put in in step 2?

Activate your theme, and if everything has gone well, you should be able to see your finished changes live. Ta da! I have the new border color and header fonts that I wanted. Better yet, even if WordPress updates the Twenty Sixteen theme, my changes won’t budge.

WordPress Finished Website

I hope this tutorial has helped you to see how easy and helpful it can be to have a child theme on your WordPress blog. It’s a great way to future-proof your theme so that it stays good-looking and custom, no matter what comes your way.

Need managed WordPress hosting? DreamPress gives you lightning fast speed, great security, and “Look, Ma, no hands!” flair.

About the author

ellice

Ellice comes to us from House DreamHost, the first of her name, Gatekeeper of All Things Content, Protector of the Brand and Ruler of Social Realms.

tl;dr - Ellice is the Content Marketing Manager at DreamHost and oversees all social media and content efforts.

4 Comments

  • Hey, that is awesome. It happened to me recently. I made a lot of changes to my blog’s design and as soon I update the theme, everything vanished. I just came to know the reason. I didn’t setup the child theme.

  • Hi there,

    I’ve two simple questions

    1) If developers release the latest update of any theme, both the parent and the child theme gets updated or just the parent theme?

    2) can I rename twenty fourteen theme, so that I can give my own blog name, lets say I rename twenty fourteen to “hopper” and child theme as “hopper-child” is it possible?

    3) If the answer to the second question is yes, then do I still get updates? cause we change the name of the theme (I saw this on couple of websites) I hope you understand my question

    Thanks,

    • 1) Just the parent.

      2) Yes, but you need to rename it in the style.css as well otherwise things get weird. It’s better not to, as TwentyFourteen isn’t meant to be a forkable theme. There’s a theme called Underscores which is perfect for that, though.

      3) No, if you fork and rename a theme you stop getting updates. WordPress.org bases it on the folder name AND the style.css… which you’ve changed 🙂

  • This is an instruction written by someone that imho knows a process so well that they don’t realize when they are leaving chunks of instruction out.

    First off it isn’t just basic CSS and HTML. You need to also understand how to get around in Developer Tools. A lot of code pops up when you choose Developer Tools and I have trouble finding what style goes with what. But I guess I can figure that out.

    BUT
    Then you tell us write code into a php file.
    Where is the functions.php file?
    Should I go into my FTP and search for it?
    Am I going to duplicate that file or are we creating a whole new php file?

    Do you realize you never gave us the code to put into said php file?
    This is what you wrote in quotes below.
    “Simply copy-paste the following code into the functions.php file:”

    Then there is nothing, no code, no instruction on how to create a php file.