In this tutorial, you will learn how to create a WordPress child theme. If you are new to WordPress and don’t know what is a WordPress child theme, I will explain everything.

WordPress themes are collection of bunch of PHP, JavaScript and CSS files. In simple words, with WordPress themes, you can change the look and feel of your blog. WordPress themes can be very powerful.

Premium WordPress themes offer a lot of advanced features and functionality. Thousands of free and premium WordPress themes are available.

You can create a WordPress theme from scratch or you can create a WordPress theme based on another theme. Every version of WordPress comes with pre-installed WordPress themes and if you don’t like the pre-installed WordPress theme, you can install another WordPress theme or you can create a child theme.

Why WordPress child themes?

Creating a WordPress child theme means you take an existing theme and you make your own theme that is based on it. Child theme inherits most of the features from the original theme, known as parent theme.

Child theme saves a lot of work and time. Creating a WordPress theme from scratch take a lot of time and sometimes advance knowledge of HTML, CSS, PHP and is required. With child themes, you can make a lot of modifications.

If you’re not satisfied with the customization, options and features that the WordPress theme you’re using provides then you can create a child theme. Even if you want to make one change in your WordPress theme, you should create a child theme or use CSS editor plugin.

You can edit your existing WordPress theme files directly, but then, when you make an update you’ll lose all your customizations. That’s why you need a child theme.

What you can do with WordPress child themes

With WordPress child themes, you can add as many features as you want. It’s up to you. If you want a change font size or color for headings or links, you can do it very easily with CSS.

You can add new navigation menus, register new sidebars, create custom pages for products or add support for custom web fonts.

What you’ll need:

Now you know what is a WordPress child theme and why you should create child themes, It’s time to learn how to create a WordPress child theme.

It is not required but recommend to set up a local WordPress installation for development and learning purpose. With local WordPress installation, You can quickly and very easily test your new plugins and themes.

There are many ways to install WordPress locally, If you are a MAC user, You can use MAMP, Windows users can use XAMPP, WAMP or Bitnami WordPress installer.

• How to install WordPress with WAMP Server
• How to install WordPress with MAMP
• How to install WordPress with Bitnami Stack

If you are an absolute beginner, you can download and install Bitnami WordPress stack to create a fully functional WordPress website on your MAC or PC.

I personally prefer WAMP server for local development. It is not difficult to install WordPress on WAMP, you can read tutorial or watch videos to learn how to install WordPress using WAMP, XAMPP or MAMP.

You will also need a code editor to edit theme files. Sublimetext, Brackets, Atom are few popular code editors.

How to create a WordPress child theme?

Once your local WordPress site is ready, we can start creating our child theme. If you are using WAMP server go to your WAMP installation directory > WWW > WordPress > wp-content > themes folder.

In WordPress themes folder, create a new folder and name it twentysixteen-child or anything you like e.g InstantShift. We are going to use twentysixteen theme as a parent theme. It means our child theme will be based on TwentySixteen theme.

For every child theme, we need two files.

• functions.php
• style.css

With in your twentysixteen-child theme folder create these two files. Now open your files in Text editor, for quick access you can drag your twentysixteen-child folder in text editor sidebar. Open style.css file and add the following code.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Above markup is required for a child theme. Without a stylesheet with necessary mark up WordPress won’t be able to recognize your child theme.

I think, you can understand everything. There is nothing to explain. My child theme name is InstantShift but you can name your child whatever you like. Most important thing is Template: twentysixteen. This is the name of our parent theme. Make sure you spell it right.

If you are using any other theme as a parent theme, simply change Template: twentysixteen with Template: parent-theme-name.

In style sheet header we can also add more information, but it is not required. Now log in to your WordPress dashboard. Go to Appearance > Themes. You should see InstantShift theme without any screenshot, because we have not added any screenshot for our child theme.

Hover your mouse on InstantShift theme and click Theme Details button. Here is my child theme screenshot.

If you can see this screen, it means your child theme is ready. Now we can start customizing our theme. Activate this new theme and visit front end of your blog. You will see all your content without any style.

Don’t worry. It’s normal. We can not see any styles because we have not included parent themes stylesheet file. let’s make sure our child theme’s stylesheet is working. In your child theme’s style.css file add following code.

body{
     background-color: #E7F5FB;
}

save your style.css file, reload front page of your local WordPress site and your should see a light blue background color.

Registering Parent theme’s stylesheet

We don’t want to create all the styles from scratch. We will just add few new styles with child theme’s style.css file. Now let’s add parent theme’s stye.css file in our child theme.

Open functions.php file and add following code in child theme’s functions.php file.

<?php

// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //

function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Now if you will reload your local WordPress site, you will see the normal theme with all the TwentySixteen styles.

That’s all. You have successfully created your first child theme. You have also added a new background color for the body.

But we didn’t create our child theme to simply change background for body. Let’s start customizing our theme.

Overriding Parent Theme Styles

Customizing Header:

By default, Twenty Sixteen theme’s header has a lot of padding. Let’s change the padding and add the new background color for site header. Add following code in your child theme’s style.css file, save your file and reload your front end of your site to see changes.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Here you can see the screenshot for site header before and after adding our new styles.

Customizing Main Navigation

Now let’s change the background color for main navigation menu items. I like to use Chrome developer tools to edit my CSS styles.

After editing web pages with Chrome dev tools, You can copy the new code from Chrome dev tools and paste into your child theme’s style.css file.

Open your child theme’s style.css file and add following code in it.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Here you can see the screenshot of our new header. We have very easily customized our theme with child theme.

Final Words

Now you know how you can create WordPress child themes. It is very simple and easy. With the basic understanding of HTML and CSS, You can completely change the design of your site.

You can also add new navigation menus, widget areas, support for new we fonts etc with the child theme. But we can not cover everything in a single article.

If you want to learn WordPress theme development, you should start with WordPress child themes. Learn basics of theme customization.