A Guide to Creating WordPress Child Theme

The most interesting feature of WordPress which I like is 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 without having to edit the original/parent theme template files. Since the child theme is stored separately, you don’t need to redo the changes next time you upgrade the theme. For this reason, child themes are the recommended way of making modifications to a theme.
Child themes let you start with the basics of an existing theme, so you’re not having to reinvent the wheel. You can pick a theme that has the functionality and basic layout you need, but then customize everything about it as you would designing a theme from scratch. So, choose a good WordPress original/parent theme is very important. I recommend that you choose a WordPress Theme Framework.
In this guide I want to introduce the basic concepts of building a WordPress child theme and why it’s such a good idea.

The child theme I’ve crafted

Here’s a brief look at this website, the child theme I’ve crafted based on NARGA Framework.

How Child Theme Works

WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. Really, they’re just like any other WordPress theme. They’re activated from the WordPress admin like any other theme. Basically once the child theme is activated, WordPress will look for the template files in the child theme folder first. If the file doesn’t exist in the child theme, it will fallback to the parent theme folder. Child theme always has a style.css file and they can contain functions.php, images folders, script folders…
You’ll need some very basic HTML and CSS knowledge, but the good news is that for a basic child theme, you don’t need to know any PHP!

Child Theme File Structure

The scheme below shows the location of a child theme along with its parent theme (Twenty Twelve) in a typical WordPress directory structure:

• site_root (public_html)
  • wp-content
    • themes
      • narga-core (directory of our example parent theme, NARGA FRAMEWORK)
      • narga-core-child (directory of our child theme; can be named anything)
        • style.css (required file in a child theme; must be named style.css)

As you see above, style.css is required. It provides the information header by which WordPress recognizes the child theme, and it replaces the style.css of the parent.
Here is an example information header of a child theme’s style.css:

/*
Theme Name:     NARGA Framework Child Theme
Theme URI:      http://example.com/
Description:    Child theme for the NARGA Framework theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       narga-core
Version:        0.1.0
*/
@import url("../narga-core/style.css");

Note that a child theme’s style sheet replaces the style sheet of the parent completely. So, we’ll need to use original/parent CSS to make it look less wrong. by going to import the styles from the Parent Theme like the .@import url("..."); that you see above.

Overriding Parent Theme Styles

Applying CSS rules to your theme is just as easy as editing the original. If you know which elements you need to target then use the same selectors in your own child theme. Let’s see the original theme style and the child theme which I’ve changed the style:

What’s the difference? I’ve changed background of body and content section.
The parent stylesheet says:

body {
    font-size: 100%;
    color: rgb(51, 51, 51);
    line-height: 1.5em;
    font-family: Georgia,"Times New Roman",Times,Serif;
    text-shadow: 0px -1px 1px rgba(255, 255, 255, 0.01);
    text-rendering: optimizelegibility;
}

In the stylesheet of the child theme, I put:

body {
    background: url('images/background.png') repeat scroll 0% 0% transparent !important;
}
.main-content-wrapper, .single-content-wrapper, .page-content-wrapper, .full-width-content-wrapper {
    border-radius: 6px 6px 6px 6px;
    border: 1px solid rgb(223, 223, 223);
    box-shadow: 0pt 0pt 5px rgba(0, 0, 0, 0.2);
    background:#FFF !important;
}

Do you see !important? This is necessary if you have cascading styles from a parent theme which are overriding your own custom rules. But not all of your CSS property need !important, you can define normal CSS property of Child theme if it’s not defined in parent style.css.

functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. This means you don’t need to copy over any of the PHP code to still have it active in your new theme. To make your own functions or just change the default function, you need some basic PHP programing.
In parent functions.php:

if (! function_exists('favicon_link')) {
    function favicon_link() {
    echo '	' . "n";
}
add_action('wp_head', 'favicon_link');
}

In our child theme functions.php:

    function favicon_link() {
    echo '	' . "n";
add_action('wp_head', 'favicon_link');

In that way, a child theme can replace a PHP function of the parent by simply declaring it again.

Changing Template files and the default layout

A child theme can override any parental template by simply using a file with the same name.
Here are a few example cases for using template files in a child theme:

• To add a template that is not offered by the parent theme (e.g., a template for a sitemap page, or for single-column pages, that will be available to select in the Page Edit screen).
• To add a more specific template than what the parent uses (e.g., a tag.php template to use for tag archives instead of the generic archive.php of the parent).
• To replace a template of the parent (e.g., make your own home.php to override the parent’s home.php).

References, Resources

• Theme Development – WordPress Wiki about Theme Development
• Child Themes – Official Guide to create WordPress child theme
• How to Modify WordPress Themes the Smart Way – four-part series on child themes
• Creating your first WordPress child theme – guide to creating a Twenty Ten Child Theme
• How to: Create a Child Theme Based on Twenty Eleven
• Child Themes Basics and Creating Child Themes in WordPress

Conclusion

The theme frameworks built on top of WordPress can help one develop a stable, good quality theme in quick time and will also let the uniqueness of your site remain intact. Creating a child theme is incredibly simple when compared to designing and coding a theme from scratch. I hope the very basic process of building WordPress child themes is clearer for you after reading this article. But it gives you the information you need to start designing your own themes. Start with basic re-styling to get your feet wet, and then start exploring the things you can do with PHP in your functions.php file. Also if you’ve built any great child themes in the past we would love to check them out. Let us know your thoughts and suggestions in the post comments area.