Understand & How To Create WordPress Child Theme

When you downloaded or purchased a WordPress theme, and you would like to customize it, usually the theme author would be suggested using a child theme. Child theme is the safest and easiest way to customize your WordPress website without modifying your parent theme.

I have to remind you, you need a little experience with PHP and CSS and WordPress functionality to create a child theme manually, but don't worry, I will also give you a step-by-step creating of a child theme using a plugin.

I will start this guide from what is parent and child theme and why use child theme, feel free to jump to the topic you want to read using the links below.

What is a Parent Theme? #

What is parent theme

Parent theme is a WordPress theme you usually use. If you download a free WordPress theme from WordPress.org or purchase a premium theme from a marketplace such as Theme Forest, they are all parent themes.

Parent theme is a WordPress theme you install and use that includes complete main styles, scripts, and functionalities.

Another example of a parent theme is the default theme that is bundled with WordPress installation. At the time I am writing this article, the current default theme is Twenty Twenty One.

What is a WordPress Child Theme? #

Child theme is a theme that inherits its parent theme styles & functionality. The Child theme and its parent theme are connected, you can't install the child theme without the parent theme installed first.

Because of this connection, the child theme has full access to the parent theme styles, scripts, and functions. So, you can make modifications to any parent theme's files.

Why Use a Child Theme? #

The first thing you need to know is WordPress and their core developer recommends us to use a child theme to make a modification, like I said in the first paragraph, this is the safest way to make any modification or customization.

Other than that, here are a few reasons why you should use a child theme:

  • You can safely update the parent theme to the latest version without losing your customization or modification.
  • If you have multiple websites using the same parent theme, you can make a modification with one child theme, then you can bring this child theme to all websites you have.
  • It saves you time, you just need to make a modification to an existing parent theme, rather than building a theme from scratch.
  • If you are interested in learning a WordPress theme development, then child theme is a great start.

Please also read: Better WordPress Performance With 8 Simple Steps

How To Create a Child Theme? #

There are 2 ways to creating a child theme, you can choose which the best for you, either creating it manually or using a plugin.

As I mentioned above, if you are interested in learning a theme development, you can try to create a child theme manually.

Create Child Theme Manually #

First thing first you should know that child theme only required 2 files, style.css and functions.php. Before we create the child theme, I assume you will create a child theme for your live website, and you have the FTP or cPanel access.

  1. First, log in to your cPanel and go to the File Manager or use FTP Clients to access your website directories.
  2. Go to wp-content/themes.
  3. Then create a new folder, a child theme name usually just a combination between the parent theme name and appended -child to the end. For example, if you use twentytwenty theme, then the directory would be named twentytwenty-child.
  4. After that, create 2 new files, style.css and functions.php.
  5. Please open style.css then add the code below. The code below is a required header comment, this tells WordPress basic info about the child theme.
/*
Theme Name: Theme Name
Theme URI: http://yourwebsite.com/
Description: Child theme description
Author: Your Name
Author URI: http://yourwebsite.com/
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentychild
*/

There are 2 important pieces of information above that you need to pay attention to:

  • Theme Name: This is your child's theme name, needs to be unique.
  • Template: This is the parent theme FOLDER name.
  1. Then, please open functions.php and add the code below.
<?php
/**
* Memanggil file css parent and child theme
*/

function child_theme_enqueue_styles() {
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parenthandle'),
false
);
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

The code above is to call or load the style.css file you just created. There is one important note, the parenthandle needs to be the same as the parent theme handle name.

Please follow the steps below to find the parent theme handle name.

  1. Open the parent theme folder.
  2. Then open functions.php, usually theme author put the code in this file.
  3. Then search for this code
wp_enqueue_style('style-handle', get_stylesheet_uri(), array());

The style-handle code above is the handle name. Copy this name and paste it into the child theme.

All done, the last thing you need to do is to activate the child theme. Please log in to your WordPress admin page, go to Appearance > Themes then activate the child theme.

Please note, if you switch theme you may need to re-configure your website menu and customization.

That's it! You can start to customize your website with the child theme you just created. If you need further information, you can read the official documentation for the child theme.

Create Child Theme with a Plugin #

If you go to the official WordPress plugins directory, and you search for Child Theme, you will see several plugins that can help you to create a child theme easily.

Currently, the most popular is Child Theme Configurator, it is a pretty powerful plugin, but this plugin includes several options that may confuse you. I'd suggest you use Child Theme Wizard.

Install Child Theme Wizard #

To install it, I assume you are familiar with installing a plugin. After you install and activate it, go to Tools > Child Theme Wizard.

On this page, you can customize the child theme that will be generated by this plugin. After you are done, you can click the Create Child Theme button. You will be redirected to a success page.

Child theme wizard

To check the child theme directory is created, log in to your cPanel or FTP and go to wp-content/themes/, you should see the newly added child theme directory there.

After that, you can activate the theme via Appearance > Themes, hover the child theme then click Activate. That's it, your child theme is ready!


That's all, now you can continue to customize your website via the child theme. In the future post, I will share the most common customization such as add new google fonts, add Google Analytics code manually, add Google Search Console meta verification, etc.