Create a child theme in WordPress

In the last WordPress post we looked at how to get up and running on a local server. Next we're going to take a look at how to get stuck in with creating your own theme, step by step.

Why use a child theme?

There's plenty of reasons why you might want to create a WordPress theme from scratch, but creating what is known as a 'Child theme' can save you a bit of leg work when you're getting started. Why? Themes like the default 'twentythirteen' will have a lot of functionality already built in - like being responsive so it works on multiple devices, allowing you to focus on the branding / styling of your site. Here's some of the advantages of starting with a child theme:

  • Not starting from scratch will speed up your development time
  • Allows you to take an existing theme and make minor modifications
  • Tried and tested - twentythirteen for example is distributed with every version of WordPress so you know it's reliable

Taking the quick route always has it's downsides though, so to give a balanced argument it's worth noting there will be a mild performance reduction as WordPress will be looking in more than one location for your files (and files will be imported from others). Using more complex parent themes may also mean you're starting with functionality you may not need. For this reason the default 'twentythirteen' is a great starting point as it's fairly light-weight. 

Getting started - the setup 

Structure

Inside the wp-content > themes folder you'll find all the themes that are currently available for you to use. Add a new folder here titled with your new theme name, and inside create a new file titled 'style.css'

The Style File - style.css

The style file defines some of the default information that WordPress needs to know to register your theme. Here's a default template:

/*
Theme Name:     My Child Theme
Theme URI:      www.mychildtheme.com
Description:    It's going to be awesome!
Author:         David Bainbridge
Author URI:     www.davidbainbridge.net
Template:       twentythirteen
Version:        1
*/

So a couple of important things to note here, firstly this information has be be placed in /* comment tags */ so that it is ignored by the actual css, and secondly that the 'Template:' refers to the parent theme that we will be building on. 

Enable your theme

Just with this folder and CSS file you can now enable your theme. To do this login to the admin panel at /wp-admin and go to 'Appearance' > 'Themes'. You should see your theme as an option - click 'Activate'. If you go back to your home page now you should see that it's a total mess. The reason for this is that the site no longer has any CSS styling, so what we're going to do now is inherit the styling from our parent theme. To do this, add the following to your style.css file:

@import url("../twentythirteen/style.css");

Take a look at your home page now, and you'll see we're back to where we started in terms of styling. The benefit now though, is that we can override the parent theme without modifying it directly - any CSS that you place in your style.css file will take presedence over anything in the parent.

Override the template files

WordPress will look in your new theme folder for any of the template files before trying to look in the parent folder, this allows you to easily override the structure or content. As an example, let's say we wanted to simplify the footer - simply copy 'footer.php' from the parent theme folder into your new theme folder and then you can start making amendments to the code without affecting the parent.

Add / override functions.php

To add or override functionality via WordPress hooks, simply add a functions.php file to your theme folder as well. Note that the functions.php file doesn't take precedence over the parent functions.php file. The child functions.php is included first and then the parent functions.php. You can use the parent file functions but you can't override the parent theme functions unless they have a function_exists round them.

if(!function_exists('new_function'))
{
     function new_function()
     {

     }
}

Useful Tips

Getting your child theme path

Referencing the path to your child theme is different to how you would do it for the parent. Here's the two different methods you would use:

// Parent theme
get_template_directory_uri()

// Child theme
get_stylesheet_directory_uri()  

Set a static home page

This is one of the most common questions when getting started with WordPress - how do I customise the home page? By default it will show a list of all your posts, to override this so you can start customising your child theme home page follow these instructions:

Go to 'Settings' > 'Reading' and you'll see by default the front page is set to display your latest posts. Simply switch this to 'A static page' and choose from the drop down which page (from the pages section) you would like to use. 

And that's it, you can now customise the styling and code on your own theme with the benefit of using an existing parent configuration. 

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.