Introduction of Child Themes

This section is written for advanced web developers, who want to customize their theme in detail and change the original theme files. Please note that we cannot provide any help with modifications you have made with a child theme.

What is a child theme?

The definition of Child Theme from the WordPress Codex Page simply is: 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.

What does that mean exactly? A child theme is used to customize the parent theme without modifying its files. The child theme can use all of the functions, CSS and design features from the parent theme and contains only the details it wants to change.

For example you can change the CSS, rewrite pluggable functions, modify the parent theme with hooks and filters, add a custom post type or build your complete own set of functions. A child theme needs only the style.css to work properly, but can have as much theme files as you want to overwrite.

The child theme resides in its own directory as well as every other theme, too.

  • site_root (www)
    • wp-content
      • themes(directory where all themes are)
        • zeeStyle (directory of our example parent theme, zeeStyle)
        • zeeStyleChild (directory of our child theme; can be named anything)

Why you should use a child theme

Although our themes contain a lot of options to change colors, fonts and layout and so on, most of you like to adjust the theme to their personal needs. You can do this by modifying the theme files directly making any CSS or HTML/PHP changes.

However, if you do that and update your theme sometime you will lose all of your made changes. Therefore you should use a child theme to make changes and 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.

How to create a child theme

As mentioned above, the child theme resides in an own directory. And the style.css is the one and only required file in the child-theme directory. 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 of a working child theme of the Smartline theme.

/*======================================
Theme Name: Smartline Child
Theme URI: http://themezee.com/themes/smartline
Description: Child Theme of Smartline
Version: 1.0
Author: ThemeZee
Author URI: http://themezee.com
Template: Smartline
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

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

Please note that a child theme’s stylesheet replaces the stylesheet of the parent completely. (The parent’s stylesheet is not loaded at all by WordPress.) So, if you want to have the original styling and layout of the parent theme, you have to import the style.css of the parent theme. (done by the last line on the example above)

If you want to learn more about the child-themes and their style.css, please visit the WordPress Codex about Child Theme.