How to Create a WordPress Child Theme

A Child Theme is a theme that is actively inherited all the functionality and styling of another theme, called the Parent Theme. The purpose of using Child Theme is modifying an existing theme (Parent Theme) by creating a separate set of files that you can use to customize the theme without affecting its code at all. It means that you aren’t actually modifying the files of Parent Theme and can turn off your child theme and back to the original whenever you want.

 Why use a Child Theme?

So there are a few reasons why you should to use a child theme as below:

  • WordPress users tend to proceed directly editing the CSS or editing php files to change in-depth a theme. This is extremely dangerous because if you later update the theme to the latest version, then your modifications may be lost due to the new version file overwrite. By using a Child Theme you will ensure that your modifications are preserved.
  • Using a Child Theme can speed up development time.
  • Using a Child Theme is a great way to learn about WordPress theme development.

How do a Child Theme work

Child Theme directory structure consist of :

  • at least one directory (the Child Theme directory)
  • style.css file
  • function.php file

To use a child theme, you install and activate it like any other theme. It looks exactly the same when you first activate the Parent Theme.
When you create a Child Theme, if you copy a file from the original directory to Child Theme, it will proceed executing the file in Child Theme directory and automatically get all deficient files from Parent Theme directory to proceed executing in Child Theme.

For example, If your Child Theme directory have only style.css file, so other files that are executed from the original directory except style.css file.
Only functions.php file of the original directory will not be changed even when you declare functions.php file in the Child Theme directory.The code inside functions.php file of the Child Theme directory will proceed loading further in parallel with the code inside functions.php file of the Parent Theme.

Basically speaking, when you want to modify any files, you just need to copy those files from the original directory to the Child Theme directory and modify its in Child Theme.

How to Create a Child Theme

For example, I will be creating a child theme for HearthStone theme. The first step is creating the child theme directory, which will be placed in wp-content/themes. You also can access via FTP Client software (Filezilla) to create. I recommended that the name of your child theme directory should be  “Parent Theme Name-child”  (make sure that there are no spaces in your child theme directory name, which may result in errors)

In the screenshot above we have called our child theme ‘hearthstone-child’, indicating that the parent theme is the hearthstone theme.

child-theme-1

Then you would create a file called style.css fill in the information as outlined below (some information like: Theme Name, Theme URI, Description and Author are totally up to you).

You can adjust the values accordingly due to your theme, the most important lines of this CSS file are the “Template: your-parent-theme-name” and @import url which identifies the parent theme imports the CSS from the original. In this example, I used hearthstone directory for parent theme. You must ensure that the path to CSS file of your parent theme  is correct. If the folder of our parent theme is “HearthStone” with a capital H and S, so the @import url must reflect this.

After you have created your child theme folder and style.css file, you can upload and activate your new child theme (ZIP it before upload). You simply upload it via the Appearances > Themes page in your WordPress Dashboard and activate it (make sure that your parent theme is also uploaded)

child-theme-activate01

child-theme-activate1

Modify CSS file of your child theme

All we have done is import the original theme’s CSS so the theme will look exactly like the original. Now you can add any changes to CSS file of your child theme below the @import url line. Our new CSS is located below the original’s in the file, all new CSS styles will overwrite the original’s.

Editing The Functions.php File

Functions.php is where store a theme’s main functions. If you need to add more custom functions to your theme then you can do so by creating a new functions.php file within your child theme folder. Your child theme’s functions.php file should start with a php opening tag and end with a php closing tag, add your desired php code in between. The new functions that you added will be loaded right before the parent theme’s functions.

Additional Child Theme Resources

  1. The One Click Child Theme Plugin – This plugin adds a Theme option to any active theme allowing you to create child theme with the click of a button!
  2. The WordPress Codex – If you need to manually create your own WordPress child theme, there are some good instructions over on the Child Themes WordPress Codex page.

———–

Hopefully this tutorial gives you a basic understanding of what a child theme is and how it works with WordPress. See you again in other instructions 

Leave a Reply

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