Child Themes in WordPress

This post will explain how to add a child theme to a WordPress site.

Child themes are the recommended way of making modifications to a theme since they preserve your changes when the theme gets updated. If you have some understanding of HTML, CSS and PHP, creating child themes will be easy.

Directory Structure

WordPress directory structure:

• public_html
  
  
  
  • wp-content
    
    
    
    • themes
      
      
      
      • theme-name
      
      
      • theme-name-child
        
        
        
        • style.css

WordPress theme contains:

1. style.css (required)


2. functions.php (optional)


3. Template files (optional)


4. Other files (optional)

The Required style.css File

Style.css provides the information header by which WordPress recognizes the child theme, and it replaces the style.css of the parent.

The information header indicates that this is a child theme in the "Template" declaration.

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

/*
Theme Name: Child Theme Name
Theme URI: http: //example.com/
Description: Child theme for the Theme Name
Author: Your name here
Author URI: http: //example.com/about/
Template: themename
Version: 0.1.0
*/

A quick explanation of each line:

• Theme Name. (required)


• Theme URI. (optional)


• Description. (optional)


• Author URI. (optional)


• Author. (optional)


• Template. (required)


• Version. (optional)

A child theme’s stylesheet replaces the stylesheet of the parent. The parent’s stylesheet is not loaded at all by WordPress. Import the parent's style sheet to ovoid having to repeat all the styles you want to keep in the original parent's style sheet. Since the child theme's stylesheet is loaded after the parent's stylesheet, it is easy to override the parent's styles by simply adding the style to child theme stylesheet.

Create a Child Theme (Example)

1. Make a new directory in wp-content/themes, and name it themename-child. (themename = the parent theme name)


2. Create a style.css file with the proper header and save it into the themename-child directory.
   /*
   Theme Name: Theme Name Child
   Description: Child of Theme Name
   Author: Your name here
   Template: themename
   */@import url('../themename/style.css');
   
   #site-title a {
   color: #009900;
   }


3. The new child theme should show up in the "Plugins" section of the Dashboard. Activate the new child theme.

Using functions.php

The functions.php of a child theme is loaded before the parent’s functions.php which allows you to modify the functionality of a parent theme. Since the child theme function is loaded first, the parent's function should be pluggable.

Example:

if (!function_exists('theme_special_nav'))
{
function theme_special_nav()
{
// Do something.
}
}

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

If the parent's function is not pluggable, it still can be modified by the child theme with another method.

Example:

Add this to functions.php in parent.

//create the parent_echo_test function
function parent_echo_test() {
echo "******PARENT ECHO TEST*****";
}
Add this to functions.php in child.
// Removes parent_echo_test
function remove_echo_test() {
remove_action('init','parent_echo_test');
}

// Call 'remove_echo_test' during WP initialization
add_action('init','remove_echo_test');

//create the child_echo_test function
function child_echo_test() {
echo "******CHILD ECHO TEST*****";
}

// Add our child function
add_action('init','child_echo_test');

Template Files

Child theme template files can override any parental template file by using a file with the same name.

Here are a few example cases for using template files in a child theme:

• add a template that is not offered by the parent theme


• add a more specific template (see Template Hierarchy)


• replace a template of the parent

Other Files

A child theme can use any type of file a full-fledged themes use such as images, stylesheets and Javascript files.