How to create a WordPress Child Theme

What is a WordPress child theme?

Child theme is a WordPress theme but you don’t have to create it from scratch, you use another theme as a base called parent theme and you modify its functionality, layout and styling. You don’t have to be a code guru to create a child theme, in fact you don’t need to know PHP at all.

Why should I use child theme?

You have found a theme that you like but it needs some additions or modifications to make it meet your needs. You can make the changes directly to the theme’s files but if you update it you will loose your changes. On the other hand, you can create a child theme with your modifications and update the parent theme without the fear of loosing your changes.

How to create a child theme:

Don’t worry, it is a lot easier than it sounds. You can create a child theme in two very small and easy steps. In our example we will name the parent theme “myParentTheme” and the child theme “myChildTheme”.  All themes can be found in wp-content/themes directory. We assume that myParentTheme is already installed in your wordpress and you can find it in wp-content/themes/myparenttheme directory.

Step 1: Create a new directory incide wp-content/themes with the same name as your child theme, in our case wp-content/themes/mychildtheme.

Step 2: Create a new file called “style.css”. This is the stylesheet file that your theme will use and overrides the stylesheet of the parent. This file must have a header like the following:

/*
Theme Name:     My Child Theme
Theme URI:      http://mychildtheme.com
Description:    Child theme based on My Parent Theme
Author:         Author's name
Author URI:     http://mychildtheme.com/author/
Template:       myparenttheme
Version:        1.0.0
*/

The only required fields are the “Theme Name” and the “Template”. Theme name is the name of your child theme and Template is the directory name of the parent theme. The header is used by WordPress to gather the information of your child theme. After the header, it is a regular stylesheet file but if you want to look like the parent theme you should add the following line:

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

After the import line you can insert the styling rules you want to add or modify. If you put any rules before the import line, it will not import the parent stylesheet.

That’s it. You now have a child theme and you can update your parent theme without overwriting your changes. If you open WordPress at the Theme options you can see the new theme and you can activate it. Be careful, DO NOT delete parent theme. If you do, your child theme will not work, remember that all functionality is inherited from parent theme.

Additional modifications

You can put any files you want in child theme’s directory. For example if you want to support RTL (Right To Left) languages, you can add “rtl.css” file with the following content (if the parent theme has rtl.css).

/*
Theme Name: My Child Theme
Template: myparenttheme
*/

@import url("../myparenttheme/rtl.css");

Enough with stylesheets, if you want to add some functionality to your theme you can add “functions.php” file to the child theme directory. Theme functions file of child theme is loaded before theme function file of parent theme and it does not override it. If you want you can think of it as a big file with both contents, first the the child’s functions and then the parent’s functions. “functions.php” content must start with ‘<?php’ tag and end with ‘?>’ tag. Here is the content of a functions file which removes WordPress version.

<?php
    function remove_wp_version() { return ''; }
    add_filter('the_generator', 'remove_wp_version');
?>

I highly recommend that you use child themes if you want to make modifications to your themes. I admit that in some cases it is more difficult to make the changes you want through the child theme but I believe that it worth it.