How to create a TwentySixteen Child Theme in WordPress

create-a-wordpress-child-theme

how to create a WordPress child theme

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.

9 Comments

  1. kietygory on September 14, 2016 at 11:31 am

    Thanks for the instructions. It helped me to create child template.

    Here are few comments from a 2 days WP beginner:

    In functions.php script – good to include . This is obvious for anyone known to doing website, but since this my 2nd day with WP, i just copied and paste and functions.php did not work.

    Did not understand your note on @import. What i did was to add this line to the style.css. It worked. This is what they showed in another website.

    Add a comment that to change parent template, need to copy original parent files and add on to child folder in exactly same way.

    Thanks.

    • kietygory on September 14, 2016 at 11:34 am

      some reason, it does not show the end of 1st sentence. Lets see if this work – I meant good to include the ”

  2. Bahawalpur on January 22, 2016 at 10:17 am

    I am going to use change the theme on my website after a long time. Twenty Sixteen looks better than fifteen considering the option to remove the sidebar.

  3. Thomas on January 13, 2016 at 11:25 pm

    Thanks! Good step by step explanations. Keep up the good work!

  4. Salma on April 5, 2015 at 2:08 pm

    I followed all your steps and created a child theme. However, none of the parent theme formatting, etc was imported. What went wrong?

    • Neil Gee on April 5, 2015 at 10:43 pm

      Post the top info of your style.css and lets have a look

  5. Glenn Cowan on April 16, 2012 at 1:41 pm

    Hi,

    Thanks so much for sharing, for once an easy to understand guide for WordPress newbies! ^_^

    • swapnil on September 8, 2015 at 6:27 am

      Thank you…..

  6. […] how to create a wordpress 3 child theme Share this:TwitterFacebookLike this:LikeBe the first to like this post. […]

Leave a Comment





%d bloggers like this: