What is a WordPress Child Theme?

WordPress comes in two flavours. WordPress as a service which you can use at WordPress.com and WordPress software which you can install and use on your web server. I love the version of WordPress you host yourself.  Why? Because it allows you to extend what your website can do, almost infinitely. Even themes – which define the way your site looks – can be restyled according to your taste.

Because you are hosting your WordPress site, you can edit your themes (something you can’t do on the WordPress service). But as you probably know already, theme authors are always improving their WordPress themes, which they release as updates. WordPress Theme updates can add or repair functions, or the changes could introduce security patches for flawed software code.

So when these updates arrive, you may find yourself in a pickle. You need the update, but updating your theme will undo your theme changes.

WordPress Child Themes are useful for this very reason. Child themes add extra ‘layers’ of functionality and style to your theme without modifying the original theme code at all.

A Child Theme has its own theme folder in your theme directory, and it references your original theme but adds your new functionality on top. Think of it a bit like icing on the cake. You could just have the cake, but the tasty sugar frosting makes it so much nicer to eat!

So if you want to modify a Theme file, you make a copy and place it in your Child Theme folder and then make your changes. When WordPress sees a child theme, it knows that files in a Child Theme take precedence over the original.

How to create a Child Theme for WordPress

To create a Child Theme, make a new folder in your Themes folder.  If your theme is called ‘Canvas’ then you might call this folder ‘Canvas-child’.

Next, you create two files – a stylesheet (called style.css) and a Theme Functions file (called functions.php). That’s all you need. Anything else you add to this folder is up to you. Add style changes to your style.css file, and any new functions to your Child Theme functions.php file.

Create a header in your Child Theme stylesheet file (called style.css), so that WordPress will recognise the Child theme. Typically it will look like this:

 

 

2015-10-21_17-24-19

The Theme Name is what appears in Appearance > Themes. The correct syntax is “Child theme for…” followed by the name of your original Theme.

The @import url defines the location of the style sheet of your original theme, which is how WordPress ‘connects’ your Child Theme to the primary theme. Once defined, WordPress can then overlay your changed elements over the top of the original theme.

If you don’t have @import url, WordPress would recognise your Child Theme as a brand new theme. If you only had style.css and functions.php then your theme wouldn’t operate correctly.

 

2015-10-21_17-27-21

Your functions file is even simpler.  Add additional functions beyond the line:

add_action( 'wp_head', 'favicon_link' );

Working with a Child Theme in WordPress

Now – you can modify any aspect of your original theme, by copying relevant files to your child theme, editing them, then uploading them to your server.  Remember that your child theme must have it’s own new theme folder.  The naming convention for the folder is [theme name]-child.

You can find out more about WordPress Child themes in the WordPress codex here: https://codex.wordpress.org/Child_Themes.

 

Share on facebook
Share on twitter
Share on linkedin