How to create a TwentySixteen Child Theme in WordPress

A Child Theme in WordPress is a theme that takes all the juice out of its parent without doing much itself, pretty much like regular kids. This guide explains what a Child Theme is and how to create one from a parent theme using the latest version of WordPress using the theme TwentySixteen.

The core benefit of a child theme is that is if you have found a theme you like and want to make minor/major changes to it, you can do so with the safety that if the parent theme is upgraded your changes will stay intact.

If you didn’t make a child theme of a parent and instead worked directly on the parent theme – and one day the parent theme is updated, similar to how a plugin is updated – then your changes are over written and you become not a happy camper.

So I guess what I am trying to say – is always make a child theme.

OK so how do you make a child theme?

All themes in WordPress are filed in your folder structure under the /wp-content > themes  path:

/public_html/wp-content/themes/

Check it out with your FTP software, (your web root may also be known as ‘htdocs’) – In the themes folder  you will find the default themes such as TwentySixteen and TwentyFourteen, do you see a pattern here? this all started with TwentyTen and theses themes have been the default theme on a generic WordPress installation.

All you have to do is to create a folder named anything you like, but keep file naming convention to lowercase and no spaces. In this example I will be using the highly original name of ‘childtwentysixteen‘, so the path to the folder is like so:

public_html/wp-content/themes/childtwentysixteen

Create the style.css file

There is only one minimum file that you need in your folder to create a real child theme and that is a file named ‘style.css‘, create this file with a plain text editor either NotePad or Text Edit or something similar all attempts to use Microsoft Orifice need to be strictly prohibited. So far we have a file in a folder:

public_html/wp-content/themes/childoftwentysixteen/style.css

The important thing is what is added to the style.css file, and what it is, is a description of the theme and a link to the parent theme :

/*
Theme Name: yourchildthemename-can-be-anything-you-like
Theme URI: http://www.greatwebsite.com
Description: Designed by <a href="http://www.greatwebsite.com">Neil Gee</a>.
Author: Neil Gee
Version: 1.0.0
Template: twentysixteen
Tags: bold purple clean & elegant and just peachy

*/

Keep each line separate and fill in your details – the important line is the Template line, this links the child to the parent and in this case I using the twentysixteen theme as my parent. Which is filed alongside my theme in the themes folder.

The 2 required lines in the comments are Theme Name and Template – the others are optional.

So for additional CSS styles to your child theme just add them in after the comment ending in  */. You’ll still need to reference the parent themes styles as outlined below.

To get extra creative with your work, you can add a graphic for your childtheme, create a file called screenshot.png at 880×660 pixels (use to be 300 x 225 pixels), fill it with your Photoshop finest and file it in your childtheme folder called ‘screenshot.png‘.

Referencing the Parent CSS Style

Create one more file  in the child theme called functions.php , essentially this is where all the PHP customisations go including referencing any CSS or javascript files.

So create a functions.php file in your child theme and include the below…

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

You don’t need to change anything and now your parent CSS stylesheet will load more efficiently.

Note on @import rule

Previously it was more common place to import the parent themes CSS stylesheet by using the @import rule, nowadays it is deemed inefficient to use the @import rule to import CSS style sheets, this is to do with the way it downloads the resource by hogging the pipe, a preferable solution is to reference CSS style sheet via a link.

@import url('../twentytwelve/style.css');

 

Switch WordPress over to the Child Theme

That’s all your hard back-end work done – to choose it from the front end log into WordPress, go to Appearance > Themes and switch over to your master piece. Now you can start to customize your child theme and not worry when an upgrade is released for the parent theme.