You have selected and installed the perfect theme which exactly matches the niche of your blog. But all of a sudden, you think to change something in header or footer of your theme which requires you to change/update PHP code in the source files.

Under situations like this, a child theme is what you need and this is what we are going to discuss in this tutorial.

What is Child Theme vs Parent Theme?

A child theme in WordPress is a theme which inherits all its functionality from another installed theme which is called a parent theme. Consider it an exact replica of a parent theme with added or updated functionality. Any changes done to parent theme will be reflected in child theme automatically.

WordPress will check for the files in the Active theme and if the active theme is a child theme, it will run the files from the parent theme.

Why do you need a child theme?

A child theme is absolutely necessary when you think about making changes in your WordPress theme core files. Why? because next time you will update the theme or if the theme gets updated automatically, any modification you have done to the theme files will get overridden. All code you have added in the files will be lost. To save yourself doing all those changes again, you need to create a child theme.

The other benefit of using a child theme is that your main theme or parent theme will remain intact. If you made a mistake or the code is not working in child theme, you have at least a peace of mind that the changes are not affecting your parent theme.

How to create a child theme?

To start creating a child theme manually, you will need at least four items:

  • child theme directory name
  • Parent theme name
  • functions.php file
  • style.css file

Make a general note of the above things required to create your first child theme and then move on to the step-by-step tutorial below.

It is strongly recommended to learn child theme development on localhost.

Woopoo's Caution

If you are getting your hands dirty with WordPress theme coding for the first time then it is always a good idea to test child theme on localhost first instead of doing it on a live site which can break your site.

See our article how to setup WordPress on localhost for more details.

That’s being said, let’s start the fun part finally. Using the steps below, we will make a working child theme for twenty seventeen theme (2017) which comes pre-installed with WordPress. Same steps could be followed for your own theme.

  • Go to wp-content > themes directory where you have installed WordPress. All WordPress themes live in this location. see WordPress folder structure explained for more details.
  • Make a new folder twentyseventeen-child. We have appended “-child” to indicate that the parent theme to this is twentyseventeen. Make sure there are no spaces in folder name.
  • Create two files inside twentyseventeen-child folder. style.css and functions.php.

child theme example

  • Open style.css and paste the following code:
/*
 Theme Name: Twenty Seventeen Child Theme
 Theme URI: http://www.learningcms.com
 Description: A Twenty Seventeen child theme 
 Author: learningCMS
 Author URI: http://www.learningcms.com
 Template: twentyseventeen
 Version: 1.0
*/

All of the above code is passing the required information to WordPress to process the child theme accordingly. The most important of above all is the Template line (second from below).

Template line is pointing to the parent directory which is twentyseventeen in our case. You may need to change this accordingly.

Although the structure of a child theme has been defined but if you Activate the theme at this stage, it will show you a blank page.

Our next job is to connect the stylesheets of the parent and child themes. We have seen tutorials on internet which are still teaching the old method @import to connect the stylesheets.

@import url(“../twentyseventeen/style.css”);

This method is no longer a good practice now because it increases the load time of site which is not even good for SEO.

The current and most accurate method is to do it under functions.php and this is what we are going to do in our next step.

  • Open functions.php and paste the following code:
<?php
function theme_enqueue_styles() {
 $parent_style = 'parent-style';
 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

The code above will “connect” the stylesheets of parent and child themes. We have just created a child theme. Yes, it was that simple. Let’s activate it.

  • From your WordPress dashboard, go to Appearance > Themes. You will see your just created entry there Twenty Seventeen Child Theme.

activate child theme

  • Clicking Theme Details button will show you exact details we have written in style.css.

child theme details

  • Activate the child theme and visit your site front end. It will be exactly the same as your parent theme.

How to use child theme in WordPress?

The child theme you have created above is sort of an empty theme which is linked to your parent theme. You can copy files from the parent theme to child theme to make changes.

For example if you need to change PHP code in header.php or footer.php, copy the files from parent directory to child theme directory and make your changes. In this way your parent theme files will be remain intact.

Likewise, any CSS code can be added to style.css file.

We are done with creating our child theme manually. If you want to skip this manual method and make your life easier by using a plugin then let’s proceed to our next section to know how to create a child theme using a plugin.

WordPress Child Theme WordPress plugin

The best plugin we have found is Child Theme Configurator┬áplugin and that’s why we have selected it to use in our tutorial.

child theme configurator plugin

  • The plugin settings will be available under Tools > Child Themes.
  • From the plugin page, select Create a new Child Theme. Select your Parent Theme from the second option and click Analyze.

configurator plugin options

  • It will check for your theme if a child theme can be created. If all good, click Create New Child Theme button at the bottom.

Here is a more in-depth video tutorial on the topic:

 

Once you are happy with all the changes you have done to your blog using a child theme, you can zip the twentyseventeen-child folder and upload it to your live site using CPanel or FTP. See our guide how to use FTP with WordPress.

We are done with our WordPress child theme tutorial. We hope the instructions above will help you create and customize a child theme without any problems. If you still want to ask anything, let us know using the comments section below.

Don’t forget to follow us on Twitter and Facebook.

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This