The Hitchhiker’s Guide to Child Theme

Our themes look great and work great out of the box, but we understand that sometimes you might need to customize your theme beyond what is possible via the Theme Options. These guidelines will teach you the basics of how to go about customizing your theme.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, contact our Theme Experts.

Backup is Important

Before customizing a theme, you should always ensure that you have a backup of your site in case anything goes wrong.

How Child Themes Work And Why need to use it?

Child themes are separate themes that rely on a parent theme for most of their functionality. If you are using a child theme, WordPress will check your child theme first to see if a specific functionality exists. If it doesn’t, it will use the parent theme. This is great because it allows you to modify only what you need.

Child themes should always be used if you plan on modifying even a single character in your theme. There are two very good reasons: updates and organization.

Updates

If you modify a theme without using a child theme you have two choices: You can opt to not update your theme in future, or you can update and lose any changes you’ve made to your theme.

The later option would technically work, but it is not recommended. Even if your changes are easy to copy and paste, why spend two minutes on an error-prone task on each update?

Not updating your theme should be out of the question. Almost all “why your website was hacked” lists contain outdated software as a top cause for security issues. You should always keep WordPress, your themes and plugins up to date, no exceptions.

Organization

When you add code to an existing theme you are adding to a codebase, which may be thousands and thousands of lines. Developers working on your site (and, indeed, you yourself) will have a hard time tracking down your changes. At least one direct result of this will be an increased development bill.

Since child themes fall back on parent themes unless otherwise specified, your child theme is essentially a changeset to an existing theme. This can result in extensive changes even though the child theme only has a couple of files and maybe 100 lines of code.

Creating A Child Theme

Creating a child theme is extremely simple, so much so you can copy and paste my example below.

To create a child theme for your theme, you will need to do the following steps:

Note: For this example, We’ll be creating a child theme for the Skyhead Theme.

Create a theme directory inside wp-content/themes/skyhead-child(for example purpose. You can name it whatever you want)

We need to create a new stylesheet for our child theme. Create a new file called style.css and put this code in it:

/*
Theme Name: skyhead-child
Version: 1.0
Description: Child theme for Themeinwp Theme.
Author: Themeinwp
Author URI: http://themeinwp.com
Template: skyhead (actual parent theme name)
*/
/* --------------- Theme customization starts here ----------------- */

Note: The most important parts of this file is the “Template:”. You must ensure that the “Template:” parameter correctly identifies the name of your parent theme. Everything must be case sensitive!

Once these steps are completed you can activate your child theme and your website will look exactly the same as before, but it will be using your child theme.

Editing template files

But wait, there’s more! You can do the same with the template files (*.php) in the theme folder. For example if we wanted to modify some code in the header, we need to copy header.php from our parent theme folder wp-content/themes/skyhead/header.php to our child theme folder wp-content/themes/skyhead-child/header.php. Once we have copied it to our child theme, we edit header.php and customize any code we want. The header.php in the child theme will be used instead of the parent theme’s header.php. Neat!

Template Directory vs Stylesheet Directory

WordPress has a few things that it handles differently in child themes. If you have a template file in your child theme, you have to modify how WordPress includes files.
get_template_directory();

will reference the parent theme. To make it use the file in the child theme, you need to change use
get_stylesheet_directory();

Pluggable Functions

NOTE: The functions.php in your child theme should – be empty – and not include anything from the parent themes functions.php. The functions.php in your child theme is loaded before the parent theme’s functions.php.
for e.g
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

All our parent theme function is pluggable, which means you can copy it to the child theme functions.php and modify the function to your liking.

Additional Child Theme Resources

– If you are having difficulty wrapping your head around the creation of the child theme folder, then this plugin will create one for you with the click of a button!

2. The WordPress Codex – There is all kinds of great documentation in the WordPress codex. If there is anything you need clarification on in this post, then this should be your first stop.

3. Child Theme Pros and Cons – For more information about the pros and cons of using Child Themes, WP Beginner has a great writeup.

4 thoughts on “The Hitchhiker’s Guide to Child Theme

  1. Hi,

    when i create a child theme of your theme and then i activate it, the slider dissapears.

    I tried with the two different ways of creating a child theme. Using @import on CSS and using wp_enqueue_style

    My develop site to check it (http://iurisdoc.com/develop/rbii/).

    It happens on local an online server.

    WP 4.7.2
    Skyhead 1.0.7

  2. Hello @Jaume

    Sorry that we haven’t noticed this, Can you please contact us on email so that we can have a closer look regarding your problem
    our email is info[at]themeinwp.com

    Thanks 🙂

  3. Good day!

    Im using your free Corporate Hub Theme.
    It’s a great theme with plain but attractive designs.
    There is one problem though, the header at my pages suddenly stop moving, I really dont know why. I know it’s too much but can you help me fix it?

    I really appreciate your help.

    Thank You and God Bless!

    -ermz

    1. First of all thanks for your appreciation for the theme.

      We need your website url to look into the issue. so, if you need any sort of help please feel free to post them on our support forum (https://www.themeinwp.com/support-forum/forum/corporate-hub/) or email us from our support email form from https://www.themeinwp.com/support/ with full details and we will happily assist you further.

      Hope that helps!

      Best Regards,
      Themeinwp Support Team

Leave a Reply

Your email address will not be published. Required fields are marked *