How to Create WordPress Child Theme
access_time
hourglass_empty
person_outline

How to Create WordPress Child Theme

WordPress developers added the ability to create child themes so you can build sub-themes based on the characteristics of a parent or master theme. A child theme allows you to use and modify a master theme, and then save the child theme separately without affecting the parent theme. In this WP tutorial, you will learn how to create and customize a WordPress child theme.

Why You Should Use WordPress Child Themes

A child theme lets you modify a parent theme as much (or as little) as you want. You can then change the child theme without impacting the parent theme or any other projects using it as an anchor for its own child themes.

How WordPress Child Themes Work

A child theme resides in a separate directory from the parent theme, and every child directory needs to include its own style.css and functions.php files. Additional customized files and file types can be added as needed, but those files are recommended for the theme to function properly.

Using the relevant .css and .php files, you can modify everything from styling and layout parameters, to actual coding and scripts that the child theme uses, even if those scripts aren’t present in the parent theme directory.

Think of your child theme as an overlay sitting on top of the parent theme. When a visitor loads your website, WordPress first loads the child theme, and then inherits missing styles and functions from the parent theme. As a result, the majority of your background coding still pulls from the parent directory but is modified according to the child theme’s parameters before the content displays on the page.

What you’ll need

Before you begin this guide you’ll need the following:

Step 1 – Creating a Child Theme in WordPress

Creating a child theme isn’t any more complicated than the work you’ve already been doing with a single master theme.

You will create a directory for the child theme in the existing wp-content/themes directory. It’s best to maintain good directory organization by adding -child to the end of of the parent theme’s name. You can also add the name of the specific project if you prefer. Remember not to include any spaces in the file name because they can cause errors. To create a new directory, you can either use FTP client or File Manager.

The following example uses File Manager to create a child theme based on the Twenty Seventeen theme, so the full path to the child theme folder will be wp-content/themes/twentyseventeen-child.

  1. Access the Hostinger control panel and click File Manager.
  2. Navigate to your WordPress installation directory (usually called public_html) and open the wp-content -> themes folder.
  3. Click the create new folder icon, enter your child theme’s name and click Create.
    Create Folder for WordPress Child Theme
  4. Access newly created child theme’s folder.
  5. Click the New File button, enter style.css as the file name, and click Create.
    Creating style.css file
  6. Populate the file with the following code:
    /*
    Theme Name: Twenty Seventeen Child
    Theme URL: http://hostinger-tutorials.com
    Description: Twenty Seventeen Child Theme
    Author: John Doe
    Author URL: http://hostinger-tutorials.com
    Template: twentyseventeen
    Version: 1.0.0
    Text Domain: twentyseventeen-child
    */ Custom CSS goes after this line
  7. Give your new theme a name and change all other values to match your theme and domain name. The most important field is Template field because it tells WordPress which parent theme your child theme is based on.  Once you are done, click Save.
    Adding code to child theme css
  8. Add a new functions.php file in the same folder, but do not copy/paste the code from the parent theme’s file, because it needs to remain separate from any modifications you make to the child theme. Instead, create a blank file or add any new .php functions required for your child theme.
  9. From the WordPress admin area, navigate to Appearance -> Themes to see your newly created child theme and click Activate.
    Activating WordPress Child Theme
  10. Visit your website, and you’ll see your theme with some obvious issues (as pictured below). Don’t panic, because the functions.php file isn’t loading the CSS from the parent theme yet.
    WordPress without CSS
  11. From the WordPress admin area, navigate to Appearance -> Editor and choose functions.php.
  12. WordPress has a function to load the CSS from parent themes. Copy and paste the following code to the child theme’s functions.php file:
    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    
    function enqueue_parent_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }
    ?>
  13. Click Update at the bottom of the page to save your changes.
  14. Visit your website again. You will notice that the CSS is loaded and your child theme looks exactly the same as the parent theme.
    WordPress Child Theme with CSS

As you can see the creation of WordPress child theme is pretty simple if you break down the process to separate steps.

Step 2 – Customizing a WordPress Child Theme

Most likely you want to customize the look of your child theme. That’s why you created it in the first place, right?

Step 2.1 – Customizing the Look of Your Child Theme

To customize the look of your theme, you need to edit child theme’s custom.css file. You can use a text editor and FTP client, file manager, or use the WordPress editor (Appearance -> Editor). You also need a basic understanding of CSS rules and know how to inspect elements using your browser. By right clicking anything you want to change and then selecting ‘Inspect Element’, you can look for the assigned classes for that element and the default CSS attached to it.

For example, to change the background color of the WordPress child theme, add the following CSS rule to the style.css file:

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

See below for how this would change the look of your WordPress site. Follow a similar process for any other element you want to change.

WordPress Changed Background Color

Same goes for any other element you want to change.

Step 2.2 – Changing the Layout of Posts and Pages

Just like how custom CSS overrides the style of the parent theme, template files allow you to create your own layouts by overriding the default layout. To override the original, your new template must have the same file name and be in the same location as the original. It’s a good idea to make a copy of the parent theme’s template file and working from that to add or remove your own code. The main template files are stored in the theme’s main folder. The template for viewing a single post is single.php and the template for pages is page.php. Twentyseventeen also splits its templates in to ‘template parts’ that are included in the main template using the WordPress function get_template_part(), to find the relevant file you can simply search the main templates for the phrase ‘template-parts’ to find those functions. In the main template file page.php of twentseventeen, line 27 reads:

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

template-parts/page/ – is the folder path, the full path therefore is wp-content/themes/twentyseventeen/template-parts/page/
content
. It refers to the characters in the file name before the hyphen
page 
– refers to the file name after the hyphen.

Together they form – wp-content/themes/twentyseventeen/template-parts/page/content-page.php

Following on from the twentyseventeen-child theme you created earlier, if you wanted to change the layout of the page content, simply copy the original file to your child theme following the exact same folder structure, like so:

wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php

Step 2.3 – Adding and Removing Features

Another big advantage of using a child theme is the ability to have a separate functions.php file which, just like Plugins, is used to add (or remove) certain features. By having functions.php in a separate child theme, you can be sure that any modifications will not vanish after a theme update.

To add new features to your theme, add PHP code to your child theme’s functions.php file. For example, the following code will disable the WordPress search feature:

function disable_search( $query, $error = true ) {
  if ( is_search() ) {
    $query->is_search = false;
    $query->query_vars[s] = false;
    $query->query[s] = false;
    // to error
    if ( $error == true )
    $query->is_404 = true;
  }
}

add_action( 'parse_query', 'disable_search' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Conclusion

WordPress Child themes offer a powerful way to create an entirely new project based on a master theme’s parameters without affecting the master theme’s files, and vice versa. 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.

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/

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 Add Custom Fonts to WordPress

Close