How to Create a Child Theme in WordPress

8:51 am Comments Off on How to Create a Child Theme in WordPress

What if, after you update your WordPress theme version, you suddenly find out that your site design doesn’t look the same?

This is not an imaginary scenario, it’s a common occurrence that happens to many WordPress developers and designers, and it can be quite frustrating.

This happens to anyone that tinkers with their original theme, and doesn’t take advantage of the simple method of using child themes. If you do use child themes, you can make any changes to the theme code, without having updates run them over.

In this step by step tutorial I’d like to explain exactly how to install and use child themes, and answer some common questions about child themes.

How Do Child Themes Work?

WordPress’s structure allows you to install a child theme, a theme that inherits the functionality and styling of the original theme you were using. Child themes allow the user to modify the original theme, without having these modifications get removed once the theme gets an update.

By using child themes you:

  • Don’t risk having the changes you have made erased when you update the theme.
  • Don’t risk your site having bugs and errors once you update your theme.
  • Can turn off the child theme and quickly get back to the original parent theme.
  • Get a clear separation between the original theme code and the code you create.

Pay attention Pojo users! if you only want to change the CSS of the theme, then you don’t have to install the child theme, and can use the live CSS feature within the customizer admin. This will allow you to enter your CSS code without touching any CSS files.

Child themes are processed by WordPress like this: Once the child theme is activated, WordPress will search for the file that it needs to create the web page, “header.php” for example, in the child theme. If the file is not located in the child theme, then WordPress will take the file from the parent theme.

How to Install and Activate the Child Theme?

In most themes, you’ll need to create the child theme files yourself and upload them to the themes directory under the name “theme-child” (for example, “twenty-fifteen-child”). In Pojo themes, we have made it easier for you, because all of our themes come with a child theme built-in in the installation package. This means you don’t need to create any file or use a plugin like “1 click child theme”. All you have to do is follow these easy steps:

  1. Login to your account on pojo.me.
  2. Click the “Downloads” link.
  3. Click the child theme link and download the child theme.
  4. Upload it through the site admin > Appearance > Themes > Add New
  5. Click on Upload New > Choose File, choose the zip file and click on ‘install now’.
  6. Go to the themes area on your site’s admin.
  7. You should see a theme called “XXXX child”, hover over it and click “Activate”.

That’s it! Go back to your website and make sure everything works fine. Now you can start making changes to the parent theme through customizing the child theme.

Remember – if you want to make changes to a certain file that’s not already in the child theme, you copy it from the original theme to the child theme, and make the changes only on the child theme. If the file is under a directory or several directories, then you have to create the same directory structure in the child theme.

How to Edit the Child Theme CSS

As I mentioned earlier, you can edit the theme’s CSS using Pojo’s live CSS feature. If you’d like to edit the CSS through the child theme, you need to open the style.css file inside the child theme directory.

There, you need to place the new CSS you want to implement. If you find your child theme styles are not working, you might want to check that the style you want to change do come from the style.css and not from another CSS file.

Editing functions.php

‘functions.php’ is the file that includes the theme’s main functions. If you add custom functions to the functions.php file on your child theme, it will be loaded before and in addition to the parent theme’s functions.

Editing Other PHP Files in Child Themes

In contrast to the prior description of the functions.php function in child themes, if you add other PHP files to your child theme, they will replace the parent PHP files, and not be added to them.

Let’s say you want to edit the “single.php”. You need to place a copy of the single.php file from your parent theme to the child theme, and then you can edit it.

Using the Child Theme to Edit Plugin CSS

Apart from editing the theme’s design, I’d recommend customizing your plugins’ CSS through the child themes. This way, when the plugin updates, the customization you have made for it won’t get erased.

If your theme does not have a pre-built child theme, you can create one in just a few steps:
1. Create the child theme directory.
2. Add two files: style.css and functions.php.
3. Add the following code to the style.css file (with your own theme’s details):

/*
Theme Name: {Theme Name} Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: {Theme Name} Child Theme
Author: John Doe
Author URI: http://example.com
Template: {Theme Name}
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: {theme-name}-child
*/

4. Go into the Themes page and activate the child theme.

WordPress knows how to automatically take the new style.css file. If, however, you would like to use a different CSS file, you can add the following function to the functions.php:

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '{your-path}/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

To Sum Up

Child themes are very helpful for web designers. It’s strange to think how we managed theme development before they were released in WordPress 2.7.

I hope this post will help you better understand how and why to use child themes. This feature allows you not only to enhance the site design, but also add features and functionality to the backend of WordPress.

Have you run into a specific problem with using child themes? We’d love to hear about it in the comments.