This post is recently updated including the latest guidelines for creating WordPress Child theme.

Many of us want to customize something in theme. Are you also looking to add or edit something in the theme that you are using? If yes, then you have come to the right place, my friend. This post is a simple and comprehensive tutorial on creating a WordPress child theme.

If the theme has lots of customization options then this might help fulfill your needs. But regardless of how many options may be available, there can still be something that the current theme you have is unable to do or is not the way you like. So, if you are comfortable with codes and WordPress then you may dive into the theme files and start editing it spending some minutes, hours to add the changes that you like into the theme, only to discover you have lost those changes when your theme’s next update rolls around.

So to avoid this comes our hero called the Child Theme. Creating a child theme allows you to make changes to your site without changing anything in the original theme’s code. Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme.

Note: To make simple CSS changes in your website, you can use Additional CSS box added in WordPress 4.7 instead of creating a child Theme. These changes made via Additional CSS box will still remain there even if you update the theme. But if you are looking for other additional changes like editing PHP files, a child theme must be created.

So, I think this will cover the ‘Why Create a Child Theme?’ question. So, let’s move ahead and create a child theme.

How to create a WordPress Child Theme?

In this tutorial, we’re going to show how to create a child theme for our own popular theme Spacious.

Step One:

Create a new folder in your themes directory. You can do so using the cPanel or via FTP. The themes directory is the wp-content/themes. So, let’s name the folder as spacious-child. You can name it whatever you like but remember there should not be any space in the folder name. It is a common approach to name child theme as the parent theme plus -child added on the end.

Step Two:

Inside the spacious-child folder create a file called style.css and fill in the information as shown below.

/* Theme Name: Spacious Child Theme Theme URI: http://themegrill.com/themes/spacious/ Description: Spacious Child Theme Author: ThemeGrill Author URI: http://themegrill.com Template: spacious Version: 1.0 */ /* =Theme customization starts here ------------------------------------------------------- */

Add this and save the file.

Points to remember:

Template name (here in this case spacious) should match the folder name of the parent theme and also make sure there is no blank space after the name.

Other details can be added or changed as you like.

Step Three:

Create a file called functions.php as you created ‘style.css’ in Step Two. And fill in the information as shown below.

<?php /** * Child theme functions file. */ function spacious_child_enqueue_styles() { // Parent theme style handle 'spacious_style'. $parent_style = 'spacious_style'; // Enqueue parent and child theme style.css. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get( 'Version' ) ); } add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

In creating a child theme, style.css and functions.php files are mandatory while template files, and other files are optional and can be created if required.

Lastly, to activate the child theme, in the dashboard go to Appearance->Themes. Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.

Modifying Your Theme’s CSS

If you want to modify the theme’s CSS, you can add CSS in the end of the style.css file and save it. These CSS lines will overwrite the parent theme CSS.

For example, say we want to change the font size of the site title for the spacious theme for 36px default value to 42px and also change its color from #444444 default to blue ( #0000FF ). Then you can just add the below CSS lines.

/* Theme Name: Spacious Child Theme Theme URI: http://themegrill.com/themes/spacious/ Description: Spacious Child Theme Author: ThemeGrill Author URI: http://themegrill.com Template: spacious Version: 1.0 */ /* =Theme customization starts here ------------------------------------------------------- */ #site-title a { color: #0000FF; font-size: 42px; }

Making Further Changes

Editing other theme files

You can also make structural changes to the theme files by adjusting template files. Say, you want some changes or want to add some extra code in the header. Then you can copy the header.php file of the parent theme, paste inside the child theme and make/add changes there and save the file. This header.php file will load instead of the header.php file of the parent theme.

Wrapping Up

Hopefully, now you are able to create a child theme and make the customization that you like. Want to say something? Add it in the comments and I will get back to you. Enjoy!