Let’s start with a definition for a Child-Theme:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.
the WordPress Codex

Child-Themes are also:

… the recommended way of making modifications to a theme.
the WordPress Codex

Now that we know what a Child-Theme is why would we want to use one?

  • Using a Child-Theme will allow Theme edits to be preserved
  • The Parent-Theme can be updated without the concern of having to go back and make all of the edits over-written by the update process.
  • A Child-Theme may also allow you to edit a Theme with a restrictive license.

We’re up to getting a feel for the what is and why use a Child-Theme but where are they found?

  • Since a Child-Theme as noted above is a Theme, its files are found in the ../wp-content/themes/<child-theme-name>/ folder of your WordPress installation where <child-theme-name> is the obvious name of the Child-Theme or the Child-Theme “slug” which is generally related to the Child-Theme name as well.

Almost anyone can make a Child-Theme; and, in the following sections we will.

How to Make a Simple Child-Theme

We’ll start with a “simple” example based on the current WordPress default Theme, Twenty Ten.

  1. Create a new folder in the ../wp-content/themes/<child-theme-name>. For example ../wp-content/themes/twentyten-simple/
  2. Copy the style.css file from Twenty Ten into the new folder
  3. Edit the style.css file in the new folder (see the Application links at the end of the post for various editors that can be used), consider the bolditems as required.
    1. Start by changing the “Theme Name” so you can tell it apart from the Parent-Theme
    2. (Optional) Add / update “WordPress Required Version: <version number>”
    3. (Optional) Add / update “Test Up To: <version number>”
    4. Edit Theme Description to note it is a Child-Theme
    5. Change Author Name (Give yourself credit!)
    6. Change the Version number to the Child-Theme’s version
    7. Add “Template: <parent-theme-slug>” (i.e.: Template: twentyten)
    8. (Optional) Add “Template Version: <version of Parent-Theme>”
  4. Delete everything after the “header section” in the file. This is generally everything after the first instance of the following character sequence ‘*/’
  5. Add “@import url(“../<parent-theme-slug>/style.css”);” (i.e.: Add “@import url(“../twentyten/style.css”);”)

That’s it, we’re done! Let’s see our new style.css file in its entirety:

Theme Name: Simple
WordPress Required Version: 3.1
Tested Up To: 3.1
Theme URI: http://edwardcaissie.com/
Description: Child-Theme of Twenty Ten - The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: Edward Caissie
Version: 0.1
Template: twentyten
Template Version: 1.2
License: GNU General Public License
License URI: license.txt
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu

@import url("../twentyten/style.css");

How to Make a More Than Simple Child-Theme

We started with the Simple Child-Theme and now we will build on it to make a “moderate” Child-Theme. Once the basics are in place you can easily copy and paste the Simple Child-Theme folder and start working from there; and, that’s what we will be doing now. We will be making a few easy changes to the footer of the Theme and adding a simple function in the following example.

  1. Start by following the Simple Child-Theme example.
    1. Create a new folder: ../wp-content/themes/twentyten-moderate/
    2. Change the Theme Name to “Moderate”
  2. Create an empty ‘functions.php’ file in the new folder. A good text-editor should be able to do this, or this can be done via a FTP client.
  3. Add the new code to the functions.php file. We’ll use the bns_theme_version() function for this example (see the functions.php code below).
    <!--?php<br /-->// Start Theme Version
    function bns_theme_version () {
      $theme_version = ''; /* Clear variable */
      /* Get details of the theme / child theme */
      $blog_css_url = get_stylesheet_directory() . '/style.css';
      $my_theme_data = get_theme_data( $blog_css_url );
      $parent_blog_css_url = get_template_directory() . '/style.css';
      $parent_theme_data = get_theme_data( $parent_blog_css_url );
      /* Create and append to string to be displayed */
      $theme_version .= '
    ' . $my_theme_data['Name'] . ' v' . $my_theme_data['Version'];
      if ( $blog_css_url != $parent_blog_css_url ) {
        $theme_version .= __( ' a child of the ' ) . $parent_theme_data['Name'] . ' v' . $parent_theme_data['Version'];
      $theme_version .= __( ' theme from ' ) . '<a title="EdwardCaissie.com" href="http://edwardcaissie.com/">Edward Caissie</a>.';
      /* Display string */
      echo '
    <div class="bns-theme-version">' . $theme_version . '</div>
    // End Theme Version
  4. Copy the footer.php file from the Twenty Ten Theme folder into the new folder.
  5. Add the bns_theme_version() function to the footer.php file (see snippet from footer.php). Also, we will add a bit of CSS to adjust the function’s layout.
    <!-- #site-generator -->
        <?php bns_theme_version(); ?>
    <!-- #colophon -->
  6. To finish we will move the Post’s Title and Meta information from the left side to the right side (see snippet from style.css).
    @import url("../twentyten/style.css");
    #content .entry-title, .entry-meta {text-align: right;}
    .bns-theme-version {text-align: center;}

How to Make a Complex Child-Theme

For the most part this next example is basically a Mallory-Everest exercise so I will list out the steps, a few snippets, and leave you with a screen capture of the finished product. The actual code and stylesheet will be included with the downloadable resource file at the end of this post.

Just like we build the Moderate Child-Theme from the Simple Child-Theme, the Complex Child-Theme will be built from the Moderate Child-Theme.

  1. Start by creating a new folder for the Complex Child-Theme (i.e.: ../wp-content/themes/twentyten-complex/)
  2. Copy all of the files from the ../wp-content/themes/twentyten-moderate/ folder into the new folder.
  3. Make the standard changes to the style.css header section as noted in the Simple Child-Theme example.
  4. Now we’re ready to continue …

This example of a “complex” Child-Theme simply involves more template files and also adds additional functionality to what the default Twenty Ten Theme offers.

  1. We will change the “LAYOUT” to swap the columns of the Theme (snippet from style.css)
    #content .entry-title, .entry-meta {text-align: right;}
    .bns-theme-version {text-align: center;}
    /* LAYOUT: Two-column fixed layout with one sidebar left of content */
    #container { float: right; margin: 0 0 0 -240px; }
    #content { margin: 0 20px 0 280px; }
    #primary, #secondary { float: left; }
    #secondary { clear: left; }
    /* End (minimum) LAYOUT changes  */
  2. We will “copy&paste” the twentyten_setup() function into the existing functions.php file (from the Moderate Child-Theme).
    1. This will allow us to add more ‘post-formats’ (snippet from functions.php)
      function twentyten_setup() {
      	// This theme styles the visual editor with editor-style.css to match the theme style.
      	// Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories.
      	add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'status', 'quote' ) );
    2. We will also be adding a “Home” link to all menus.
  3. We will change the “home” link in the footer to use a modified version of the bns_dynamic_copyright() function
  4. We will move the “Primary” menu to the top of the header; and, then we will add a “Secondary” menu to be used where the Primary menu was located.

This may be only a few items, but it involves more files and has a dramatic effect on the look and feel of the Theme itself … so let’s look at the finished product!

We have looked at what Child-Themes are; why we would want to use them; where the files go for them to work; who can make a Child-Theme; and, even how to make our our Child-Themes; but, we have not touched on the when …

When is NOW! Child-Themes are now being accepted into the WordPress Extend Themes repository. Have a look at this Trac report: http://themes.trac.wordpress.org/report/6

See the first official Child-Theme in the repository here: http://wordpress.org/extend/themes/mazeld.

Note the big purple button on the Theme’s page that links to the Parent-Theme. Of course this one is linking to Twenty Ten but not all Child-Themes use Twenty Ten as their Parent-Theme. Look at these two Themes for example:

Please feel free to visit the following links to additional information and resources. Also enjoy the download complete with all files for the above themes as well as the MindMap I created as I planned this post and the presentation I gave at the WordPress Toronto Group Meetup on April 9, 2011.

To see the Document Links click here.To hide the Document Links click here.

To see the Application Links click here.To hide the Application Links click here.

To see the Other Resources click here.To hide the Other Resources click here.

  • OttoPress: http://ottopress.com/2010/wordpress-protip-child-themes/
  • WPEngineer: http://wpengineer.com/2045/understand-wordpress-child-theme/
  • WPMU: http://wpmu.org/12-free-twentyten-child-themes-for-wordpress/
  • Graph Paper Press: http://graphpaperpress.com/2011/02/25/how-to-create-a-child-theme-for-the-base-theme-for-wordpress/

The Download: [download id=”2″]