How to Create and Customize a WordPress Child Theme
access_time
hourglass_empty
person_outline

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:How to change WordPress background colour.

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:Editing the color of your WordPress child theme's sidebar.

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 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.Editing WordPress Child Theme font.

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.
    Editing WordPress Child Theme's H1 color.
  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.
    Changing WordPress child theme color.

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!

The Author

Author

Domantas G. / @domantas

Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.

Related tutorials

Author

JL Faverio Reply

August 28, 2018

Hey Domantas, thanks for the quick and easy guide. I did notice the css commenting is structured wrong in Step 6. You'll want to start with /* and end with */. Hope you don't mind my two cents. Keep it up!

    Author

    Domantas G.

    Replied on September 12, 2018

    Hey JL, You are correct! Fixed. Thanks for pointing this out!

Author

George T Reply

February 20, 2019

FYI - When I added your function.php code to twentynineteen-child theme I lost my logo. Not a big deal because I was able to add it back in the customize section under appearance. Otherwise works great. Thank you!

Author

Rob Reply

June 07, 2019

In #11 and #12 you state functions.php and function.php - only one works which is functions.php

    Author

    Domantas G.

    Replied on September 26, 2019

    hey Rob, Thanks for pointing this out. Fixed!

Author

Tom S Reply

July 01, 2019

Thank you for complete and easy explanation. Great support

Author

Sl Reply

July 29, 2019

Can someone tell me why isn't it better if I just clone the theme folder, rename it, and I'm good to go?

    Author

    Domantas G.

    Replied on September 24, 2019

    Hi SI, You will lose all your custom changes if you update your theme. That is the main purpose of creating child themes.

Author

George S Reply

September 25, 2019

I followed this for the Twenty Fourteen theme. However, I get duplication of the sidebar elements. One is simply stacked above the other.

    Author

    Domantas G.

    Replied on September 26, 2019

    Hey George, Most likely you registered 2 sidebars. Check official WordPress documentation https://developer.wordpress.org/themes/functionality/sidebars/

Author

Nicola Reply

November 23, 2019

First, thank you so much for your tutorial. I have been known among my friends and family for being the least tech savvy, but I've been able to follow most of this tutorial. Only the following bit was confusing for me: "It refers to the characters in the file name before the hyphen page – refers to the file name after the hyphen." I am using cPanel File Manager v3. The gist I got from this section is that by clicking on the specific template file and searching (ctrl+f) for template_parts, I can find the exact location of that part of the layout and copy it properly in the child theme, AFTER which I can make any desired changes to the layout through the copy in the child theme?! Any clarifying/reassuring words on this would be oh so deeply appreciated! Links to an explanation you might have already written or something would also be a Godsend! God bless you for making this tutorial. Seriously, I love you. My next hurdle will be making the actual changes lol

Author

Putri Reply

December 04, 2019

Hello, Nicola! Yes, you are correct! That bit about the hyphen is just how to read the file name if they are referenced inside the code, because it referenced both the location of the file and the file name itself. Hope this helps and good luck!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in WordPress
How to Clear WordPress Cache

Close