Home > Help Center > Applications > WordPress > WordPress Child Theme

WordPress Child Theme

What is Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme.

In this way, customizations are kept separate from the parent theme's files. Using a child theme lets you upgrade the parent theme without affecting the customizations you've made to your site.

Advantages from Using a Child Theme

Child theme will:

  • make your modifications portable and replicable;
  • keep customizations separate from parent theme functions;
  • allow parent theme to be updated without destroying your modifications;
  • speed up development time;

How to Create a Child Theme?

Create a child theme directory First, create a new folder in your themes directory, located at wp-content/themes.

The best naming practice is to repeat parent theme name and append -child to the end. In our example we'll build a child theme of twentysixteen parent theme so we created a new directory twentysixteen-child:

wordpress child theme

Create a stylesheet: style.css

The next step is to create your child theme's stylesheet style.css. The stylesheet must begin with the following stylesheet header:

/*
 Theme Name:   Twenty Sixteen Child Theme
 Theme URI:    http://example.com/twentysixteen-child/
 Description:  Twenty Sixteen Child Theme - example child theme for HostPulse.
 Author:       WP Webmaster
 Author URI:   http://example.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentysixteen-child
*/

The following information is required:

Theme Name – needs to be unique to your theme Template – the name of the parent theme directory.

The parent theme in our example is the Twenty Sixteen theme, so the Template will be twentysixteen. You may be working with a different theme, so adjust accordingly.

Add remaining information as applicable. The only required child theme files (to start working correctly) are style.css and functions.php:

wordpress child theme

Enqueue stylesheet

The recommended way of enqueuing the parent theme stylesheet currently is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme's functions.php.

You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets.

The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

<?php
add_action( 'wp_enqueue_scripts', 'parent_enqueue_styles' );
function parent_enqueue_styles() {
wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );
}
?>

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well.

Setting parent-style as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme.

The complete (recommended) example becomes:

<?php
function custom_enqueue_styles() {
    $parent_style = 'twentysixteen-style'; // This is 'twentysixteen-style' for the Twenty Sixteen theme.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'custom-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles' );
?>

where parent-style is the same $handle used in the parent theme when it registers it's stylesheet.

Activate child theme

Your child theme is now ready for activation. Log in to your site's Administration Screen, and go to Administration Screen > Appearance > Themes. You should see your child theme listed and ready for activation.

If your WordPress installation is multi-site enabled, then you may need to switch to your network Administration Screen to enable the theme (within the Network Admin Themes Screen tab).

You can then switch back to your site-specific WordPress Administration Screen to activate your child theme.

You can add an image (must be named screenshot.png) to your child theme to look more professional among other themes:

wordpress child theme

All theme details from style.css will be displayed when someone hover over the child theme area and click Theme Details button:

wordpress child theme

How to Use a Child Theme for Customizations?

First install a very useful plugin called Show Current Template By JOTAKI Taisuke:

wordpress child theme

When you are logged in and browse your site the plugin will display in the toolbar the template file of the corresponding page:

wordpress child theme

If you do not see the toolbar make sure the checkbox in Users > Your Profile is checked:

wordpress child theme

When you want to customize any page copy the template file from parent folder to child theme folder. We are going to add a paragraph text to our home page and our template file is index.php.

Paste this code just below first div tag and save the file:

<p class="childtheme-custom-style">This text is displayed only in the child theme</p>

In style.css paste the custom class properties and save the file:

.childtheme-custom-style {
    font-size: 24px;
  padding: 1em; 
  border: 1em solid #ddd;
}

Refresh the browser:

wordpress child theme

You can also use functions.php to modify your parent theme. We are going to add a favicon by using a php script in functions.php file. We'll create new folder images and we'll upload the file favicon.png within.

Paste the following code in functions.php (above the php closing tag ?>) file and save the file:

// Function Add Favicon
function add_favicon() {
      $favicon_url = get_stylesheet_directory_uri() . '/images/favicon.png';
    echo '<link rel="shortcut icon" href="' . $favicon_url . '" />';
}
add_action('wp_head', 'add_favicon');
add_action('login_head', 'add_favicon');
add_action('admin_head', 'add_favicon');

Refresh the browser:

wordpress child theme

This is how our child theme folder twentysixteen-child looks like containing all files and images folder (which contains favicon.png):

wordpress child theme

Conclusion

We hope that this article will awaken the interest of many readers toward the WordPress themes development as well as to the web development business in general.

#wordpress

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support