How to Create a Child Theme in WordPress – Simple Steps

Create a Child Theme in WordPress Without Plugins

If you are a beginner in the development area of WordPress, then this article is for you.

If there is a need to make any customizations to the code now or in the future to wordpress theme, we need to plan “Child Theme Creation” as the first activity of development. Let’s make it a point to do it even it is just going to be CSS style changes for a while.

It is about What’s and Why Of Child Themes

As a developer in wordpress, it is very important to know about the child themes. Child themes are very key functionality that is provided by wordpress. Consider that you’ve started your website recently and after a long history of search-and-hunt, you’ve made peace with your mind and decided to move ahead with the chosen theme of your choice.

After adding few posts or pages to the site, it is the obvious urge that is often encountered by developers to make minor changes. There is nothing wrong in it. But sometimes, we don’t foresee the problems of touching the theme files directly. Most of the successful themes and plugins in WordPress provide periodic release with the minor & major changes added with additional functionalities/bug fixing or to sync it with latest wordpress release.

So, what will happen when you upgrade your themes or plugins ?

New upgrade of theme will replace all your theme files which means all your changes are erased. If you’ve taken a backup of the previously installed version’s theme files, we can do compare and reapply the same changes in the latest version of theme files. Otherwise all the changes are lost forever and you need to dig deep into your memory to write them back.

And Saviour for this situation is “Child Themes”. Child themes can be created for each installed themes in our wordpress site. All the customizations and tailoring that is required for the site can be written under Child Themes. Any new theme upgrades can be installed smoothly as this process does not override the files created under child themes.

Lets see the “How” part of Child Themes

First Step – Create a Child Theme in WordPress:

1. Find out your chosen theme location in the file directory. Usually it will be in this path – /public_html/wp-content/themes/<YOUR_CHOSEN_THEME>

2. Let’s create child theme for your <YOUR_CHOSEN_THEME>. Create a new directory namely “<CHILD_YOUR_CHOSEN_THEME>”. (Note: you can give any name, but it is better to add your current theme name in the suffix or prefix to avoid confusions.)

3. Create a new file namely style.css under /public_html/wp-content/themes/<CHILD_YOUR_CHOSEN_THEME> and add the below lines & save it,

   /*Theme Name: <CHILD_YOUR_CHOSEN_THEME>
   Description: Child theme for < YOUR_CHOSEN_THEME>
   Author: <Your Name or Website Name>
   Template: <YOUR_CHOSEN_THEME>
   */
   @import url("../<YOUR_CHOSEN_THEME>/style.css");
   /* write custom css below */

   Note: Import statement is main and it is added to inherit all the style changes from Parent.

4. All required changes for Child theme is now complete. We are just one step behind in testing your child theme.

5. Login to WordPress Admin and access Dashboard >> Themes. If you are able to see your child theme name (“<CHILD_YOUR_CHOSEN_THEME>”) listed under installed themes, then it is Success.

6. Click on your child theme name and activate it. If you see all other installed themes, an image is shown along with the theme name whereas the newly created theme “<CHILD_YOUR_CHOSEN_THEME>” is shown with blank image.

7. We will see the process to replace the blank image with your website current front page. Take a screenshot of your current website home page (screenshot can be anything; it could be your photo with BIG SMILE too 🙂 ). Save the created screenshot with name ‘screenshot.png’ under the folder /public_html/wp-content/themes/<CHILD_YOUR_CHOSEN_THEME>.

8. Now if you visit Appearance >> Themes, your child theme will be shown with the screenshot that you just added.

More about Child Theme CSS Style – Overriding & Inheritance:

Child themes CSS Style changes are similar to Inheritance concept in Object Oriented Approach. CSS styles that are redefined under child will override parent style changes. But for the CSS styles not redefined in child, parent style changes will be inherited and used.

Additional Steps – Create a Child Theme in WordPress

Just adding style.css under <YOUR_CHILD_THEME_FOLDER> is enough for the completion of Child theme creation process. Apart from CSS style changes, we can also define new functions in our child theme by following below steps. As done like style.css file, we will create a functions.php under Child theme directly.

1. Create functions.php under /public_html/wp-content/themes/<CHILD_YOUR_CHOSEN_THEME>
2. Add the below code to functions.php

   <?php
   /**
    * Functions
    *
   * @package      <CHILD_YOUR_CHOSEN_THEME>
    * @author       <AUTHOR NAME>
   */
    /**Add your custom functions here **/
   ?>
   

   Now you can add any custom functions under child theme.

More about Child Theme Functions – No Overriding :

Child functions.php doesn’t override the functions defined in parent file, but it is loaded in addition to its functions defined in parent. Functions defined under child will be loaded first followed by Parent. We can also add conditional statements to load only child functions. You can get more details from Codex documentation.

More Tips:

Unlike functions.php, all other PHP files added under Child will not be loaded in addition to Parent file. Instead, parent’s PHP file will not be loaded and child’s PHP file will be taken into account. For example, if we need to alter sidebar.php, just copy sidebar.php to the path /public_html/wp-content/themes/<CHILD_YOUR_CHOSEN_THEME> and make necessary changes in it.

Now only the changes of sidebar.php present under child theme directory will be considered.

These are the steps to be followed to create a Child Theme in WordPress without plugins. For more details, please see Codex documentation.

References:
https://codex.wordpress.org/Child_Themes