How to Create a WordPress Child Theme? [Beginners Guide]

A child theme is a WordPress theme that depends and is based on another WordPress theme (called parent theme). It inherits the look, features, and functionality of the parent theme. And, you can modify certain functionality while preserving others and customize the appearance of the parent theme without touching any file or code in the parent theme.

Table of Contents

Advantage of Child Themes:

Helps to build custom theme based on another without having to create a complete theme from scratch.
Separates customization from parent theme files.
Allows parent themes to be updated without losing modifications.
Provides Easy way to create feature rich theme based on WordPress Theme Framework like Genesis.

You can create a WordPress child theme manually by creating the files and folder or by using a plugin.

How to Create a WordPress Child Theme without Plugin? [with Code]

Create a child theme folder; a new folder in theme directory (wp-content/themes).
Create a stylesheet: style.css inside this theme folder.
Place header comment at the top of Child theme’s stylesheet (style.css) in below format.

/*
Theme Name: Child Thme Name
Theme URI: https://nil.pro.np
Description: child Themes Description.
Author: Nil Koirala
Author URI: https://nil.pro.np
Template: parent-theme-folder-name
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: child-theme-Domain
*/

Change all information to match your child’s theme. But, only Theme Name and Template information is required.

Theme Name – It needs to be unique to your theme.
Template – It is the name of the parent theme directory (folder).

Create a functions.php in your child theme directory. This is where you will add additional functions, action, hook to add or modify parent theme functionality.
Enqueue stylesheet.
To enqueue parent stylesheet in child theme, first check parent themes styles handle. First parameter in wp_enqueue_style is the styles handle of corresponding stylesheet.

If the parent theme loads its style using a function starting with get_template (such as get_template_directory() and get_template_directory_uri()), then, load only child theme’s stylesheet, using the parent’s handle in the dependency parameter.

<?php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parenthandle' ), wp_get_theme()->get('Version'));
}

If the parent theme loads its style using a function starting with get_stylesheet (such as get_stylesheet_directory() and get_stylesheet_directory_uri()), then, load both parent and child theme’s stylesheets. Note: use the same handle name as the parent does for the parent styles

<?php
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
function child_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; //same as parent style handle
    $theme = wp_get_theme();
    //Loading parent theme stylesheet
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
    array(),  // same as the parent theme style dependency
    $theme->parent()->get('Version')
    );
   //Loading child theme stylesheet
   wp_enqueue_style( 'child-style', get_stylesheet_uri(),
   array( $parenthandle ),
   $theme->get('Version') // this only works if style header has Version
    );
}

If the parent theme uses multiple stylesheets, repeat wp_enqueue_style function for each stylesheet.

Now, child theme is ready to use. Install and activate.

Notes:

The functions.php of a child theme does not override functions.php of the parent. Instead, it is loaded in addition to the parent’s functions.php. (it is loaded right before the parent’s function.php file.)
Other than the functions.php file, any file added to the child theme will overwrite the same file in the parent theme.
You can add child theme image by adding PNG image file in child theme directory with name screenshot.png
10 Best WordPress Theme to use as a parent theme.

Plugins to create WordPress child theme

The manual process of creating a WordPress child theme is simple and straight forward but if you don’t want to go through the manual process you can use one of the Child Theme Generator plugins.

To create a child theme using the plugin, install any Child Theme Generator plugin and activate it. Then, go through the plugin dashboard and provide child theme-related information.

This will automatically create files and folders required for the child theme based on provided data.

Some popular child theme generator plugins:

Why should you use wp_enqueue_style instead of @import to load CSS stylesheet in WordPress child Theme?

In past, we used to add parent stylesheet in child theme by adding @import url("../parentthemefolder/style.css"); on style.css of the child theme. However, this method of Importing parent theme stylesheet using @import increases the amount of time it takes stylesheet to load. So, its recommended to enqueue the parent theme stylesheet using wp_enqueue_scripts action and wp_enqueue_style() in child theme’s functions.php.

Reference:

Child Themes | Theme Developer HandBook

If you have any questions following this tutorial or any topics on Nil Tutorial, don’t hesitate to ask in the comment section. You can also reach me on Twitter.