How to Create and Customize a WordPress Child Theme

If you love your current theme but want to modify its features and look, the proper way to do so is by customizing its child theme. This tutorial will explain why this practice is necessary and guide you through the process so that you can create and edit a WordPress child theme regardless of your technical skills.

Why You Should Use WordPress Child Themes

Since a child theme inherits the characteristics of a master or a parent theme, you can customize its code without breaking the original’s functionality. This way, if a theme gets an update, all of the changes you made won’t be overwritten.

Another reason to use a child theme is that it offers a fail-safe solution if you ever mess up your edits. Plus, it allows you to efficiently track the parts you have changed since the files of a child theme are separate from its parent’s.

How WordPress Child Themes Work

As briefly alluded earlier, a child theme is stored in a separate directory from the parent theme, each with its own style.css and functions.php files. You can add other files as necessary, but those two are the bare minimum required for a child theme to function correctly.

Using the relevant .css and .php files, you can modify everything from styling, layout parameters to actual coding and scripts used by a child theme even if the attributes aren’t present in its parent theme.

Think of it as an overlay. When a visitor loads your website, WordPress first loads the sub-theme, and then fills the missing styles and functions using parts from the master theme. As a result, you get the best out of your customized design without sacrificing the theme’s core functionality.

Creating a Child Theme in WordPress

The following instructions use Twenty Seventeen as the base. You can use another theme if you prefer. We’re also going to use Hostinger’s File Manager to add and edit the files, though FTP works as well.

Now, without further ado, here’s how to create a child theme in WordPress:

1. Access your hPanel and click File Manager.
2. Navigate to public_html -> wp-content -> themes folder.
3. Create a New Folder by clicking its icon on the upper menu. Enter your child theme’s name and click Create. It’s recommended to use the parent theme’s name followed by a -child suffix. In this example, we named the folder twentyseventeen-child.
   

   IMPORTANT: Replace the spaces in a folder or a file’s name with hyphens (-) to prevent errors.

4. Inside the folder, create a style.css file. Populate its content with the following code:

   /* 
   Theme Name: Twenty Seventeen Child 
   Theme URL: http://yourdomain.com
   Description: Twenty Seventeen Child 
   Theme Author: Your Name
   Author URL: http://yourdomain.com
   Template: twentyseventeen 
   Version: 1.0.0 
   Text Domain: twentyseventeen-child 
   */

5. Change all the values accordingly. The most important field is Template because it tells WordPress which parent theme your child theme is based on. Once done, click Save and Close.
6. Create another file named functions.php in the same folder, but do not fill it with the code from the parent theme’s file because it needs to remain separate. Instead, copy and paste the code below to the blank file and save it:

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

7. Visit your website and access Appearance -> Theme. Activate the child theme you just made, and you will notice it looks the same as the parent theme.

As you can see, creating a WordPress child theme is no more complicated than working with a master theme!

Customizing Your Child Theme

To personalize your child theme, you need a basic understanding of CSS rules and knowledge on how to inspect elements so that you can pinpoint their CSS code and the class they’re assigned to.

Now, let’s take a look at the basics of customizing one. To perform this, click Customize -> Additional CSS from your active child theme.

Changing Background Color

Insert the following CSS rule if you wish to change the background color of your WordPress child theme:

.site-content-contain {
    background-color: #DEF0F5;
    position: relative;
}

The value next to background-color: corresponds to the hex code of the color you choose. In this example, since we are changing it from white to light blue, the result looks like this:

Changing Sidebar Color

You can create a pleasing display of your widgets by adding some color to the sidebar with the following CSS code:

.widget {
background: #B9EBFA;
padding: 25px;
}

Again, don’t forget to edit the color code accordingly. You should get a result like this:

Changing Font Types, Sizes, and Colors

To change the font type, size, and color of your WordPress child theme, insert the code below:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

The p tag stands for paragraph. As you can see below, the above rule changed the look of the paragraph’s fonts based on the values specified.

To change the font of other text parts, like the title or the header, inspect the elements to see their CSS parameters first. For the sake of illustration, let’s try changing the title’s font color.

1. First, right-click on the text and select Inspect. Locate the CSS style link and open it in a new tab.
   
2. Find the exact part you are looking for using CTRL+F and copy the code to the Additional CSS tab. Change the values accordingly.
   

You can do the same to any other elements you wish to change.

Changing the Layout of Posts and Pages

Just like how a WordPress child theme’s custom CSS overrides the style of its parent theme, template files allow you to create your own layouts by revoking the default ones.

Your new template must have the same file name and be in the folders that correspond to the original. It’s a good idea to copy the master template file to your WordPress child theme directory and work from that.

The main template files are in the theme’s main folder. For instance, the template for viewing a single post is single.php, and the template for pages is page.php.

Twenty Seventeen also splits its templates into template-parts that are referenced in the primary template using the WordPress function get_template_part(). For example, if you wish to edit page.php, you can start by locating the template parts to see if those are the bits you need to edit. In our example file, line 28 reads:

get_template_part( 'template-parts/page/content', 'page' );

How do we read this? template-parts/page/ is the folder path. Meanwhile, “content” refers to the character in the file name before the hyphen and “page” is after the hyphen.

Together they form the full path of wp-content/themes/twentyseventeen/template-parts/page/content-page.php.

Following the structure, if you want to change the layout of content-page.php, you need to copy it to your child theme folder and place it in this location: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.

And that’s it, happy editing!

Adding and Removing Features

Another significant advantage of creating a WordPress child theme is the ability to have a separate functions.php file, which, just like plugins, is used to add (or remove) certain features using PHP code.

For example, the following lines will disable the right-click feature in your theme:

function your_function() {
   ?>
<script>
jQuery(document).ready(function(){
    jQuery(document).bind("contextmenu",function(e){
        return false;
    });
});
</script>
<?php
}
add_action('wp_footer', 'your_function');

Conclusion

WordPress child themes offer a powerful way to create an entirely new project based on the existing master theme’s features without breaking its core function. With a bit of simple coding and directory management, you can modify the child theme as little or as much as you want, providing a wide range of possibilities for your design.

For more WordPress development tutorials, check out our WordPress tutorials section here. Don’t hesitate to leave a comment below if you have any questions!