Child themes in WordPress are used to update your WordPress powered site using an existing theme. WordPress has countless themes available both paid and free. Even when we use a really nice theme, sometimes it needs to be modified to fit certain requirements.

The straight-forward approach would be to modify the code directly to the theme which is something you don’t want to do. This is because these themes (and also plugins) may have an update in the future which will overwrite your changes. Theme developers periodically update their code to add security, fix bugs, and other maintenance changes. If you do not update your theme, your site can be exploited via security issues or bugs.

So how can we modify the theme without any worries while being able to update? The answer to that are child themes, which is based off the parent theme. All the changes that are done to the child theme will not affect the parent theme’s original template. This makes it possible to both update your WordPress theme and accommodate adjustments to the site.

A child theme can contain image folders, JavaScript, CSS, template files and many other things. You can include as much or as little customization as you want. In fact, a child theme really only needs three things:

1. Folder
2. Style sheet
3. functions.php file

That’s it. And the two files can even pretty much be empty.

Set Up A Child Theme

For the course of this tutorial, we’ll use the ever so popular, Twenty Sixteen theme as an example for the parent theme.

Create a Folder

Like any theme, child themes are located in wp-content/themes in your WordPress installation. Create new folder there. A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. Because we are using the Twenty Sixteen theme, we will call our folder twentysixteen-child. You can name it anything you want.

Create a Stylesheet

After creating the folder, we now need a style sheet. This style sheet must be named style.css, so WordPress can recognize it as main style sheet. In this style sheet there is “style sheet header” right at the beginning of the file.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-sixteen-child
*/

Here is what each line means:

• Theme name
  This is the name that will show up for your theme in the WordPress back end.
• Theme URI
  This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.
• Description
  This description of your theme will show up in the theme menu when you click on “Theme Details.”
• Author
  This is the author’s name — that’s you, in this case.
• Author URI
  You can put your website’s address here if you want.
• Template
  This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!
• Version
  This displays the version of your child theme. Usually, you would start with 1.0.
• License
  This is the license of your child theme. WordPress themes in the directory are usually released under a GPL license; you should stick with the same license as your parent theme.
• License URI
  This is the address where your theme’s license is explained. Again, stick with what your parent theme says.
• Tags
  The tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are relevant.
• Text domain
  This part is used for internationalization and to make themes translatable. This should fit the “slug” of your theme.

In practice, you only need to put “Theme Name” and “Template” so that the theme works.

/*
 Theme Name: Twenty Sixteen Child Theme
 Template: twentysixteen
*/

With the folder and style sheet, you can use your child theme by activating it. However, it will be unstyled, because we haven’t implemented any styling (CSS) yet.

Before that, we will import the parent’s style in here.

@import url("../twentysixteen/style.css");

That  is the old way of inheriting parent styles and is no longer recommended. The reason for that is performance.

Create functions.php

The functions.php file allows you to change and add functionality and features to a WordPress website. It may contain both PHP and native WordPress functions. Plus, you are free to create your own functions. You don’t need functions.php. If you don’t plan to use PHP to modify your theme, then you can completely do without it. A style sheet and other files might be enough for you.

We will use functions.php to inherit the information in parent theme’s style sheet.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

That’s all you need to create a child theme. You can add your CSS rule in style.css. If you want to overide parent theme files, you just need to copy and paste it in your child theme folder.

 

So, rather than making edits directly in the theme you have installed, will be better and wise to just creat a child theme. Child theme will be updateproof, so your changes will be safe and sound. To create one you just need to follow this three steps :

1. Create folder
2. Create style sheet
3. Create functions.php

Learning about child themes is part of my learning about WordPress. By creating one you will also learn about the structure of the WordPress’s code.

Ever built a child theme for WordPress? Do share your experiences with us.