WordPress Child Theme Explained

If you talk to a WordPress developer or theme author they will tell you to always use child theme on your website. I did not know it for my first WordPress project and got into a lot of trouble later. I just hope that I’ve managed to catch you up before you make the same mistakes and guide you through this process.

To set up a child theme you do not need to be a developer or have in-depth knowledge about WordPress. There are few simple steps you will need you to follow and within less than 5 minutes have a child theme up and running. But, if you feel really lazy, you can just scroll down to the very bottom and download ready to use sample zip of a child theme for our own Visual Composer Starter theme. But before we begin, let’s take our time and look on what is child theme and what are the reasons (benefits) of having it.

What is a Child Theme

A child theme is a theme that inherits functionality and styling of another WordPress theme. To child theme, this is called a parent theme as it defines all the options and other characteristics that must be applied to the child theme.

According to WordPress Codex, if you want to make some modifications to your theme, you should do it in a child theme, not the parent. This will allow you to adjust functionality and styling of your theme without changing core files of the main copy.

Why would you want to modify your theme? There can be multiple reasons for that, as an example, you have a certain styling that you would like to change but there are no options available in Theme Customizer and you will need to apply your own CSS.

Of course, you can do these modifications in a parent theme, but there are reasons why you should avoid it.

Benefits of a Child Theme

It is an additional work to create a child theme, so there sure are the reasons why we would want to create one.

Theme Updates

Child theme ensures that you won’t lose your modifications after theme updates. All your modifications are stored within a child theme files, not a parent theme so there are no risks that an update will overwrite your changes.

Theme updates are frequent as they introduce new features and ensure compatibility between WordPress versions and plugins. Now imagine that you will have to manually apply all your modifications after every theme update because they will be overwritten …

Speed Up Theme Development

If you decide to develop a theme on your own, it is sometimes a good idea to use a starter theme to speed up development. This allows you to modify only certain templates and save a lot of time. Moreover, development from a scratch will ask you to go through every scenario while child theme development ensures fallback safety.

Secure Theme Development

Modification of existing code can lead to potential issues while extending functionality lowers such risks. In addition, you will be able to disable last modification or revert to the previous state, you even will have an option to quickly compare your current status in comparison to initial state.

How to Create a Child Theme

Now that you are aware of all the good things about a child theme it is time to get your hands dirty for the next 5 minutes and set up your own child theme. All you need to do is follow the next steps and repeat the same actions.

1. Get the Theme

The first thing you need to do is get the WordPress theme that you want to use to create a child theme from. In our guide, we are using free Visual Composer Starter theme, but you can use any other theme as well.

Install your theme via Appearance – Themes – Add New in your WordPress administration panel.

2. Create a Child Theme Directory

As you have your parent theme installed you will need to access your WordPress site and create a child theme folder under wp-content/themes. When creating a folder, make sure not to use spaces in the naming.

A common practice is using your parent theme name together with postfix -child (ex. visual-composer-starter-child) as it will allow you to quickly understand what is the parent theme and locate child theme folder.

3. Create style.css File

Next, you will need to create a style sheet file inside your folder and name it style.css. To ensure it will work, you will need to add ‘style sheet header’ at the very top of the file as suggested:

/*
Theme Name: Visual Composer Starter Child
Theme URI: http://visualcomposer.io
Description: Visual Composer Starter child theme
Author: WPBakery
Author URI: http://visualcomposer.io
Template: visual-composer-starter
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, blog, starter, responsive-layout, accessibility-ready, sandwich-menu
Text Domain: visual-composer-starter-child
*/

When added, make sure to fill the correct information to work properly. Below you can find a brief description of the fields:

Theme Name
The name of the theme that will appear in your WordPress.

Theme URI
A URL to the theme demonstration which is required if you wish to push your theme to WordPress theme repository.

Description
Theme description that will appear in your WordPress by clicking on Theme Details option.

Author
The author of the theme – you.

Author URI
Author website address.

Template
The most important part – this is the place where you need to specify the name of the parent theme folder. This is case-sensitive and needs to be 100% correct in order to function as a child theme.

Version
A version of your child theme which is suggested to start with 1.0.

License
Specify the license of your child theme. Make sure that your license is the same as your parent theme license.

License URI
Link to the license explanation, when again you should follow your parent theme licensing.

Tags
Tags that are relevant to your child theme.

Text domain
Used to make your theme translatable and should fit the ‘slug’ of your theme.

Remember, not all information is required if you are creating a child theme for your own purpose.

4. Create functions.php

Functions.php file will allow you to add and edit functionality of your WordPress theme. Here you can use either traditional PHP, or native WordPress functions, as both are accepted.

Same as with style.css, you need to create functions.php inside your child theme folder and add some code:

<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}

Ok, but what is this code really? Your parent theme has a certain styling that you would probably want to apply to your child theme, otherwise, you will not see any style sheet. What this code does is it applies the function that will enqueue existing style sheet of your parent theme into your child theme.

5. Activate Your Child Theme

At this point, you have done all the basics required to create a child theme. Now, all you have to do is just activate it. To activate your theme, navigate to Appearance – Themes, locate your child theme in the list and click ‘Activate’.

Activated Visual Composer Child Theme
Activated Visual Composer Child Theme

Bonus: Change Theme Cover Image

As a bonus, you may want to change your child theme cover image to differ it from the parent. To do so, just make sure to create an image with a size of 1200×900 pixels, name it screenshot.png and upload it to your child theme folder.

Conclusions & Download

It takes less than 5 minutes and no coding skills to create a child theme. You may have no intentions to manipulate with your theme right now, but having a child theme will make you feel secure about the future.

And in case you feel lazy, we do have a ready to use child theme files for you based on Visual Composer Starter theme. All you need to do is just download the zip file and upload it to your WordPress directory /wp-content/themes/ (make sure that you have Visual Composer Starter theme installed as well).

Download Visual Composer Starter Child Theme