How to Customize Theme Style with Child Themes in WordPress Twenty Fifteen - dummies

How to Customize Theme Style with Child Themes in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

A WordPress theme consists of a collection of template files, stylesheets, images, and JavaScript files. The theme controls the layout and design that your visitors see on the site. When such a theme is properly set up as a parent theme, it allows a child theme, or a subset of instructions, to override its files. This ensures that a child theme can selectively modify the layout, styling, and functionality of the parent theme.

The quickest way to understand child themes is by example. Here, you discover how to create a simple child theme that modifies the style of the parent theme. Currently, the default WordPress theme is Twenty Fifteen.

The Twenty Fifteen theme.
The Twenty Fifteen theme.

You likely have Twenty Fifteen on your WordPress site, and Twenty Fifteen is child theme–ready; therefore, it’s a great candidate for creating an example child theme.

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 to creating a child theme is to add the directory that will hold it. For this example, create a new twentyfifteen-child directory inside the /wp-content/themes directory.

To register the twentyfifteen-child directory as a theme and to make it a child of the Twenty Fifteen theme, create a style.css file and add the appropriate theme headers. To do this, type the following code into your favorite code or plain text editor, such as Notepad (Windows) or TextMate (Mac), and save the file as style.css:

/*
Theme Name: Twenty Fifteen Child
Description: My magnificent child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyfifteen
*/

Typically, you 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, this header appears only on the Manage Themes page (choose Appearance → Themes).

  • Author: This header lists one or more theme authors. Currently, this header is shown only on the Manage Themes page (choose Appearance → Themes).

  • Version: The version number is very useful for keeping track of outdated versions of the theme. Updating the version number when modifying a theme is always a good idea.

  • 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 example child theme uses Twenty Fifteen as the parent, your style.css needs to have a Template header with a value of twentyfifteen.

Activate the new Twenty Fifteen Child theme as your active theme.

The Twenty Fifteen Child theme which doesn’t look quite right.
The Twenty Fifteen Child theme which doesn’t look quite right.

You can see that the new theme doesn’t look quite right. The problem is that the new child theme replaced the style.css file of the parent theme, yet the new child theme’s style.css file is empty. You could just copy and paste the contents of the parent theme’s style.css file, but that would waste some of the potential of child themes. Instead, you want to tweak only those styles and/or features that you want to modify and leave the rest alone.

Loading a parent theme’s style

One of the great things about Cascading Style Sheets (CSS) is how rules can override one another. If you list the same rule twice in your CSS, the rule that comes last takes precedence.

For example:

a {
color: blue;
}
a {
color: red;
}

This example is overly simple, but it illustrates the concept nicely. The first rule says that all links (a tags) should be blue, whereas the second one says that links should be red. Because CSS rules state that the last instruction takes precedence, 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 child 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 Fifteen Child theme’s style.css file:

/*
Theme Name: Twenty Fifteen Child
Description: My magnificent child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyfifteen
*/
@import url(‘../twentyfifteen/style.css’);

A number of things are going on here, so let’s break it down piece by piece:

  • @import: This tells the browser to load another stylesheet. Using this allows you to pull in the parent stylesheet quickly and easily.

  • url(): This indicates that the value is a location and not a normal value.

  • (../twentyfifteen/style.css);: This is the location of the parent stylesheet. Notice the /twentyfifteen directory name. This needs to be changed to match the Template: value in the header of the CSS so that the appropriate stylesheet is loaded.

After you refresh your site, you see that the child theme’s design and layout match the original Twenty Fifteen theme.

Customizing the parent theme’s styling

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

/*
Theme Name: Twenty Fifteen Child
Description: My magnificent child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyfifteen
*/
@import url(‘../twentyfifteen/style.css’);
h1, h2, h3 {
text-transform: uppercase;
}

You can see how the child theme looks with the CSS style additions applied — getting better, isn’t it?

The updated child theme with uppercase headings.
The updated child theme with uppercase headings.

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. Not only is it quick and easy to do, but you don’t have to modify anything in the parent theme to make it work.