By

Customizing with WordPress Child Themes

If you want to customize your WordPress theme beyond small tweaks, you have to use a child theme.

A child theme is just a folder to keep your changes so you don’t make changes to the original (or parent) theme. The main reason to do this is so that you can update the parent theme without losing any of your customizations.

This subject is covered in a lot of different places, including our theme customization guide, but I wanted to go into more detail here.

Let’s get child themeing!

Creating Your Child Theme

To create your child theme, you just need a folder with a style.css file in it.

  1. First, create a new folder on your desktop.
  2. Next, create a new file and name it style.css
  3. Put the code below at the top of your style.css file:
1
2
3
4
5
6
7
8
9
/*
Theme Name:     My Child Theme
Theme URI:      http: //www.presscoders.com/facade
Description:    Child theme for the Facade theme
Author:         Your name here
Author URI:     http: //www.presscoders.com/
Template:       facade
Version:        0.1.0
*/

I’ve used the Facade theme here as an example, but you can change that to your theme name.

The only required lines above are the theme name and Template. The template line indicates what the parent theme is, so if we were using a theme called TwentyTen, we would put Template: twentyten. (It’s all lowercase with no spaces because it’s actually the name of the theme folder)

The next thing you have to do is import the parent theme stylesheet. Add this line underneath the theme info:

1
@import url("../facade/style.css");

That imports all of the parent theme styles. You are then going to add more rules below it, customizing the theme.

Make sure no CSS rules are above this import rule. Here it is together with a first sample css rule:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
Theme Name:     My Child Theme
Theme URI:      http: //www.presscoders.com/facade
Description:    Child theme for the Facade theme
Author:         Your name here
Author URI:     http: //www.presscoders.com/
Template:       facade
Version:        0.1.0
*/
 
@import url("../facade/style.css");
 
body {
    font: 15px Arial, sans-serif;
}

Congratulations, you just made a WordPress child theme!


Tip: If you are adding CSS rules in your child theme stylesheet and they are not working, try adding specificity or an !important rule like this:

To overwrite .content { font-weight: bold; }, use body .content { font-weight: normal; } or .content { font-weight: normal !important; }.

Other Child Theme Files

You should be able to make most aesthetic changes in your child theme style.css file, but you can put any theme file in your child theme.

Functions.php

The functions.php file is a really useful one. To add this, create a new file in your child theme folder, and name it functions.php. This is where you’ll add new javascript, add hooks and filters, and more. Check out Chapter 7 in our customization guide for more details about functions.php.

Template Files

copy-template-file

You can also add template files, such as header.php if you need to hard code changes. To use a template file, simply copy/paste the file from the parent theme to the child theme.

For example, if you want to remove something that is hard coded into header.php, copy/paste it into your child theme (don’t delete from parent theme), and make your changes in the child theme header.php file. WordPress automatically checks your child theme for files first, so your child theme header.php will be the one that is used.

For more information on template file customization, please see Chapter 8 of our customization guide.

Uploading your Child Theme

ftp

After you’ve made your initial changes, you’ll need to upload and activate your child theme.

Depending on your workflow, there are a few different ways to get your child theme up on your site. You can FTP the folder to ../wp-content/themes/, or you can zip the file and use the theme uploader in the WP admin (Appearance => Themes => Add New => Upload).

I usually make any changes on a local install using MAMP, then I upload the child theme file in Coda. If necessary, I’ll make a few final tweaks remotely, and make sure I have a backup of the child theme on my computer when I’m done.

What questions do you have about child themes? Leave it in the comments, and we’ll answer…