How to Create and Customize a WordPress Child Theme

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.

Easily create and customize themes with Hostinger’s WordPress Hosting!

Get Started Here

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:
    Description: Twenty Seventeen Child 
    Theme Author: Your Name
    Author URL:
    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:
    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() {
        return false;
add_action('wp_footer', 'your_function');


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


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


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!


    Domantas G.

    Replied on September 12 2018

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


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!


Matt Reply

April 30 2019

That is such a simple and effective guide, thank you so much! The only thing I'd miss is how to add a preview image when choosing the theme. It just looks so empty, since the child theme has no image. Thanks again!


Rob Reply

June 07 2019

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


    Domantas G.

    Replied on September 26 2019

    hey Rob, Thanks for pointing this out. Fixed!


Tom S Reply

July 01 2019

Thank you for complete and easy explanation. Great support


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?


    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.


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.


    Domantas G.

    Replied on September 26 2019

    Hey George, Most likely you registered 2 sidebars. Check official WordPress documentation


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


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!


Loknath Das Reply

July 25 2020

Hello, Very amazing article and about those code to switch off right click. This was the code I was looking for but it is better than any plugins. Very very helpful. All the best and thank you.


Jessie Reply

July 31 2020

Hi, I tried this but in my themes page, I get the following text: Broken Themes The following themes are installed but incomplete. Name Description Storefront Child The parent theme is missing. Please install the "Storefront" parent theme. If I follow the prompts to reinstall Storefront, it notifies me that there is an error as the theme is already installed. Any suggestions? Thanks


    Tomislav T.

    Replied on November 06 2020

    Hey there! Perhaps you are not using the storefront theme, but have it installed? The child theme could require you to use the theme actively. You can check the section about switching between themes here.


Mridul Dey Reply

August 21 2020

Thank you, this article is so helpful


Sean Reply

September 22 2020

I made my child theme following your example, but my child theme main menu and content pages seems to be somewhat padded on each side compared to the original theme which presents in full width and I cannot seem to find a solution to it. Any ideas?


    Tomislav T.

    Replied on November 18 2020

    Hey Sean. Not being able to see the issue with screenshots, I'd advise you either message our Success team, or give the theme creator a try, as it could be theme specific issue.

Leave a reply




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