How to Customize WordPress Theme With a Child Theme

Assuming you have a WordPress theme on your website, either a free one or a commercial one, and you want to customize it. The recommended way to do this is "creating a child theme". But what does that mean, and how do you do it?

#What is a WordPress child theme?

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme.

In the past, there was no easy way of updating WordPress themes without losing all the custom styling and changes that you had made. This becomes chaos when all the sudden you find out a widely used script in popular themes has a major exploit, and you need to update your themes ASAP. It becomes a tough choice because on one hand, you would lose all the custom styles if you update. On the other hand, you risk your site getting hacked if you don’t update fast enough.

If you make changes to a theme's files directly (i.e. anything within the /themes/yourthemename/ directory), those changes are likely to be overwritten when you next update the theme.

A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features by setting up a standalone directory in which you can create copies of a theme's files and tweak away without fear of your work being overwritten by any future updates.

#Creating your own child theme

Fortunately, creating a child theme is a piece of cake – all you need to do is create one folder, and one file.

You will need access to your website via either FTP or your hosting provider's file manager application. I would recommend that you get yourself set up with an FTP account (using software such as FileZilla), as it is easier to add and edit files and folders that way.

#Creating child theme's folder

Once you have logged into your website via your chosen FTP client, navigate to /wp-content/themes/. This directory will contain one or more folders, each of which represents a theme installed on your site.

In this directory, create a new folder. You can name it whatever you like, but I would recommend that you use a descriptive name such as parenttheme-child (where parenttheme is the name of your active theme).

Here’s an example:
creating a wordpress child theme

As you can see, my active theme is "twentyeleven", so I created a "twentyeleven-child" folder.

#Creating child theme's style.css file

Once you have created your folder, you need to add the one and only file that is required to create a valid child theme – style.css. To make it work, you’ll need to place some vital information inside of this file, so open up your favorite text editor and paste the following into a blank file:

/**
 * Theme Name:  My Child Theme
 * Theme URI:   http://mysite.com
 * Description: This is a custom child theme I have created.
 * Author:      My Name
 * Author URI:  http: //mysite.com/
 * Template:    parenttheme
 * Version:     0.1
 */

We’ll be concerning ourselves with 1 particular line from the style sheet header.

Template: parenttheme

This variable is required in order to tell your child theme which parent theme it is related to, and must be changed to match the folder name of your active theme.

All that is left to do now is activate your child theme. Do this by going to Appearance → Themes in your WordPress dashboard and activate the child theme.

#Customizing WordPress with child theme

There are 2 things you might want to customize your WordPress website:

The appearance of the website: this can be done via CSS
The output of some pages of the website: this can be done via PHP

#Overriding parent theme styles

Before overriding parent theme styles, there is one other thing of vital importance that you must do. If you were to upload this file in its current state and activate your child theme, WordPress would look to your child theme’s style.css file as the default style file, and see nothing. As a result, your theme would render with absolutely no CSS styling. Therefore, you need to call the parent theme’s CSS file within your child theme's style.css file, with the following line of code:

@import url(../parenttheme/style.css);

You need to change "parenttheme" to match the name of your parent theme. If the default stylesheet is not style.css (it almost certainly will be), you will also need to change that to suit as well.

Now when your child theme is activated, WordPress will know to import all of the CSS from your parent theme’s style file before executing any CSS stored in the child theme’s style.css file. Because the CSS contained in your new file will be the last thing WordPress executes, it will take precedence over any preceding CSS.

Alright, now let’s say you want to make some simple changes to your parent theme. What do you do? Just open the style.css file of the child theme and add new styles you want to change your parent theme.

If you know which elements you need to target then use the same selectors in your own child theme.

We could demo with some really easy changes to links and paragraphs. I’ve used code from the original Twenty Eleven theme for targeting the different elements. At times, it is necessary to use a more specific selector to override the older design.

body {
    padding: 0 1.4em;
}
#page {
    margin: 1.667em auto;
    max-width: 900px;
}
a {
    color: #5281df;
    text-decoration: none;
    font-family: Calibri, Tahoma, Arial, sans-serif;
}
a:focus,
a:active,
a:hover {
    text-decoration: underline;
}

In these changes, I’ve reduced the overall body size and also removed some padding from the edges. All of these selectors can be found listed in the original .css document. It’s notable that I’m also changing some properties for all anchor links which include a different font stack and color choice.

If you're a developer, you might want to use something like browser inspector to find out where the offending styles are in the parent theme CSS.

Then just copy and paste the code into your child theme CSS where you can edit it safely:

h2 {
    font-size: 2.5em; /* Increasing the font size */
    font-weight: bold; /* Making the titles bold */
    margin: 20px 0 10px;
}

After editing the file, just save it.

#Overriding parent theme template files

Editing with CSS is great and it's very easy to learn just enough to safely make changes to a WordPress theme but what happens when you really do need to make changes to a template file? When there’s something hardcoded in?

Easy. Copy the parent theme template file to your child theme directory and make the edits there. WordPress will look in the child theme directory first for template files. And if an alternate version of, say, footer.php or single.php exists, WordPress will use that template file instead.

This is simply awesome. WordPress will even accept category-XX.php (where XX is the ID of a particular category) in a child theme if you want to make changes to a specific category archive.

#Wrapping up

I hope the process of building WordPress child themes is clearer for you after reading this article. As you can now see, creating a child theme is extremely simple, and you have no excuse not to do so.

Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme so that you don’t get any nasty surprises when your theme’s next update rolls around. Enjoy!

How to Customize WordPress Theme With a Child Theme Documentation