This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Create a WordPress Child Theme in 4-Easy Steps

Updated on December 22, 2021

4 Min Read
WordPress Child Theme

Child themes – as the name suggests – is a theme that derives functionalities from a parent theme. Editing your WordPress theme directly is not recommended in some cases, like where the theme might get updated. If a new update of a theme is applied, you may lose the customization you have done.

In order to keep the customizations and also keep receiving the updates of the themes, it is recommended to create a WordPress child theme of the parent theme that you want to use. Creating a child theme has another advantage, i.e. your parent theme remains intact and free from any editing.

WordPress child themes exist in a different folder than a parent theme, and the child theme depends on the functionalities of parent theme unless modified. If you are using a child theme on your website, then the WordPress core will check the files of child theme first. If it is not modified, WordPress will execute the files of the parent theme.

In order to completely understand the concept of child themes in WordPress, we are going to create a child theme of Twenty Fifteen default WordPress theme and make certain modifications to get the idea behind Child Themes.

To create a WordPress child theme, we will follow these steps:

  • Create a folder and name it twentyfifteen-child. Appending -child is considered to be a good practice.
  • Create style.css with Child Theme information and functions.php file
  • Import the Twenty Fifteen template in style.css
  • Enqueue style sheets through a functions.php file
  • Edit template files like single.php

Step 1: Create a Child Theme Folder and Add style.css

The first step is to create a new folder for our WordPress child theme. Call it twenty-fifteen-child in order to easily remember where our child theme resides.

To do this, connect to your server using an FTP client like FileZilla and navigate to /public_html/wp_content/themes and create a new folder called twentyfifteen-child

In this new directory create a style.css file and paste the following information into it.

/*
Theme Name: Twenty Fifteen Child
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfifteen
Description: Child Theme of TwentyFifteen
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

The most important lines you should edit are the “Theme Name”, “Text Domain” and “Template”. Since the theme name cannot be the same as Twenty Fifteen, and in the template, we tell WordPress that this theme is the child theme of Twenty Fifteen, we should call the files from Twenty Fifteen folders if they do not exist in the twentyfifteen-child folder. Also, the Text Domain should be different and unique of each theme you have with your WordPress install.

Now, if we navigate to our WordPress Admin Dashboard → Appearance → Theme we will see that Twenty Fifteen Child has appeared. We can apply that theme on our site.

As style.css is present in the WordPress child theme directory. WordPress will load that style.css and not the parent theme’s style.css. Every other file like index.php, page.php, functions.php will be loaded from the parent theme.

As we do not have any styles defined in the child theme’s style.css, we will have to import the styles. The best practice that is recommended on WordPress codex is to enqueue the style sheets using the functions.php file.

Step 2: Enqueue Style Sheets Using functions.php

Unlike other files, the theory behind functions.php file in WordPress child themes is: WordPress first loads the functions.php of the child theme and initializes the functions in it, later it will also execute the parent theme’s functions.php.

As I mentioned before, the best way to import style sheets is to enqueue them through the functions.php file.

Create the functions.php file in your child theme directory and add the following code.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

This will call the style sheet “style.css” from the parent themes file. If you want to edit anything in the style sheets you can add those rules in the style.css of the child theme.

Step 3: Edit the style.css File of Child Theme

In WordPress child themes you can easily edit the style sheets by defining rules in the style.css in the child theme folder. For example, if we want to change the anchor color all we need to do is add the following code in our child theme’s style.css

a {
color: #D54E21;
text-decoration: none;
}

What happens here is that child theme’s style.css rule for “a” overrides the parent theme’s style.css, rest remains intact.

Step 4: Edit a Template File of single.php

We can easily edit individual template files in the child themes. For example, if we want to edit single.php then we need to copy that file from parent theme folder and paste it in WordPress child theme’s folder.

Let’s say we want to remove the comments section from single post pages. After copying the file in our child theme folder, we can edit it and remove the following comments section.

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

What happens here is that WordPress checks the child theme folder for single.php, if it exists in the directory it will load it from there, else it will fall back to parent theme folder.

Just like that, we can edit any individual template file in our themes. This approach is generally good because it keeps our parent theme intact and updates the parent theme without losing our customization.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Ahsan Parwez

Ahsan is the Community Team Manager at Cloudways - A Managed Cloud Hosting Platform. He loves to solve problems and help Cloudways' clients in any aspect he can. In his free time, you can find him playing RTS PC games.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!