brief introduction to child themes

Brief Introduction to Child Themes

(This tutorial borrows heavily from the WordPress.org Child Themes Codex entry. I have modified it to make it more specific to my courses.)

A WordPress Child Theme is a theme that inherits the functionality of another theme, called the Parent Theme. The child theme allows you to modify, or add to, the functionality of that parent theme without changing the original source files of the parent theme. This tutorial shows how to create a basic child theme and explains what you can do with it.

Making a child theme is very simple. Create a new folder on your computer, put a properly formatted style.css file in it, upload it to the themes section of your web server, activate it in the Dashboard, and you have a working and installed child theme! Once installed and activated any changes you make to the styling and layout of the child theme files will be reflected in the way the parent theme looks when viewed online.

For example, when we were editing the WPFolio theme we were working with the original files; this made it the parent theme. If we had used a child theme we would work with different files but any changes we made to them would still be visible just as if we had made the changes to the WPFolio theme files.

By modifying themes this way, when the parent theme is updated, your modifications are preserved. For this reason, child themes are the recommended way of making modifications to a theme.

Directory structure

A child theme resides in its own directory in wp-content/themes. The scheme below shows the location of a child theme along with its parent theme (WPFolio) in a typical WordPress directory structure:

  • public_html
    • wp-content
      • themes (directory where all themes are)
        • wpfolio (directory of our example parent theme, Twenty Ten)
        • wpfolio-child (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)

This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains:

  1. style.css (required)
  2. functions.php (optional, but a very good idea)
  3. Template files (optional)
  4. Other files (optional)

Note: the Parent Theme must be installed in order for Child Themes to work. So, before you begin creating a child theme install and activate the parent theme.

The required style.css file

Style.css is the one and only required file in a child theme. It provides the information header by which WordPress recognizes the child theme, and it replaces the style.css of the parent.

As with any WordPress theme, the information header must be at the top of the file, the only difference being that in a child theme the Template: line is required, so that WordPress knows which theme is the parent of the child theme.

Here is an example information header of a child theme’s style.css:

Child Theme style.css

A quick explanation of each line:

  • Theme Name. (required) Child theme name.
  • Theme URI. (optional) Child theme webpage.
  • Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!
  • Author URI. (optional) Author webpage.
  • Author. (optional) Author name.
  • Template. (required) directory name of parent theme, case-sensitive. Attention: You have to switch to a different theme and back to the child theme when you modify this line.
  • @import. (required) This line tells the Child Theme to import the styles from the parent theme. If you don’t have this line of code, your web site will not have the formatting of the parent theme.

The part after the closing /*Begin adding new styles below*/ of the information header works as a regular stylesheet file. It is where you put the styling rules you want WordPress to apply.

Note that a child theme’s stylesheet replaces the stylesheet of the parent.

Example of a basic Child Theme

Our parent theme for this example is the default WordPress theme, Twenty Ten. We like most everything about it, except the color of the site’s title, which we want to change from grey to green. Using a child theme, all it takes is three simple steps:

  1. Make a new folder on your computer and call it name it twenty-ten-child (or anything you like).
  2. Save the code below in a file named style.css into the twenty-ten-child folder, and using FTP upload the whole folder into the themes directory.
  3. Go to Dashboard › Themes and activate you new theme, the Twenty Ten Child.
Twenty-ten child example

Here is what the above code does, step by step:

  1. /* opens the child theme’s information header.
  2. Theme Name: declares the child theme’s name.
  3. Description: describes what the theme is. (Optional; can be omitted.)
  4. Author: declares the author’s name. (Optional; can be omitted.)
  5. Template: declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses.
  6. */ closes the child’s information header.
  7. The @import rule brings in the parent’s stylesheet. Note that the Template: name is replicated exactly in the @import URL.
  8. The #site-title a rule defines a color (green) for the site’s name, overriding the corresponding rule of the parent.

Note on the @import rule
There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.

Adding and Manipulating Template Files

While one benefit of using a child theme is being able to add new styles without editing the original style sheet, it is certainly not the only benefit. You can also make changes to the .php template files, such as index.php, header.php, page.php, and so on. The process for doing this is quite simple:

  1. Locate the Parent Theme template file that you want to edit. For example, perhaps you want to make a change to index.php.
  2. Open index.php in your favorite HTML or text editor and make the change(s).
  3. Go to File –> Save As. . . and save the file as index.php in the Child Theme folder, such as wpfolio-child. You have now created a child them file.
  4. Using FTP, upload the new version of index.php to the wpfolio-child
     folder in the themes directory
  5. If you need to make changes to index.php at a later date, open the version in the wpfolio-child folder, make your changes, and upload the file using FTP to the wpfolio-child directory.

This process can be repeated for any of the template .php files that come with your theme. (You can also add new .php files, images files, and so on, just as you would with any new theme.) Once you make changes to several template .php files, the directory on the server will look something like this:

child theme directory

The one file you don’t want to change right now is functions.php (this file is for more advanced PHP programmers). However, it is a good idea up upload the original functions.php file to the child them directory using FTP. This will ensure that all PHP functions associated with your parent theme continue to work.

Code and Instructions to Get You Started

1. Install your chosen Parent Theme into the wp-content/themes directory on the server using FTP. Activate the theme using the Dashboard. (Note: if you are using a theme tester plugin, you may need to deactivate it temporarily.)

2. Starting with /* and ending with below */ copy and paste the following code into your favorite HTML or text editor and fill in the appropriate spots with the information relating to your chosen theme name:

/*
Theme Name: Child Theme Name
Description: Child theme for the Twenty Ten theme
Author: Your name here
Template: directory name for parent theme exactly as written
*/

@import url("../directory name for parent theme/style.css");

/*Begin adding new styles below*/

3. After making the proper changes:

  1. Make a new folder on your computer and call it name it your-theme-name-child (or anything you like).
  2. Save the code below in a file named style.css into the your-theme-name-child folder, and using FTP upload the whole folder into the wp-content/themes directory.
  3. Go to Dashboard › Themes and activate you new theme, the Your Theme Name Child.

You now have a working child theme! Congrats!

Additional and More Advanced Readings

To be added at a later date so you don’t get ahead of yourselves.

Leave a Reply

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