WordPress Theme Inheritance

The WordPress template system has a relatively unused gem in the template system, Theme Inheritance. Theme Inheritance allows you to set your theme to inherit files from a parent theme, meaning you could create your theme in the colours you choose, but then you can create a number of new themes with just a stylesheet in them, and set each stylesheet to inherit from the main theme, and then just override the styles set.

So, if we use the example of having perhaps 6 different theme styles on one site, and offering user’s a style switcher to select which one they preferred to see. Often people may just have the 6 themes online, each directory having the index.php theme file, the functions, page, archive, category, single and comments template files. That’s fine until a new version comes out of WordPress, there are maybe a few new tags you can use, or you decide you want to add a bit of code to say the footer of your site. 6 themes may not be so bad, but if you run a multi author blog, perhaps on WordPress MU, then try changing 6 to 60. Suddenly it’s not so good!

Our main theme (we’ll call it ‘Parent’), would consist of all the theme files we need. The typical files being:

  • style.css
  • index.php
  • archive.php
  • single.php
  • page.php
  • comments.php
  • sidebar.php
  • header.php
  • footer.php
  • functions.php

Of course you may have additional files as well, but those are a selection of the most common theme files. To define the theme, the style.css file will have the following at the top of it:

[sourcecode language=”css”]/*
Theme Name: Parent
Theme URI: http://www.mysite.com/
Description: The default Parent theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
*/[/sourcecode]

We would then put this theme directory in the usual place under /wp-content/themes/.

Now we can move on to creating a child theme. So for example, our parent theme is quite plain, standard letter sizes and black and white. We can then create one child theme that uses a variety of colours, and a second theme that increases the size of the font and allows the site design/layout to work with the increased font size. So for the first child theme we could call this one Rainbow, and tell it to inherit from the parent theme. We would create a new stylesheet for the Rainbow theme, and at the top of style.css we would place

[sourcecode language=”css”]/*
Theme Name: Rainbow
Theme URI: http://www.mysite.com/
Description: The Rainbow child theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
Template: parent
*/[/sourcecode]

The additional line in this to tell the theme where to inherit from is the last line ‘Template: parent’. The template name should refer to the directory that the theme is stored in, and it’s case sensitive.

You can then set all of your styling in this style.css file for the site and upload it to a new theme directory called ‘rainbow’. If you wanted to inherit the styles from the parent theme then you would need to import the parent stylesheet in, then add your own CSS below to override any styles necessary. So you can add:

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

below the top comment in the file.

Then we’ll create our second stylesheet, for increasing the overall size of the site (yes a well coded site shouldn’t require a second stylesheet to increase the text size and size of the site, but this is only an example!). This one we’ll call Large B&W. So again we do the same as above in our new style.css file

[sourcecode language=”css”]/*
Theme Name: Large B&W
Theme URI: http://www.mysite.com/
Description: The Large Black and White child theme from mysite
Version: 1.0
Author: Me
Author URI: http://www.mysite.com/
Template: parent
*/
@import url(“../parent/style.css”);[/sourcecode]

We then put this into a directory called largebw.

Our themes directory would now look like

  1. parent
    • style.css
    • index.php
    • archive.php
    • single.php
    • page.php
    • comments.php
    • sidebar.php
    • header.php
    • footer.php
    • functions.php
  2. rainbow
    • style.css
  3. largebw
    • style.css

Up until WordPress 2.7 that was all we could do. It served a purpose, but was obviously limiting in its usefulness for most people. However, since WordPress 2.7, you can now also add PHP theme files in your child directories to override the parent’s where necessary. So, for example, if you wanted to put an advert in your Large B&W single post theme file for a screen reader, then you would take a copy of the single.php file from the parent theme, add in the additional code for your advert, and then put this into your largebw theme directory. This directory would then have the files style.css and single.php, the other theme files would inherit from the parent directory.

You may still wonder if this is of any use to you. If you decide to purchase a theme (or find one for free at WordPress) then you would hope that the theme be kept up to date with the newest WordPress additions and functions. Yet, you may want to make some changes to it to suit your own style. Perhaps change the sidebar to use h3 on headings instead of h2, maybe change the header to have a big advert across the top, or maybe add a flickr badge in the footer. However, when the theme is upgraded, you have to do this all again – which usually means it’s unlikely you’ll upgrade your theme! With Theme Inheritance, you can create your child theme to inherit the untouched theme and then you can just copy the files you want to change into it, make your alterations, and leave the rest as normal. Yes you would still have to make a few alterations possibly on upgrading the theme, but it wouldn’t be as much hassle.

So, hopefully now you can see the potential for using child themes on your site, regardless of whether you have one theme or many, it has a use that is not widely used yet but I’m sure will be in the future 🙂

  •  
  •  
  •  
  •  
  •  

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.