How To Create a WordPress Child Theme, and Why You Should Be Using One

CatherineUncategorized, Website Design0 Comments

How to create a Wordpress child theme and why you should be using one

I have discovered that most WordPress users follow this process:

A user gets a domain name with hosting and installs WordPress. He sees the theme he likes and installs it. He customises it to make his site look good and unique. Then he edits the footer file to remove the theme provider’s credit as well as to update the copyright information. While this process is alright, it is not the best route to take as changes made might be lost if he were to update the installed theme.

What would be the best way to go about it? It would be to start the website design project by using a WordPress child theme.

Ok, so what is a child theme?

A child theme is a theme you create to inherit the functionalities, look and features of another theme you like – which is usually called a parent theme. With a child theme, you are able to make changes to your design without editing any of the parent theme’s files.

 

Advantages of using a child theme

  1. Customisation

If you desire to change the look or functionality of your site, and you make changes to the original theme, if you later get to update your theme, the changes could get lost. However, if you were to use a child theme, your changes would be retained as the original theme will not be affected. For example, a lot of people buy a theme and change the footer to remove “Powered by theme provider” or to update the copyright information. If those changes are being made in the original file, and you update your theme, your changes will get lost and the file will be reverted back to its original state.

Thus, by using a child theme, you will be able to customise your site to your heart’s content and achieve your desired unique look for your website.

One thing to note though is that it might be unnecessary to use a child theme if you are making minimal style changes. This is also the case if your theme provides a section for custom CSS or you use a plugin to add custom CSS.

Nevertheless, it is always better to be safe than sorry.

  1. Speed of development

If you would like to create a website, it is usually advisable to look for existing themes that provide the functionalities you desire from your site. By using an existing theme, you avoid reinventing the wheel and you speed up development time. All you just have to do is to add your own code to your child theme or you copy and edit the parent files to adjust some minor details.

Most times, you might not find a theme that perfectly fits the look and features you want. However, by using a child theme, you can piggyback off another theme’s code and save several hours of writing the same thing.

However, please ensure that when choosing a parent theme, you choose a good quality theme that is properly coded.

  1. Ease of updates

Like I mentioned earlier, if you make changes to your theme files and you update your theme, those changes will get lost. While it might be a good idea to have a backup of the files you changed and replace them after the update, it is usually less stressful to update the parent theme when you use child themes.

  1. Security

This is linked to making updates for your parent theme. If a security vulnerability or exploit is discovered in your chosen theme and you do not quickly apply the patches or updates provided, you can easily get hacked.

Having a hacked website discredits your brand, can make you lose sales, affect’s people trust in your business and can even get your website visitor’s infected with malware or viruses.

  1. Feature Enhancement

With a child theme, you can add your own code to provide extra functionality to your site without tampering with the parent theme.

With it, you would also be able to easily update the parent theme without fear and take advantage of new features added in updated versions of your theme.

  1. Rollback changes

When you use a child theme, you are able to easily rollback changes and revert to the original theme if something goes wrong with your customisation. However, if you directly modify the original theme and issues occur in the process, you would find it difficult to rollback if you do not have a backup of the original files.

How do I create a child theme?

Creating a child theme is as simple as creating two files – style.css and functions.php – and placing them in a folder. The style.css file is for making design/style changes while the functions.php file is for changing the code or functionality of the parent theme.

The code in the style.css file specifies the Parent theme while the code in the functions.php file specifies that the styles of the parent theme should be loaded alongside new styles added to the child theme.

Let’s get started.

Create a stylesheet

Suppose we want to create a child theme for a theme called Switemex.

Create a folder called “switemex-child” or give it any name you desire.

Use a text editor like notepad or notepad++ to create a file called style.css.

Add the following code:

 

/*
Theme Name: Switemex Child Theme
Theme URI: https://www.switemtech.com/
Description: Switemex Child Theme
Author: Switem Technology Solutions
Author URI: https://www.switemtech.com
Template: Switemex
Version: 1.0.0
*/ 

 

The two most important lines are “Theme Name” and “Template”. The “Theme Name” specifies the name of your child theme while the “Template” line specifies the name of the parent theme. Please note that it is case-sensitive and should reflect the name of the folder containing the parent theme. The remaining lines are optional and can contain whatever details you desire to add. Save and close the file after adding your details.

Create the Functions.php file

Create another file and name it functions.php where php is the file extension. Add the following code:

 


<?php
function owned_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'switemex-style' for the Switemex theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'owned_theme_enqueue_styles' );
?>

 

****The above code is for a parent theme that has one css file called style.css

How to use your child theme

  1. Compress the child theme folder that contains the style.css and functions.php files
  2. Install the Parent theme via the Appearance > Themes menu from your WordPress Admin panel.
  3. Install and activate your child theme via the Appearance > Themes menu

Conclusion

I have been able to explain why and how to create a basic child theme.

While it might not be necessary to create one if you are only making minor style changes, it is advisable to always start your project by using a child theme when using off-the-shelf themes.

With a child theme, you can customise your site without the fear of doing a rework, speed up your development time, fearlessly update the original theme, and easily rollback changes if you make a mistake or have issues with your design.

Have you found this useful? Would you like to know more about editing and using child themes? Sign up for our “Building Websites That Gets Results” online coaching course to start building successful sites that get results.

Related Post

The following two tabs change content below.
Catherine Egwali is the co-founder and COO of Switem Technology Solutions. She is a #1 international best selling author of the book The Competent Entrepreneur, an ICT Business Consultant, WordPress designer, SEO & and technology solutions enthusiast. She helps start-ups and SMEs grow their business, solve problems, increase sales and achieve their goals through technology solutions. View her other posts or find her on LinkedIn. You can also connect with her on FB messenger via https://m.me/catherineegwali

Leave a Reply

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

CommentLuv badge