Creating a child theme

Like regular themes, a child theme needs to reside in a directory inside the /wp-content/themes directory. The first step in creating a child theme is adding the directory that will hold it. For this example, connect to your hosting account via Secure File Transfer Protocol (SFTP), and create a new directory called twentynineteen-child inside the /wp-content/themes directory.

To register the twentynineteen-child directory as a theme and to make it a child of the Twenty Nineteen theme, create a style.css file, and add the appropriate theme headers. To do this, type the following code in your favorite code or plain-text editor (such as Notepad for the PC or TextEdit for the Mac) and save the file as style.css:

/*
Theme Name: Twenty Nineteen Child
Description: My 2019 child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentynineteen
*/

Typically, you can find the following headers in a WordPress theme:

• Theme Name: The theme user sees this name in the back end of WordPress.
• Description: This header provides the user any additional information about the theme. Currently, it appears only on the Manage Themes screen (which you access by clicking the Themes link on the Appearance menu).
• Author: This header lists one or more theme authors. Currently, it's shown only on the Manage Themes screen (which you access by clicking the Themes link on the Appearance menu).
• Version: The version number is useful for keeping track of outdated versions of the theme. It’s always a good idea to update the version number when modifying a theme.
• Template: This header changes a theme into a child theme. The value of this header tells WordPress the directory name of the parent theme. Because your child theme uses Twenty Nineteen as the parent, your style.css needs to have a Template header with a value of twentynineteen (the directory name of the Twenty Nineteen theme).

Now activate the new Twenty Nineteen Child theme as your active theme. (For information on how to activate a theme on your site, check out Book 6, Chapter 2.) You should see a site layout similar to the one shown in Figure 5-2.

The theme shown in Figure 5-2 doesn't look quite right, does it? The problem is that the stylesheet (style.css) for the child theme is blank, and it’s overriding the stylesheet in the parent theme.

You could just copy and paste the contents of the parent theme’s style.css file into the child theme stylesheet, but that method would waste some of the potential of child themes.

Loading a parent theme's style

One great thing about CSS is that rules can override one another. If you list the same rule twice in your CSS, the rule that comes last takes precedence.

Here’s an example:

a {
color: blue;
}

a {
color: red;
}

This example is overly simple, but it nicely shows what I’m talking about. The first rule says that all links (a tags) should be blue, whereas the second rule says that links should be red. With CSS, the last instruction takes precedence, so the links will be red.

Using this feature of CSS, you can inherit all the styling of the parent theme and selectively modify it by overriding the rules of the parent theme. But how can you load the parent theme’s style.css file so that it inherits the parent theme's styling?

Fortunately, CSS has another great feature that helps you do this with ease. Just add one line to the Twenty Nineteen Child theme’s style.css file:

/*
Theme Name: Twenty Nineteen Child
Description: My 2019 child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentynineteen
*/
@import url('../twentynineteen/style.css');

Several things are going on here, so let me break the code down piece by piece:

• @import: This piece of the code tells the browser to load another stylesheet and allows you to pull in the parent stylesheet quickly and easily.
• url('…'): This piece of the code indicates that the value is a location, not a normal value.
• ('../twentynineteen/style.css');: This piece of code is the location of the parent stylesheet. Notice the /twentynineteen directory name, which needs to be changed to match the Template value in the header so that the appropriate stylesheet is loaded.

Figure 5-3 shows how the site appears after the child theme's style.css file is updated to match the listing. It looks the same as Figure 5-1 except for the logo area in the header — an option that gets set in the Customizer and that hasn’t yet been set for this Twenty Nineteen child theme.

Customizing the parent theme’s styling

Your Twenty Nineteen child theme is set up to match the parent Twenty Nineteen theme. Now you can add new styling to the Twenty Nineteen Child theme’s style.css file. A simple example of how customizing works is to add a style that converts all h1, h2, and h3 headings to uppercase, like so:

/*
Theme Name: Twenty Nineteen Child
Description: My 2019 child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentynineteen
*/

@import url('../twentynineteen/style.css');

h1, h2, h3 {
text-transform: uppercase;
}

Figure 5-4 shows how the child theme looks with the code additions applied. In the preceding code snippet, you targeted the H1, H2, and H3 heading tags for the site and inserted the value text-transform: uppercase, which made all of those heading tags appear in uppercase font (or all capital letters) Now the site title and post titles are now all uppercase, which differs from Figure 5-3.

As you can see, with just a few lines in a style.css file, you can create a new child theme that adds specific customizations to an existing theme. The change is quick and easy to make, and you don't have to modify anything in the parent theme to make it work.

When upgrades to the parent theme are available, you can upgrade the parent to get the additional features, but you don’t have to make your modifications again because you made your modifications in the child theme, not the parent theme.

Customizations that are more complex work the same way. Simply add the new rules after the import rule that adds the parent stylesheet.

Using images in child theme designs

Many themes use images to add nice touches to the design. Typically, these images are added to a directory named images inside the theme.

Just as a parent theme may refer to images in its style.css file, your child themes can have their own images directory. The following sections show examples of how you can use these images.

Using a child theme image in a child theme stylesheet

Including a child theme image in a child theme stylesheet is common. To do so, you simply add the new image to the child theme's images directory and refer to it in the child theme’s style.css file. To get a feel for the mechanics of this process, follow these steps:

1. Create an images directory inside the child theme's directory.

   A directory is also referred to as a folder. In your SFTP program, right-click inside the SFTP window, select New Folder from the shortcut menu, and name it images.

2. Add to the directory an image to use.

   For this example, add an image called body-bg.png.

3. Add the necessary styling to the child theme's style.css file, using a few of the properties covered in Book 6, Chapter 4:

   /*
Theme Name: Twenty Nineteen Child
Description: My 2019 child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentynineteen
*/

@import url('../twentynineteen/style.css');

body {
background: url( 'images/body-bg.png' );
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
}

With a quick refresh of the site, you see that the site now has a new background. Figure 5-5 shows the WordPress logo displayed as the background image in the top-right corner. If you followed these steps, as you scroll down the site, you see that the image stays in place because you used the background-attachment: fixed; CSS rule, which fixes the background image in one spot.

Using images in a child theme

Child theme images are acceptable for most purposes. You can add your own images to the child theme even if the image doesn't exist in the parent theme folder, and you can accomplish that task without changing the parent theme.

In the footer of the Twenty Nineteen theme, I added a WordPress logo to the right of the phrase Proudly powered by WordPress, as shown in Figure 5-6. By default, the logo doesn’t appear in the footer of the Twenty Nineteen theme.

Create a folder in your child theme called /images, add your selected images to that folder, and then call those images into your child theme by using the stylesheet (style.css) file in your child theme folder.

In this next example, add the WordPress logo to the right of the footer text. You can add a customization to the child theme's style.css file to make this change, as follows:

/*
Theme Name: Twenty Nineteen Child
Description: My 2019 child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentynineteen
*/

@import url('../twentynineteen/style.css');

#colophon .site-info .imprint {
background: url( 'images/wordpress.png' );
background-position: top right;
background-repeat: no-repeat;
padding-right: 30px;
padding-top: 10px;
}

The CSS selectors (#colophon .site-info .imprint) in the code are from the Twenty Nineteen theme source code. (I wanted to target that footer text to add the logo to, so I looked at the HTML markup for the Twenty Nineteen parent theme to discover which selectors I needed to target.) Save the file, and refresh the site. Now you're showing WordPress pride.

A zip file of the example Twenty Nineteen child theme, and associated code samples, found in this chapter can be downloaded here: https://lisasabin-wilson.com/wpfd/twentynineteen-child.zip.

Overriding parent template files

When the child theme and parent theme supply the same template file, WordPress uses the child theme file and ignores the parent theme file. This process of replacing the original parent template file is referred to as overriding.

Although overriding each of the theme’s template files can defeat the purpose of using a child theme (updates of those template files won’t enhance the child theme), sometimes you must do so to produce a needed result.

The easiest way to customize a specific template file in a child theme is to copy the template file from the parent theme folder to the child theme folder. After copying the file, you can customize it, and the child theme reflects the changes.

A good example of a template file that can be overridden is the footer.php file. Customizing the footer allows for adding site-specific branding.

Adding new template files

A child theme can override existing parent template files, but it can supply template files that don't exist in the parent, too. Although you may never need your child themes to do this, this option can open possibilities for your designs.

In Book 4, Chapter 6, I cover different page templates you can add to your WordPress theme to achieve a different look and display different types of content on your site. In that chapter, you create an About Page template (about.php) that differs from the standard Page (page.php) template that already exists in the Twenty Nineteen theme. Applying the information, as you discover in Book 4, Chapter 6, you can create an about.php template; upload it to your Twenty Nineteen child theme; and then edit or adjust that file to suit your purposes.

The Twenty Nineteen parent theme doesn't have an about.php template, but because your child theme for Twenty Nineteen does, WordPress uses this template to display your About page on your website. WordPress is smart enough to recognize templates in a child theme, even if they don’t exist in the parent theme.

Removing template files

You may be asking why you’d want to remove a parent’s template file. That’s a good question. Unfortunately, the Twenty Nineteen theme doesn’t provide a good example, so you must use your imagination a bit.

Suppose that you’re creating a child theme from a parent theme called Example Parent. Example Parent is well designed, and you built a great child theme from it quickly. The child theme looks and works exactly the way you want it to, but there’s a problem: The Example Parent theme has a home.php template file that provides a highly customized nonblog home page. What you want, however, is a standard blog home page. If the home.php file didn't exist in Example Parent, everything would work perfectly.

You can’t remove the home.php file from Example Parent without modifying the theme, so you have to use a trick. Instead of removing the file, override the home.php file, and have it emulate index.php.

You may think that simply copying and pasting the Example Parent index.php code into the child theme's home.php file is a good approach. Although this technique works, there’s a better way: You can tell WordPress to run the index.php file so that the intended index.php file is respected. This single line of code inside the child theme's home.php is all you need to add to replace home.php with index.php:

<?php locate_template( array( 'index.php' ), true ); ?>

The locate_template function does a bit of magic. If the child theme supplies an index.php file, that file is used; if not, the parent index.php file is used.

This technique produces the same result as removing the parent theme's home.php file. WordPress ignores the home.php code and respects the changes in index.php.

Modifying the functions.php file

Like template files, child themes can provide a Theme Functions template, or functions.php file. Unlike in template files, the functions.php file of a child theme doesn't override the file of the parent theme.

When a parent theme and a child theme each have a functions.php file, both the parent and child functions.php files run. The child theme's functions.php file runs first; then the parent theme’s functions.php file runs. This setup is intentional because it allows the child theme to replace functions defined in the parent theme. Having two functions.php files works only if the functions are set up to allow having both, however.

The Twenty Nineteen functions.php file defines a function called twentynineteen_setup. This function handles the configuration of many theme options and activates some additional features. Child themes can replace this function to change the default configuration and features of the theme, too.

The following lines of code summarize how the functions.php file allows this to happen:

if ( ! function_exists( 'twentynineteen_setup' ) ) :
/**
* Sets up theme defaults and registers support for various
* WordPress features.
* Note that this function is hooked into the
* after_setup_theme hook, which
* runs before the init hook. The init hook is too late for
* some features, such
* as indicating support for post thumbnails.
*/

function twentynineteen_setup() {
endif;

Wrapping the function declaration in the if statement protects the site from breaking in the event of a code conflict and allows a child theme to define its own version of the function.

In the Twenty Nineteen child theme, you can see how modifying this function affects the theme. Add a new twentynineteen_setup function that adds Post Thumbnails support to the Twenty Nineteen child theme's functions.php file.

<?php
function twentynineteen_setup() {
add_theme_support( 'post-thumbnails' );
}

As a result of this change, the child theme no longer supports other special WordPress features, such as custom editor styling, automatic feed link generation, internationalization and location, and any of the other features that the parent Twenty Nineteen theme supports.

The takeaway from this example is that a child theme can provide its own custom version of the function because the parent theme wraps the function declaration in an if block that checks for the function first.