You are Here:Home>>Code>>WordPress>>Learn How to create a Child Theme in WordPress

Learn How to create a Child Theme in WordPress

Ivan
By | 2017-09-07T12:45:18+00:00 Jun 21, 2017|WordPress|

When working with WordPress, themes allow you to have a beautiful design of your website with little or no involvement in the design process. Since there are tens of thousands themes to be found on the Internet, it is easy to find a free or premium one for your site. But no matter how great a particular theme may look like, you will always want to change at least a few things and for that, you will need a WordPress Child Theme.

The truth is that WordPress themes come with different customization options that you can change on the go. Some will have drag&drop builders available, while the other ones will let you change practically any element there is. And still, there will be things you will want to modify on your own.

To customize a theme, you will have to know some basic HTML and CSS. But if you just open the theme’s files to change a few colors, fonts and margins, you are creating a problem for the future. In that case, when you decide to update your theme, you will lose everything that you modified!

Although it is possible to track the changes and get them back once your theme gets a new version, there are ways of avoiding that. As you might guess from the title, we are going to show you how to create a Child Theme to avoid described problems.

If you are new to WordPress, you might find useful to read our beginners WordPress articles first.

What is a Child Theme?

Before we start creating one, we think you should know what a Child Theme is. A Child Theme is a separate WordPress theme that is connected to the main (parent) one.

Once you create a Child Theme and connect it to the parent theme, WordPress will always check the Child Theme first. So, in case a specific functionality like the colors or margins exist in the child theme, WordPress will use those when displaying your site. If those styles aren’t there, it will revert to the Parent Theme and use default settings.

Because of that, Child Themes allow you to modify just the parts that you want. So, you can relax, change a thing or two, and still easily update the parent theme when needed. By doing so, you will be able to refresh the theme with new features, get security updates and bug fixes without losing the custom parts you worked so hard on. They will still be stored in the Child Theme.

How to create a Child Theme manually

Although creating a child theme may sound complicated to a beginner, the truth is that everyone can create one in just a few steps. Yes, you will have to create files and connect the new theme with its parent one, but everything’s done with a few lines of code that you can just copy and paste. So, let’s start.

Create a new folder

The first step requires you to go to your WordPress installation folder. Then navigate to wp-content/themes folder where you should create a new one. Give it a name.

Although you can name the folder anything you like, the unwritten rule says that the folder should carry the name of its parent theme followed by the word “child”. For example, if you’re creating a child theme for Twenty Seventeen, name the folder “twentyseventeen-child”.

Create style.css file

In the new folder, create a new style.css file. This time, you must not change the name of the file because things won’t work if you do so.

Modify style.css

 

Edit the file and copy the following:

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://yoursite.com/twentyseventeen-child/
Description: This is my first child theme in WordPress
Author: Your Name
Author URI: http://yourwebsite.com
Template: twentyseventeen
Version: 1.0.0
*/

Now that you have copied the code, you will have to modify the parts of it. Change the name of your theme since this will show up on the WordPress list of themes. It can be anything you like, just make sure that you remember it so you can later find your new theme and activate it.
The most important part of this code is Template. It connects your Child Theme with the parent one, so it’s crucial that you get this part right. To get it correct, open the themes folder and copy the name of the parent theme folder. If you are using Twenty Seventeen, the name of its folder is “twentyseventeen”. Take note that file names are case sensitive.

Create functions.php file

Although styles are prepared, activating the Child Theme would load it without any CSS styles. That’s because you still haven’t told WordPress what to do if specific styles aren’t to be found. You will do that by creating functions.php file in the Child Theme’s folder.

Edit functions.php file

Once you open the functions.php file, you should copy and paste the following code:

<?php
function custom_enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_child_theme_styles', 11 );

The code will find style.css of the parent theme and load it when necessary. Don’t forget to save changes.

Activate your new Child Theme

That was it! You have successfully created a Child Theme and you should now activate it from WordPress. To do so, navigate to Appearance -> Themes and find the Child Theme on the list (remember, you gave it a unique name in the step #3). Click the activate button, and you’re done.

Obviously, if you kept the files without changes, there won’t be any differences between your Parent and Child Themes. That’s because you haven’t added any custom styles to style.css file and everything would load from the Parent Theme.

So, let’s customize a few things to see how everything works.

  1. Open style.css that you created on the first step
  2. Add the following style changes:
    .entry-header .entry-title {
    margin-bottom: 10px;
    color: red;
    }
    .site-title, .site-title a {
    font-size: 100px;
    }.site-description {
    margin-bottom: 40px;
    }
  3. Save changes and check your site

How to create a Child Theme by using a free WordPress plugin

If you don’t like working with files outside WordPress, or you simply don’t feel comfortable enough to do so, you should know that there are more than a few WordPress plugins for the job. For this article, we installed Child Theme Configurator by Lilaea Media. The plugin is completely free, and there are more than 100,000 active installs. At the moment of writing this, it was updated four months ago which is a good sign that the plugin is regularly maintained.

So, let’s see how to create a Child Theme and edit it with Child Theme Configurator:

  1. Go to Plugins -> Add New
  2. Search for “Child Theme Configurator”
  3. Install and activate the plugin
  4. Navigate to Tools -> Child Themes

On the settings screen, you will get several options that allow you to create, configure, duplicate or reset a child theme. For this tutorial, we will focus on creating a new Child Theme.

Create a new Child Theme

So, the first step is to select a “CREATE a new Child Theme” option. By choosing the first option, the plugin will install a new customizable child theme using an installed theme as a parent.

Select and Analyze Parent Theme

The plugin will find all of your installed themes and list them in a drop down field. Find a theme that you want to modify and click Analyze button. Here we selected Twenty Seventeen. After a second, you should get a notification that the theme is ok. If you want to, here you can see the details about the theme.

Name the new theme directory

Since this is not the actual name of your Child Theme, you can leave the default name. If you want to change the name of the folder for your new Child Theme, feel free to enter it here. This will help you organize folders later on if you’re about to install several themes.

Select where to save new styles

This option will tell Child Theme Configurator where to store the styles you will modify later. You can save them to the primary stylesheet which will overwrite the existing values, or to a separate stylesheet file. If you want to make sure no changes are lost, use the separate file option.

Select Parent Theme stylesheet handling

If you are not sure if your theme already handles the parent theme stylesheet, if the style.css file is not used for its appearance, or if it should use @import, just leave the first option selected. By using WordPress style queue, the plugin will automatically recognize the method it should use.

Customize the Child Theme details

Click this option to customize the details about your new Child Theme. Give it a name, website, author, description, tags, and version number.

Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme

Simply choose if you want to copy Customizer Settings from the parent theme. This option should be selected only for the first time that you create a child theme. If you’re simply editing an existing one, skip this option as it will overwrite the changes you’ve done to the original Child Theme.

Create the new Child Theme

Click the big blue button to create your new Child Theme. After you successfully create a new Child Theme, you will receive a message from the plugin, and you can continue with the customization. You will be able to add new styles, find queries and selectors which you can modify and change its properties and values. This is where the fun starts as you get to show your creativity by changing the theme part by part. Enjoy!

Have you enjoyed this tutorial? If so, supports us by sharing this article or Become a Patron!

About the Author:

Ivan
I am a WordPress enthusiast and a power-user who loves to work and write about the platform at WP Loop. I work as a digital marketer and I'm also a growth hacker wanna be at Web Factory Ltd.