CREATE A FOLDER IN wp-content/themes

As mentioned, a child theme needs three things: its own folder, a style sheet and a functions.php file. We will start with the folder.

Like any theme, child themes are located in wp-content/themes in your WordPress installation. So, navigate there now and create a new folder for your child theme.

A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. Because we are using the Twenty Fifteen theme, we will call our folder twentyfifteen-child.

You are free to use any name you want to; just make sure not to include any spaces because that might cause errors.

CREATE A STYLE SHEET

Now that we have our folder, we will need a style sheet. In case you are not aware, a style sheet contains the code that determines the design of a website. Themes can have multiple style sheets, but we will be content with one for the moment.

Making a style sheet is easy: Simply create a new text file and call it style.css. Done! However, in order for it to actually work, we will have to paste the following code, the so-called “style sheet header,” right at the beginning of the file (code courtesy of the WordPress Codex):

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
description: >-
  Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Here is what each line means:

  • Theme name. This is the name that will show up for your theme in the WordPress back end.
  • Theme URI. This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.
  • Description. This description of your theme will show up in the theme menu when you click on “Theme Details.”
  • Author. This is the author’s name — that’s you, in this case.
  • Author URI. You can put your website’s address here if you want.
  • Template. This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!
  • Version. This displays the version of your child theme. Usually, you would start with 1.0.
  • License. This is the license of your child theme. WordPress themes in the directory are usually released under a GPL license; you should stick with the same license as your parent theme.
  • License URI. This is the address where your theme’s license is explained. Again, stick with what your parent theme says.
  • Tags. The tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are relevant.
  • Text domain. This part is used for internationalization and to make themes translatable. This should fit the “slug” of your theme.

If you feel a bit overwhelmed (already?), you might be happy to know that not all of this information is actually required. In fact, all you really need is the theme name and template.

The rest is important only if you plan to publish your theme, which I am not. For this reason, my child theme’s header looks like what’s shown below. Feel free to copy it and make your own adjustments.

/*
 Theme Name:   Twenty Fifteen Child Theme
 description: >-
   A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

ACTIVATE CHILD THEME

Once your folder and style sheet are present, go to “Appearance” → “Themes” in the WordPress back end and find your child theme there. When you click on “Theme Details” now, you will see the contents of the style sheet header. That’s what that info is for.

The WordPress child theme’s header.

The WordPress child theme’s header.

All right, now click on the button that says “Activate.” Good job! Your theme is now activated. However, if you look at your website, it should look something like this:

WordPress child theme without style sheet.

WordPress child theme without style sheet.

Don’t worry, everything is fine. You haven’t screwed up. Get your face out of the paper bag. The reason why your website is empty is because it doesn’t have any styles yet. No styles means you get treated to an all-text experience.

I just wanted to show you that, in theory, having a style sheet and a folder is enough to create a child theme. And if it worked for you, then you’ve already done it! I’ll be the first to admit, though, that it could look a little better. Let’s get to that now.

CREATE FUNCTIONS.PHP

Next up is the functions.php file. You have probably heard of this file before, but let’s quickly go over what it is for.

The functions.php file allows you to change and add functionality and features to a WordPress website. It may contain both PHP and native WordPress functions. Plus, you are free to create your own functions.

In short, functions.php contains code that fundamentally changes how a website looks and behaves. Got it? Nice, I knew I could count on you.

Creating the file is as easy as creating a style sheet, if not more so. All you need is a text file named functions.php, and then paste in the following code:

<?php
//* Code goes here

Seriously, that’s it. Just add that opening php tag and you are good to go. Of course, you could get all fancy and write some information in the header (don’t forget to comment it out so that WordPress doesn’t try to execute it), but this will do for our purpose. Add it to your theme’s folder as well.

Now, let me say this: You don’t need functions.php. If you don’t plan to use PHP to modify your theme, then you can completely do without it. A style sheet and other files might be enough for you.

However, I wanted to include this part, first, so that you would know about this important file and, secondly, because of the next step.

INHERIT PARENT STYLES

So, you are probably aware that your website is still mostly text. It’s time to change that. How? I’ll show you.

Because you are using a parent theme, you probably have a good idea of how your website is supposed to look. For our example, Twenty Fifteen, we want to get to this point:

WordPress’ default Twenty Fifteen theme.

WordPress’ default Twenty Fifteen theme.

To get here, you will need to inherit the information in your parent theme’s style sheet. There are two ways to do this.

One is via CSS and the @import rule. By copying the code below into your style.css file, you are telling your child theme to use the info contained in your parent theme’s style sheet to present your content.

@import url("../twentyfifteen/style.css");

Be aware, however, that this is the old way of inheriting parent styles and is no longer recommended. The reason for that is performance.

If you need to import several style sheets (which is not unheard of), then using @import will cause them to download consecutively. This can slow down the page’s loading time by several seconds (which, I probably don’t have to tell you, isn’t a good thing).

The second, recommended way to load the parent’s style sheet — and the reason why we created functions.php earlier — is to use wp_enqueue_style(). This WordPress function safely adds style sheet files to a WordPress theme.

In our case, the corresponding code looks a little something like this:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Be sure to paste this at the beginning of your functions.php file, and save it (remember to upload the file if you are using an FTP connection). Now check your front end; it should look like this:

WordPress child theme successfully activated.

WordPress child theme successfully activated.

Pretty, right? Congratulations, you did it! You created your very first WordPress child theme. If I were there, I’d pat you on the shoulder.

However, you might object, rightly, that it looks exactly like the parent theme. So, what’s the point of going with a child theme?

Don’t worry. Next you will learn how to customize the child theme to look exactly the way you want.

EXTRA POINTS: ADD THEME IMAGE

If you want to get all fancy, you could add a theme image. This image will show up in the theme menu in WordPress.

All you need to do is create a PNG file, named screenshot.png, and place it in your theme’s folder (in our case, twentyfifteen-child). Make sure to put it in the top-level directory and not in a subdirectory such as images.

The recommended size is 880 × 660 pixels, although it will be shown as 387 × 290. The larger dimensions ensure that the image will show up well on high-resolution screens.

Other image formats such as JPEG and GIF would also work, but PNG is recommended. You can do this now for extra props or wait until you are done customizing the theme, because the image is usually a screenshot of the theme’s design.

CUSTOMISATION

You can now copy template files from the parent theme into the child theme, and customise them to your heart’s content. You can also create custom styles in your child theme’s style.css.