How to Create a WordPress Child Theme

A child theme allows you to modify a WordPress theme without changing its original source code.

The child theme contains the functionalities of the parent theme, but any modifications to the code are saved in its own folder. This way, the parent theme can be updated without losing the changes made to the child theme.

This article explains how to create a child theme.

What You Will Need

Before you start, make sure you have the following:

• A WordPress installation, either on your local machine or live server.
• Access to your site’s files using an FTP client or hosting control panel.
• Basic knowledge of CSS and PHP (optional, but really helpful).

Create the Child Theme Directory

The first step in creating a child theme is to make a new directory (folder) for it in your WordPress themes directory.

• Access your WordPress installation files (through your FTP client or hosting control panel).
• Navigate to the /wp-content/themes/ directory.
• In this directory, create a new folder for your child theme. The name of the folder should be the name of your child theme (all lowercase, no spaces). For instance, if you’re creating a child for Kadence Theme, you might name your folder kadence-child.

Create the Stylesheet

The child theme’s main file is the stylesheet (style.css). This file contains information about your theme and links the child theme to its parent theme.

You can also overwrite the parent theme’s CSS styles here. But if your child theme is going to have lot of CSS, better approach is to make a separate directory for CSS files in child theme folder and write the styles there.

In your child theme directory, create a file named style.css. In this file, you need to add the following code snippet:

/*
Theme Name:   Kadence Child
Description:  Kadence Child Theme
Author:       Your name or your business name
Author URI:   https://your-website.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v3.0 (or later)
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  kadence-child
*/Copy code

Replace the necessary fields with your information. The Template line should match the directory name of the parent theme. The Theme Name line will appear as an identifier in the WordPress dashboard.

Create the Functions File

Next, you’ll need to create a functions file to enqueue the stylesheets.

In your child theme directory, create a new file named functions.php. In this file, you need to add the following PHP code:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
});Copy code

The wp_enqueue_scripts action is used to include stylesheets and scripts in WordPress. In this case, it is enqueuing the parent theme’s stylesheet and the child theme’s stylesheet.

The wp_get_theme()->get('version') gets the theme version number from style.css. This makes sure browser loads the latest version when you make later changes to the child theme later on. To use this you need to update the version number in style.css file after you have edited the child theme.

Optional Steps

Additional CSS Style Sheets in Child Theme

Once you have created child theme, you can add additional CSS style sheets to it:

Inside the child theme folder create a new folder called css. Inside it create your CSS files.

Edit the enqueue function in your functions.php file as follows:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_style( 'more-styles', get_theme_file_uri() . '/css/my-css-file-name.css', ['child-theme'], wp_get_theme()->get('version') );
    wp_enqueue_style( 'another-styles', get_theme_file_uri() . '/css/my-another-css-file.css', ['child-theme'], wp_get_theme()->get('version') );
});Copy code

Enqueue CSS Styles Conditionally

WordPress gives you a wide range of options to enqueue styles and JavaScripts conditionally.

add_action('wp_enqueue_scripts', function(){
    if ( ... ) {
        ...
    }
});Copy code

Here are some common ones:

// CSS styles ja JavaScript file for front page
if( is_front_page() ) {
    wp_enqueue_style( 'front_page_style', get_theme_file_uri() . '/css/front-page.css', [], wp_get_theme()->get('version') );
    wp_enqueue_script('front_page_scripts', get_theme_file_uri() . '/js/front-page.js', [], wp_get_theme()->get('version'), true );
}Copy code

// CSS styles for custom page template
if ( is_page_template( 'my-template.php' ) ) {
    wp_enqueue_style( 'my-template', get_theme_file_uri() . '/css/my-template.css' );
}Copy code

// CSS styles for blog posts
if( is_single() ) {
    wp_enqueue_style( 'single', get_theme_file_uri() . '/css/single.css' );
}
// CSS styles for single blog post based on post ID
if( is_single('25') ) {
    wp_enqueue_style( 'single_id_25', get_theme_file_uri() . '/css/single-id-25.css' );
}
// CSS styles for single page based on page ID
if( is_page('30') ) {
    wp_enqueue_style( 'page_id_30', get_theme_file_uri() . '/css/page-id-30.css' );
}Copy code

// CSS styles for archive pages
if( is_archive() || is_home() || is_search() ) {
    wp_enqueue_style( 'archive_styles', get_theme_file_uri() . '/css/archive.css' );
}Copy code

// CSS styles for 404 page
if( is_404() ) {
    wp_enqueue_style( '404-page', get_theme_file_uri() . '/css/fourofour.css' );
}Copy code

// CSS styles for custom post type
if ( get_post_type( get_the_ID() ) == 'my-custom-post-type' ){
    wp_enqueue_style( 'custom_post_style', get_theme_file_uri() . '/css/custom-post.css' );
}Copy code

Using SCSS in Child Theme

SCSS, or Sassy CSS, is a preprocessor scripting language that gets compiled into CSS. It introduces variables, nesting, mixins, and more to CSS, making stylesheets more readable and maintainable. However, you cannot use SCSS directly in WordPress. It must first be compiled into standard CSS.

There are various tools to compile SCSS into CSS. One of the easiest ways is to use a text editor called Visual Studio Code for editing your child theme files. Visual Studio Code has a plugin called Live Sass Compiler that creates CSS files for you every time you save the SCSS file you’ve edited. More on Visual Studio Code Marketplace:
Marketplace
Live Sass Compiler

If you’re writing SCSS, you might choose to organize your styles across multiple .scss files. You can find further information about using and organizing SCSS from Sass website.

Here’s an example of how you might enqueue a compiled SCSS file in your child theme:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_style( 'more-styles', get_theme_file_uri() . '/css/my-compiled-styles.css', ['child-theme'], wp_get_theme()->get('version') );
});Copy code

In this example, the SCSS has been compiled into my-compiled-styles.css, which is located in an css directory in the child theme. SCSS files are typically located in the child theme’s scss folder and its subdirectories.

It’s important to note that using SCSS is entirely optional and requires additional setup and a little learning curve.

Including Additional JavaScript Files in Child Theme

Including JavaScript files in your WordPress child theme can be done with the same wp_enqueue_script() function:

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_script('my-scripts', get_theme_file_uri() . '/js/scripts.js', [], '1.0', true);
});Copy code

In the wp_enqueue_script() function the final parameter is where in the HTML document the script is placed. true places the script in the footer. If it were false, the script would be placed in the <head>. In terms of page loading speed, it is good practice to load JavaScript files at the end of the page.

With this setup, your scripts.js file will be enqueued and loaded from js folder in your child theme directory.

Overwriting PHP Files in Child Theme

You can also overwrite and include new PHP template files in the child theme. The recommended way to start with this is to copy template files from the parent theme and edit them in the child theme folder.

How to Overwrite WordPress Plugin Files

Also you are able to overwrite plugin template files in the same way. This is handy if you have for example Woo store on your website and you want to customize your shop more than is possible with the parent theme’s settings. Here is link to Woo’s tutorial for overwriting files.

Activate the Child Theme

Finally, you can activate your child theme from the WordPress admin dashboard.

• Log into your WordPress admin area.
• Navigate to “Appearance ➞ Themes”.
• You will see your child theme listed there with the name you used in the style.css file.
• Click “Activate” on your child theme.

Note! If you have Customizer settings already set up on the parent theme you should export Customizer settings before activating the child theme and import them back after the child theme is activated.

And there you have it! You have just created and activated a WordPress child theme. Now you can begin customizing your site without fear of losing your changes when the parent theme updates.