Using Child Themes

Using a free or premium theme is a great time-saver, even if you do know how to code your own theme. Using one where the theme developer keeps it up to date and releases new versions is even better. However, we all like to make our own little changes to our theme, so when a new release of the theme comes out it’s a bit of a pain having to redo all those changes again.

This is where child themes come in handy. The main theme is in its own theme directory as usual, this is the parent theme, and then your modifications sit in a separate theme directory and will override the parent theme where necessary. This way if you just want to change the styles or perhaps the way the header is displayed, you just copy over the files you wish to modify, change those and the original theme stays intact in the parent directory.

As with any theme, a child theme will always need a style.css file with the typical header to specify the theme details, plus one extra line to tell WordPress what its parent theme is e.g.

/*
Theme Name: Blog Themes Club
Theme URI: http://www.blogthemesclub.com/
Description: Child Theme built off Profectus
Version: 1.0
Author: BTC
Author URI: http://www.blogthemesclub.com/
Template: Profectus
*/

This, as you can see, is the theme details for the theme on Blog Themes Club. We’ve got our Profectus theme as the parent theme and then our own child theme to override certain sections.

We need one extra line in this style.css file to import all the styles from the parent theme as these do not get imported over by default. This is a standard CSS import line i.e.

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

Then any additional styles for your theme can just go below all of this, along with anything you want to override in the parent styles. To override code in one of the theme files simply copy the file over to your child theme and make your changes in that. WordPress will automatically look for the files in the child theme before then going to the parent theme.

Of course if you update a theme file that gets updated in an upgrade then you will need to copy those updates over, but this is a much simpler way to keep your changes separate and to be clear on what files you have changed and what you haven’t.

Twitter Icon

Tweet This Post

No Responses so far | Have Your Say!

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Our Blog