Ross on
22nd February 2015

WordPress Child Themes in 10 Minutes or less!

Over the years – we must have created hundreds of child themes for use on WordPress sites we’ve made for clients and customers. They have been a vital component of our day to day work with WordPress and they are important – however, recently the guidelines for using them have changed, but, what are Child Themes and why should you be using them?!

So – when you upload a new theme to your WordPress site – your instant reaction is to start customising it and changing settings, right?

Why should you be using a child theme?

In short, a child theme is just that – a child of a parent theme. So, let’s say we’ve installed WordPress and have uploaded a theme. Without any further customisation, any changes we now make will be made to the parent theme. Why is that bad? Well, let’s say that in a months time, the theme developer releases a huge update to the theme with new features and maybe even kittens with lasers. (It could happen people?!) You’d just love to apply this update, but doing so will overwrite all the changes you lovingly crafted and sweated over for hours when building the site initially. The solution is to use a child theme.

Let’s create a child theme!

Setting up a child theme is fairly simple and shouldn’t take you any more than 10 minutes. If you do this regularly, like we do at Design33, you may find it useful to create some templates that you can use over and over again – we store them on our work drive, then just edit them when we’re setting up a new site. Tools you will need are :

FTP access
A parent theme (2015 or 2014 will do)
A text/code editor

The first step is to decide which Parent theme we will be using. In our example, we’ll be using the 2014 theme.

So open your FTP client, navigate to the wp-content/themes folder and create a new folder for your child theme to live in.

Adding the CSS

The next step is to create our child themes stylesheet. This is where we will write our CSS rules which will survive any updates to the parent theme! So, in your text editor, open a new file paste in the following :


/*
Theme Name: Design33 Child Theme
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: Design33
Author URI: http://www.design33.net
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/

Adjust the lines of code accordingly, for example if you are working with a different parent theme, make sure you use it’s name and not twentyfourteen. Save this file as style.css and upload it to the child theme directory.

Adding functions.php

Next, we need to enqueue the parent and child style sheets. In the olden days, we used to use the @import: method to import the child stylesheet. However, this is no longer considered best practice. Instead, we need a small snippit of php to do the work for us. So, open a new file in your code editor and inside a new PHP block, paste in the following :

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

Save this file as functions.php and upload it to your child theme directory.

Hurrah! Your child theme is ready!

Now, login to the WordPress admin area and navigate to Appearance -> Themes There, you’ll see your shiny new child theme, all ready to activate and use. If you want to give it an image that shows in the Themes selector panel, simply create a file in Photoshop (or other image editing app) called screenshot.png

Finally…

The process for creating child themes has changed a bit – in that you simply cannot use the @import: method any more. This caught us out when we went to create a child theme – hopefully, this post has been helpful if you’ve found the same! Feel free to leave any feedback in the comments below!