Apr
23

By

Customizing with WordPress Child Themes

Category: Development, Featured Tags:

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…

8 Responses to Customizing with WordPress Child Themes

  1. Jason says:
    May 2, 2013 at 7:49 am

    Hi Scott,

    Very nice post for creating a child theme. This will definitely help anyone new to creating a child theme for their own theme(s). One question I know I have regards the Options Framework plugin. If you are using a theme that calls for this plugin, what are the minimum, necessary files needed to create a child version? I have already experimented some and found there are multiple files involved with the framework. However, I’m not sure which are required. If you have any suggestions or can point me to where I might find an answer, I would greatly appreciate it! Thanks for any help you can provide!
    Thanks,
    Jason G.

  2. Jason says:
    May 3, 2013 at 6:22 am

    Hi Scott,
    With the Pytheas theme I have been testing, it appears that the Options Framework plugin only requires the options.php file along with the style.css and index.php files of the parent theme. I created a child theme with only those files and everything appears to be working! I am able to access the theme options in the Dashboard as well. Just thought I would pass along the information. Hopefully, this will help anyone else using the Options Framework plugin as well.
    Thanks,
    Jason G.

  3. Rob says:
    June 15, 2013 at 5:18 am

    Hey guys,

    One of the best tutorials i have come across, and just started to work through it.

    I have used your Designfolio theme with child (free version) and have an issue with changing header & footer background color through the child theme style.css. It appears to be getting the color scheme from wp-content/themes/designfolio/includes/css/color_schemes/default.css?ver=3.5.1… am i doing something wrong ?

    Thanks again.

  4. website maken voor beginners says:
    August 10, 2013 at 3:05 pm

    Some suggested I use wordpress to create a website for my auto parts business.
    I have two questions.
    1.Why does wordpress seem to focus on blogging? I’m not interested in blogging.
    2.Once I created my website with wordpress how do I put it on the internet?

  5. sol says:
    November 27, 2013 at 10:59 am

    Hy, thank you for share this content. I need some help. I finished one site in a child theme, but now I don’t know how I can activate, because I work in a subfolder, behind the old site. Can you help me? than you!!

  6. web directory 3200 says:
    December 29, 2013 at 10:25 pm

    I have an existing theme/site activated/running live in my wordpress.
    I have installed genesis and a new theme (child theme) from studiopress.
    when I preview my child theme, the layout is completely different from
    the design that studiopress had. The layout of the child theme is similar
    to my current existing theme and it has the content too as well.

    I am trying to configure the child theme and design the whole site before
    I activate/publish the child theme live, but I don’t want to disactivate my existing theme
    until the design of the child theme is finished.

    Anyone know how to configure the child theme w.o activating it and corrupting
    the existing theme?

    Thank you!

    -Alex