Categories
WordPress Tutorials

How to Create a Child Theme for WordPress

A child theme is the safest and easiest way to customize your WordPress website without modifying the parent theme.

When you download or purchase a WordPress theme, typically you want to customize it to suit your design aspirations. The theme author would usually suggest using a child theme, as it is the safest and easiest way to customize your WordPress website without modifying the parent theme.

As a gentle reminder, in order to create a child theme, you must have a little experience with PHP and CSS and WordPress functionalities. But don’t worry, I will also provide you with a step-by-step guide on how to create a child theme for WordPress using a plugin.

I will start this guide from understanding what parent and child theme are and why we use child theme. Feel free to jump to the topic you want to read using the links below.

What is a Parent Theme?

How to create a child theme for WordPress
Parent themes

A parent theme is the WordPress theme you usually use in your website. If you download a free WordPress theme from WordPress.org or purchase a premium theme from a marketplace such as Theme Forest, the theme you download or purchase is a parent theme.

A parent theme is a theme that includes complete main styles, scripts, and functionalities.

Another example of a parent theme is the default theme that is bundled with WordPress installation. When I wrote this article, the current default theme was Twenty Twenty One.

Interested in optimizing WordPress performance? You can read our WordPress performance optimization guide.

What is a WordPress Child Theme?

And now, what is a child theme?

A child theme is a theme that inherits its parent theme styles & functionalities. 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, a child theme has full access to the parent theme’s styles, scripts, and functions. Hence, you can make modifications to any parent theme’s files from a child theme.

Why Use a Child Theme?

The first thing you need to understand is that WordPress and its core developers recommend using a child theme to create any modifications. Like I mentioned earlier, this is the safest way to make any modifications or customizations.

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 customizations or modifications.
  • If you have multiple websites using the same parent theme, you can make a modification to one child theme, and you can bring this modification to all the websites that 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 WordPress theme development, child theme is a great place to start.

How To Create a Child Theme?

There are 2 ways of creating a child theme, either by creating it manually or by using a plugin. You can choose whichever works best for you.

If you are interested in learning WordPress theme development, creating the child theme manually is the way to go.

Create Child Theme Manually

First thing first, you should know that child theme only requires 2 files, style.css and functions.php. Before creating a child theme, you need to know the FTP or cPanel access of your website.

  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 Twenty Twenty theme, then the directory could be named twentytwenty-child.
  4. After that, create 2 new files, namely: style.css and functions.php.
  5. 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 that you need to pay attention to:

  • Theme Name: This is your child theme’s name, it needs to be unique.
  • Template: This is the parent theme’s FOLDER name.
  1. Then, open functions.php and add the code below.
<?php
/**
 * Loads the parent and child theme stylesheet.
 */
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 above code will call or load the style.css file you have just created. There is one important thing to note: the parenthandle must be the same as the parent theme’s handle name.

Please follow the steps below to find the parent theme’s 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 following 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 activate the child theme.

Please log in to your WordPress admin page, go to Appearance > Themes then activate the child theme.

Please note that if you switch theme, you may need to re-configure your website’s menu and customizations.

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

How to Create a Child Theme with a Plugin

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

Currently, the most popular plugin in the directory is Child Theme Configurator. It is a quite powerful plugin, but it includes several options that may confuse you. I’d suggest that you use Child Theme Wizard.

How to Install Child Theme Wizard

Before installing Child Theme Wizard, I assume that you are already familiar with installing a plugin. After installing and activating it, go to Tools > Child Theme Wizard.

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

Child theme wizard settings.

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

Afterwards, you can activate the theme via Appearance > Themes. Hover above the child theme and then click Activate. That’s it, your child theme is ready!


Now you can continue customizing your website via the child theme. In future posts, I will share more common customizations such as adding new Google fonts, adding Google Analytics code manually, adding Google Search Console meta verification, etc.

By Satrya

Satrya is a full-time WordPress developer and a blogger. Helping peoples through code and words. Say hi @idenovasi.

Leave a Reply

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