A WordPress child theme – the proper way to customize a WordPress theme

A WordPress child theme – the proper way to customize a WordPress theme

There are thousands of WordPress themes here. Despite the large number of themes, you will probably never find a theme that offers everything you are looking for.

Fortunately, customizing a theme is not very hard, so that picking a theme that meets your key requirements might be good enough.

The best way to modify a WordPress theme, is by creating a child theme. Why? Because a child theme offers you an easy way to accomplish the desired modifications, without damaging the original theme – the parent theme.

Another advantage of a child theme is that your customizations will be preserved when the parent theme gets updated.

And when you consider that a child theme inherits all features from the parent theme, then why should not you create a child theme?

When you have just started your journey in WordPress theme land, creating a child theme can be intimidating. You will have to code! My intention with this post is to show you that it does not take much to get started with a child theme.

What you need to edit a stylesheet is a plain text editor. I assume you have one installed, do not use a word processor.

Creating a child theme

No child without a parent. We need to pick a parent theme. Let us take TwentyFifteen. You find this theme is in the directory twentyfifteen within the /wp-content/themes folder of your WordPress installation.

The first thing to do is creating a new directory in the /wp-content/themes folder for our child theme. We name that folder twentyfifteen-child. Basically, you can use any name you like, as long as it is meaningful to you and unique in the themes folder. Even the addition -child is not mandatory, but a good practice.

Now copy the style.css and screenshot.png of the parent theme from the twentyfifteen folder to the directory of the child theme. In my case that is twentyfifteen-child.

At this very moment, the style.css of our child theme is an exact copy of that of the parent theme. That is not necessary, so let us change that:

  1. open the style.css with your plain text editor
  2. leave the first two lines untouched, and remove everything else from the child theme’s style.css
  3. add ” Child” to the name of the theme (here: Twenty Fifteen)

Your stripped style.css should look like this:

Next we need to acknowledge the relationship between the child theme and the parent theme.

That is a matter of adding “Template: twentyfifteen” on line #3.

Because of this simple template reference, the child theme inherits all functionality from the parent theme. Simple, but powerful.

Please note that most web servers run on Linux, a case sensitive operating system. TwentyFifteen is not the same as twentyfifteen. Therefore, make sure that template name matches the spelling and capitalization of the parent theme’s folder!

Finally, we add a “*/” on line #4.

With the /* we started a comment. With */ we close the comment, otherwise everything after the /* will be treated as a comment. And comments are ignored. That is not what we want.

Here is the result of our labor:

This is the most elementary WordPress child theme we can create. We need to give it a distinctive name, and we need to refer to the folder of the parent theme.

In case you want to add your own name as theme author, go ahead. Just make sure that you put your name in the comments areas – between the /* and */.

Since the parent theme and the child theme have their own directories and stylesheets, WordPress recognizes these as two separate themes.

In fact, we can already activate our child theme. But do not it when your site is already live, since it will look like this:

TwentyFifteen Child Theme without CSSWhy is that? All our basic child theme does, is refering to the PHP templates of the parent theme. At this stage, we are using all of the parents functionality, but not the styling.

This situation leaves us two options:

  1. create our own style.css from scratch
  2. import the style.css of the parent

For now, let us choose for option #2.

To import the styling from the parent theme we need to add one more line:

Add this line at the top of the child theme’s style.css, but below the heading we created earlier – so below the comment area.

This rule imports the style.css of our parent theme, which is located in the twentyfifteen folder. This is a so called relative link. From the child themes folder, we first move one level up (../), and than enter the twentyfifteen folder, where we grab the style.css.

The style.css of our working child theme includes these lines:

Our child theme of the TwentyFifteen theme is now complete. When you activate the child theme and visit the website, you will see an exact copy of the original TwentyFifteen theme.

That is because we are using the template files (the functionality), as well as the styling (the design) of the TwentyFifteen theme.

Now we can make adjustments to the child theme, without the risk to lose those customizations with the next update of the parent theme.

Sipping from the CSS cup

A child theme that looks exactly like the parent theme is not very exciting, so we are going to change our child a bit.

The color code of the post titles (.entry-title a) of the parent theme is #333. That is anthracite, almost black. The font-size of the post titles is 39px. Let us make these titles a little bigger, say 42px, and orange (#F24D22).

Put the following CSS code under the line with the @import command:

The .entry-title a part is called a selector. The selector indicates what you want to change.

The color and font-size are both properties. The hexadecimal number #F24D22 is the value of the color property, and 42px is the value of the font-size property.

A property and a value, make a declaration. Every declaration is terminated by a semicolon (;).

One or more declarations between curly braces are called a declaration block. In the example above, the declaration block counts two declarations.

And last but not least, a selector in conjunction with a declaration block form a CSS rule.

When you have followed along, this is what the stylesheet of your child theme should look like:

And here is the live version:
Since the parent theme and the child theme each have their own directories stylesheets, they are recognized by WordPress as two separate themes.

The browser executes the CSS rules in a style.css from top to bottom. Remember that when your style sheet is getting longer.

Want more? For a decent introduction to web design in general,  I can recommend Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphic. This book is already in its fourth edition. A throrough book focusing on just the styling, is CSS3 The Missing Manual (Third Edition Edition).

A recap

We leave the CSS for what it is and return to the child theme.

So, in a nutshell:

  • in order to use a child theme, you have to activate the child theme – not the parent theme
  • because of the “Template: x” in the top of the child theme’s style.css, the child theme uses the functionality (the logic) of the parent theme
  • the child theme inherits the design from the parent theme’s style.css via the @import rule
  • to preserve you adjustments, add your desired custom styling to the style.css of the child theme

In this post we have lifted only a corner of the veil. The child theme is a powerful concept that offers much more possibilities than adjusting colors and font sizes.

You can change the logic by adding code to the functions.php, or modifying page templates. However, such modifications require knowledge of PHP, or at least an understanding of the WordPres template tags. Whether you want to acquire this kind of skills is a personal choice. It is not a requirement for working with WordPress child themes.

After all, you do not have to be a car mechanic to drive a car.

Disclosure: This post may contain affiliate links. When you click an affiliate link and purchase the item regarding, ThemingWP may receive a compensation.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest