Create a Child Theme in WordPress

Background

This site uses the beautiful Twenty Fifteen theme from WordPress.org theme as a parent theme. I needed to make some tweaks to make it more personal. In this post, I am sharing my experience on how to create a child theme in WordPress.

Child Theme in Brief

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. To understand how child themes work it is first important to understand the relationship between parent and child themes.

– WordPress Developer: Theme Handbook

A child theme in WordPress allows you to change the functionality of a theme without having to customize template files. Since the child theme is stored separately, you don’t need to redo the changes next time you update the parent theme.

How a Child Theme Work

Once a child theme is activated, WordPress will look for the template files in that child theme folder first. If the file doesn’t exist in the child theme, it will fall back to the parent theme’s files. In other words, you can override templates of your parent theme using a child theme wherever the modifications you need to make. You can override any PHP template and CSS code of your parent theme via a child theme.

Creating a Child Theme

Getting Started: Folder and CSS Stylesheet

1) Create a folder of your child’s theme first. For example, if your parent theme folder name is twentyfifteen, you can name the folder of the child theme twentyfifteenchild.

2) Create a new style.css file in your child theme folder add the following CSS codes into it:

/*
Theme Name: Twenty Fifteen Child
Description: A child theme for Twenty Fifteen theme to make it more personal
Author: Mrinal Roy
Template: twentyfifteen
*/
@import url( '../twentyfifteen/style.css' );

/* write CSS below the line to override parent theme's CSS*/

/* write CSS above the line */

3) You can override any CSS statements you have in the parent theme’s style using the above CSS file of the child theme, also can add additional CSS that your site needs.

Overriding Template Files

To override the template files in the parent theme, open the original template file and save a copy to the child theme folder with the same filename and folder structure. Basically, the file and folder structure in the child theme has to match the parent theme.

Example One:

1) Let’s say you want to edit the header.phpof the twentyfifteen theme folder,

2) Open the header.php file and save a copy in the twentyfifteenchild folder.

3) Now, open, edit and save the header.php in the child theme.

Example Two:

1) Let’s say you want to edit a file custom-header.php of the parent theme and it is stored in the inc folder.

2) Open the custom-header.php file and save a copy in the inc folder of the child theme.

3) Open, edit and save the custom-header.php in the child theme.

Overriding Functions of Parent Theme

To override any functions of your parent theme, you can create a functions.php file in the child theme folder. It will load before the parent theme’s functions.php file and override any functions you modified in the child theme.

<?php

/* custom functions below this line */

/* custom functions above this line */

Conclusion

Creating a child theme in WordPress is really easy and it’s the best and most convenient way to make modifications to your parent theme without touching it. I hope this post helps you to do that on your WordPress site. If you have any questions let me know in the comments. Hope these simple steps helped you to understand the creation of a child theme. You should also check out the official handbook on WordPress Child Themes and Theme Functions.

P.S.

You can create the same site as this with the child theme I created. Twenty Fifteen Personal is the name of the theme and it’s free and open-sourced. Have a look at this post and the Github repository of the Twenty Fifteen Personal theme.