How to Use WordPress Child Theme?


WordPress child theme

Introduction: If you would like to customize the functions or the style of a WordPress theme, it is highly recommended to create a WordPress child theme and edit the files of the child theme instead of the original theme files so that any updates to the original theme will not overwrite the changes you have made.

What is a Child Theme of WordPress?

If you have ever looking at a WordPress child theme folder, you might be surprised with the small amount of files there. A child theme is a theme based on another WordPress theme (the parent theme). It actually makes use of most of the files from the parent but has the ability to overwrite some files or functions if needed. By making amendments on a child, any changes to the parent (e.g. updates or upgrades released by the producers) will not affect the amendments you have made. Any properly maintained quality themes would have updates from time to time when WordPress or technologies changes. So it is crucial to use WordPress child theme if you want to customize the files.

How to create a WordPress Child Theme?

[assuming the theme in use is named original, you will need to replace original with your theme name]

If you just want to change the CSS style for the website

Actually, you just need one file to create a child theme which can be installed and activated in WordPress. The only required file is the CSS file (named styles.css). Follow the instructions below to create your child theme:

  1. Create a folder named original-child
  2. Create a file named style.css
  3. Copy and paste the following block of code into styles.css (you can use any text editor to do this). Note that the case of the letters for the “Template:” and “@import” part should be exactly the same as the parent theme.
    /*
     Theme Name:     Original Child Theme
     Template:       Original
     Version:        1.0.0
    */
    
    @import url("../original/style.css");
    
    /* your CSS code here */
    
  4. Upload your theme to the wp-contents/themes folder via FTP OR zip the folder original-child first and upload in the Appearance > Themes section of your WordPress admin area.
  5. Login in your WordPress admin area and go to Appearance > Themes, you should be able to see the child theme installed
  6. Click “Activate” to use this WordPress child theme. Your website should look the same as before.

Try to add a few CSS rules to the style.css file in the child theme and the design of your website would be updated accordingly.

If you want to change the functions.php

Changes to the operation of the website needs to be edited in the functions.php. Be careful if you ever want to make changes to this file, as this file can make or break your website. If you add a functions.php to your child theme, WordPress will automatically append the scripts you added to the original functions.php file of the parent theme with is very convenient. Follow the steps below to add functions.php to your child theme:

  1. Create a functions.php file in the original-child folder
  2. Add the following code to the file:
    <?php
    
    // Your php code goes here
    
    ?>
  3. Start adding your PHP code inside this file

If you want to change all other files

If you want to change any other files, you will need to copy the file(s) to your child theme with the same folder structure, i.e. if the “footer.php” file is inside a folder named “include” in the parent theme, you need to create the “include” folder inside your child theme folder and then copy the “footer.php” to it.

If you want to remove CSS or Javascript files

As CSS and Javascript are usually added with the wp_enqueue_style() and wp_enqueue_script() respectively, you will need to use the wp_deregister_script() and wp_deregister_style() function.

Is there an easier way to create a WordPress Child Theme?

The one-click child theme plugin attempts to help you create a child theme by clicking several times:

  1. After installing and activating the plugin, go to Appearance > Child Theme
  2. Give a name to the child theme and click “Create Child
  3. Activate your child theme in Appearance > Themes

The Orbisius Child Theme Creator and Child Themify also allow you create a WordPress Child Theme in a similar way. However, there are known issues for these plugins which may not work for some low quality themes. So you need to test whether your current theme is compatible with a child theme.

 

GreyCampus PMP online training course bundle for US$149 only

Support website running for FREE, thanks!

If you find this post helpful and if you are thinking of buying from Amazon, please support the running cost of this website at no extra cost to you by searching and buying through the search box below. Thank you very much for your help!

Edward Chung

Edward Chung aspires to become a full-stack web developer and project manager. In the quest to become a more competent professional, Edward studied for and passed the PMP Certification, ITIL v3 Foundation Certification, PMI-ACP Certification and Zend PHP Certification. Edward shares his certification experience and resources here in the hope of helping others who are pursuing these certification exams to achieve exam success.

You may also like...

Leave a Reply

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