Creating a “child theme”

[]

Here’s the scenario: you’ve found a theme on the WordPress Theme Directory (yes, before you ask, it’s best not to grab any old theme from the web but stick to trusted sources like this…) and installed it on your wordpress.org self-hosted site.

Things are looking good – but there’s a couple of things that are bugging you about the theme you’ve chosen – maybe you want a different font or your museum logo in a different place in the header..

In this scenario, the obvious thing to do is to find the relevant files, get in there and start editing. Tweak the CSS, fiddle with header.php. Lovely.

The problem is this: the next time that theme gets an update (and it probably will, because that’s what theme developers like to do) you’ll then see the little “update” icon appear, and WordPress will prompt you to download and update the theme. And when you do (and yes, it’s vital that you keep stuff up to date rather than ignoring it..) – all your tweaks will get overwritten as the new files replace the ones you’ve made changes to.

There are four responses to this:

  1. Ignore the update (noooooo! always, always, always – did I mention ALWAYS – keep your plugins and themes up to date – it’s vital for the security and integrity of your site….)
  2. Run the update but then re-upload the changed files (nooo! what a terrible pain in the neck…!)
  3. Open the theme style.css file and overwrite the version number to something silly like 999 so WordPress doesn’t think it needs updating (noooo! …see 1.)
  4. Create a child theme (yay!)

So….what is a Child Theme?

A Child Theme is a way of essentially inheriting the functions and styling of another (parent) theme. The easiest way to think of it is that WordPress processes the parent theme but uses any files you’ve added into the child theme folder instead of the original ones.

So in our example above – where we wanted to edit something in the header.php file – we’d make a copy of the original header file in the parent theme, copy it into our child theme folder and then make our edits there rather than in the original file. If the parent theme updates? No problem, our amended files are kept safe in our child theme directory.

Making a Child Theme

Creating a Child Theme is super-easy, much easier than creating a brand new WordPress theme from scratch – and actually a really easy way of getting to understand what all the files in a normal theme directory do. The details below are a simplified version of the guide you’ll find on the Codex.

Step 1: create a Child Theme directory

  • Navigate to your themes directory at /wp-content/themes.
  • Create a new directory, and call it something useful (the Codex suggests [parent-child] as a name, for instance twentyfifteen-child just to keep track)

Step 2: create a style.css file

  • Inside this directory, make a file called style.css
  • Open it, and add the following:
/*
 Theme Name: Twenty Fifteen Child
 Theme URI: http://example.com/twenty-fifteen-child/
 Description: Twenty Fifteen Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: twentyfifteen
 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-fifteen-child
*/
  • Edit this as required – so if your parent theme is called somealmostnicetheme then change the Template line to match so WordPress knows where to look for the parent

Now at this stage you’re ready to rock – but if you’re doing things the right way then you also need to add a functions.php file in order to enqueue the stylesheets properly. Enqueuing is a method WordPress uses to add dependent files like styles and javascript in an intelligent way. You can (if you’re a bad person) just drop in links to these in your header – but the enqueuing method makes it very much less likely that plugins will interfere with your theme.

Step 3: create a functions.php file

  • Still in your child theme folder, make a new functions.php file
  • Add the following, between PHP <?php **** ?> tags:
function theme_enqueue_styles() {$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Step 4: activate your theme

That’s it! Now you can login to your dashboard, navigate to Appearance > Themes and activate your child theme. If you now look at the front end of your site you should see the exact same thing as the parent theme but with your edits included.

If you now spot anything you want to change on your site the easiest way is to:

a) Identify which file needs changing – this takes a bit of practice but the main ones to look out for are:

index.php – the main “loop” template, so often the one that shows post listings
page.php – the main “page” template, so normally the default page view
front-page.php – the front page template, suprisingly
single.php – a single post

…there are lots more and we haven’t had a discussion about the template hierarchy yet..

b) Copy the existing file from the parent, into your Child Theme, and edit if there.

That’s it!

This may seem overwhelming – but it’s actually hugely satisfying because it lets you borrow themes which you almost like and then tweak them so they totally fit your needs, without having to get into the real grunt work of creating a theme from scratch.

The main thing is to play – do this on a site locally or somewhere where it doesn’t matter if you break things…