How to create a child theme for WordPress?

Are your looking for a way to customize your existing theme, which you downloaded or purchased, in the most rightful way? If yes, then here we go.

Obviously, you can just jump into the source of the theme to change whatever you want if you can. But once the theme get new updated, you simply cannot let the new update applied to yours. Because all the changes you made will go away. Even if you can take note what you did from previous time, then re-apply on the updated theme, it’s really painful, isn’t it?

The solution is child theme.

In short,child theme is a theme inheriting all styles/functions/features from a theme you base on, so called parent theme. You only need to add in things you need, change on the only points you want. You don’t have to create a new theme from scratch, meaning you don’t have to master how to create a theme, which is much more complicated.

The next benefit is: once there’s a new update of parent theme, then it’s fine, just let it be updated to get a better one. Your child theme is still there separately, and keeps inheriting from parent theme.

Before we can start, be noted that you need some knowledge about HTML/CSS. Knowing PHP can help you with more customization, even just the basic which is enough for you to read, understand and copy/paste.

Getting started

I’ll use a fresh installation of WordPress on Windows, and choose Twenty Fifteen as the parent theme. Other hosting environments and themes should cause you no concern.

Creating the child theme

Browse to WP installation location, folder: wp-content\themes.

Create a new folder, I name it twentyfifteen_2, just for easy recalling that its parent is twentyfifteen.

Go into twentyfifteen_2, create child them stylesheet file file named style.css, with below content:

It’s a list of key:value pairs. For most of them, you can use values that are relevant for you. Just take note on 1 important item Template. This is used to indicate which is the parent theme. So, you must make it correct, which is twentyfifteen in this case.

style.css is the file where you can add in your own stylesheet. Beside that, the child theme requires to have a file functions.php containing some PHP code to enqueue stylesheet properly.

So, you need to create file functions.php in you new theme folder. The folder now contains 2 files:

Let’s look at an example content of new file functions.php:

This is basically to enqueue 1 parent stylesheet file into the child theme. If parent theme has more than 1 stylesheet file, you need to enqueue all of them.

The second call to wp_enqueue_style() is to ensure that child theme stylesheet will be loaded after parent’s. It will  make your stylesheet applied properly.

So far so good, your child them is ready. You can just go to Dashboard>Themes and activate it. New child theme has no thumbnail yet, but don’t worry, it works. And be noted that what old setting of parent theme with Menu, Theme Options  is lost, you should configure again for child theme.

Make changes on child theme

Stylesheet

Stylesheet is usually the first one you want to change  on WP theme: changing background, color, font of some element on the page. Some themes allow you many configurations. But if it’s still not flexible enough, then do the stylesheet on child theme. I’ll make an example on changing the color of article title of my twentyfifteen_02 theme.

I activated the child theme, browse to first post “Hello World” on Firefox. Then I open HttpFox plugin, a very useful plugin on Firefox, and inspect the article title as below:

You can see that title is in <h1> tag having the css class entry-title, inside the <article> tag. Let’s say I want to change title color to blue, I’ll add below lines to style.css of child theme:

Template files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

Functions.php

The functions.php of a child theme does not override the on of parent theme, but instead it will add more stuff to parent’s. More precisely, it’s loaded right before the parent’s file. As a result if you want to add a function to parent theme, you just open the child’s functions.php and add into there.

Let me show you how to add a favicon link into head of the page.

Note that the opening/closing tag of PHP code is only required once at the beginning and in the end of the file.

You want to go even deeper,  override a function of parent theme? Yes it’s possible with one condition, the author of parent theme write a function in a correct way: check if the function exists before declaring it, something like:

Because, I mentioned above that child’s functions.php is loaded before parent’s. Then, in child’s functions.php, you just declare the same function to override parent’s:

 

That’s it. Hope you enjoy and be able to create magic styling on your WP without hassles.