How to Create a Child Theme in WordPress

After putting so much work into customizing a WordPress theme, all the changes that you made are lost when you update your theme. It is always a good idea to create a child theme in WordPress before you do any customizations. This article explains how to create a child theme and why.

The best thing about WordPress themes is that they are easily customizable. So, when you purchase a theme or decide to use a free theme, there are always a few things that you may want to modify before using it on your WordPress site. Theme customization lets you modify the styles as well as the functionality of the theme, but after sometime when you update your theme, all of the changes that you made are lost.

Here, you may think not to update your theme so that the customizations are not lost. But with newer versions of WordPress and security fixes there comes a time when you are required to update your theme.

Steps to Create a Child Theme

In this tutorial we are going to use WordPress default theme Twenty Fourteen and create its child theme. Following are the steps to follow:

1. First of all, create a new folder in your themes directory by using your favorite FTP program or cPanel.

Remember, your themes directory is wp-content/themes where all of the themes are stored including your child theme.

Create a new folder here and give it a name without any spaces. I have created a folder named webunits which will hold the child theme of parent “twenty fourteen” theme.

Pic

2. Now create a style.css file in your child theme folder. For any child theme to work properly, stylesheet style.css is the only file required. It lets you change the style of the theme, but of course, you may need other files too in order to change the functionality and behavior of the theme. We will discuss this later in this article.

The style.css you just created must start with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
/*
Theme Name: webunits
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: webunits
Author URI: http://webunits.com
Template: twentyfourteen
Version: 1.0.0
*/
@import url("../twentyfourteen/style.css");

/*  Your custom styles go below this line */

You may change the Theme Name, Author and Author URI but other lines must be kept intact.

3. It’s time to activate your new child theme. In your WordPress Dashboard, go to Appearance > Themes. You should see a list of available themes. Locate your theme and click on Activate.

Pic

Visit your website and refresh the page. At this time you won’t be able to notice any difference because your child theme is inheriting all the styles from its parent theme. If you want to modify the style.css of your child theme, go ahead.

Remember that all the styles you specify in a child theme override the styles of parent theme. This is contrary to modifications in functions.php of a child theme (Discussed later in this article) which are considered as additions to functions.php of a parent theme.

Removing Hyphenation in Twenty Fourteen by Modifying style.css in a Child Theme

This section explains how to modify style.css in a child theme you just created in step 2 above. Twenty Fourteen by default displays your content in hyphenated style. If you want to remove the hyphens just add the following code in your child theme style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
Theme Name: webunits
Theme URI: http://wordpress.org/themes/twentyfourteen
Description: Twenty Fourteen Child Theme
Author: webunits
Author URI: http://webunits.com
Template: twentyfourteen
Version: 1.0.0
*/
@import url("../twentyfourteen/style.css");

/*  Your custom styles go below this line */

.entry-content, .entry-summary, .page-content, .widget-area .widget  {
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}

This code now changes the style of your website and your content is shown in non-hyphenated format.

Modifying the functions.php file

So far, you only have style.css in your child theme folder. If you want to modify your site’s functionality, you have to deal with functions.php file. This file contains the functions of a theme. In order to add custom functions into functions.php, you need to create a functions.php file in your child theme folder. Because it is a php file, it must contain the basic structure as follows:

1
2
3
4
<?php
//Your custom functions go below this line

?>

Now you have two files in your child theme folder: style.css and functions.php

Pic

The Bottom Line

WordPress Themes can be customized to match the required colors, layouts and behavior. However, these customizations are lost as soon as the theme is updated. Therefore, we need to create a child theme in wordPress. This allows us to do as much customization in a child theme as we like and the changes are not lost even if the parent theme is updated. A child theme inherits the same styles and functionality of a parent theme unless modified within child theme folder.

Webdesign & Development