Tag Archives: stylesheet

How to Create a WordPress Child Theme CodeUnit 13 JUN 2011

To create a WordPress child theme of another existing theme turns out to be quite simple to achieve. If you haven’t heard of child themes yet, basically a child theme is an extension of an existing theme, which allows you to make changes to the parent theme without actually editing any of the files of that theme. For object-orientated programmers, you will recognise this concept as being that of inheritance.

So how do we do this?

Well to create a child theme is nothing more than making a new theme folder and then putting a specially formatted CSS file in it.

So using the default WordPress TwentyTen theme as an example, let’s do this. First, create a new folder called twentyten-child in your /wp-content/themes directory. In it, create a blank css file called style.css (your theme’s main stylesheet always needs to be named as such).

Now a child theme can contain as little as a single .css file, or as much as a fully fledged wordpress site, including things like functions.php, template files and just about anything else you can think of! But because the style.css file is what defines a child theme, let’s focus on that.

Opening up the style.css file of a child theme we will see something like this at the top of the file:

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/

Most of the descriptors are pretty self-explanatory, but note the Template: declaration. It is this one line that marks this style.css file as being a child theme, in this case of a theme named twentyten, or rather contained in /wp-content/themes/twentyten

Now when it comes to the functions.php file, inheritance takes over and everything that is available in the parent theme is available to you in your child theme without having to redeclare it. However, the stylesheet is different in that nothing from the parent theme is carried over. If you are creating a child theme just to make small visual adjustments to the theme, then you can either copy the parent style.css into your child theme’s style.css file, or you can make use of the import rule which looks like this:

/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme 
Author: Your name here
Template: twentyten
*/

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

Note that no CSS rules can appear above the import line or else it will be invalidated.

And that is how simple it is to create a child theme. For more reading on actually tweaking the theme, be sure to check out the almight WordPress Codex!

Related Link: http://codex.wordpress.org/Child_Themes

Don’t Touch Me on My Site – A Retouch My Life 28 APR 2010

Just a note, I may be a little delayed in getting new material up on this site over the next while. You see, my creative muse simply can no longer stand my inactivity towards all the websites I’m responsible for and as such I’ve started a campaign which will see me go through the sites one by one, improve upon their functionality, fix any outstanding bugs, populate with content where necessary and most important of all – give them a proper visual makeover.

This public holiday past has seen the albeit recently updated CodeUnit of Craig undergo a new facelift – with nice clean results – as well as a full content, functionality and stylesheet plus images update for the slightly neglected Funakoshi Karate International SA website. (Obviously a good old Ctrl+F5 button press will be needed for a forced cache clear refresh!)

Needless to say, if you’ve been over to The House of C lately then you’ll know that it still desperately needs a major facelift (my project for this weekend) and last but not least, you can expect the Rugged Rock of Craig to undergo a nice transformation as well – most likely in a pretty similar vein to that of the CodeUnit site.

So what does all of this mean to you, my loyal reader (and me, as a post-it note reminder)? Well all I’m saying is I might miss a day or two of updates along the way. I don’t plan on it, but hey, you never know – I’ve got priorities and things like babies to make you after all! :P

The new look CodeUnit of Craig site...

Funakoshi Karate International SA's site is filling out pretty nicely...

A Retouch or Two CodeUnit 28 APR 2010

So yesterday was Freedom Day, an important (aren’t they all) public holiday on the South African calendar and one which you can see I made good use of in terms of tinkering a bit with my CodeUnit site (not to mention sleeping in, watching Batman: Brave and the Bold, going for a walk with my wife along the beach and enjoying a nice follow-up lunch on the deck at Bertie’s Mooring).

Yes, yes, I hear you, yet another “meta” post that doesn’t contain any tech, code or website info and yes, I know I kind of just upgraded the site’s look and feel pretty damn recently – but hey, sue me, I change my mind – and preferences – quite a bit! :P

Also, it is pretty important to let all of you regular readers know that you need to press Ctrl+F5 to force a cache refresh of the page in order to see all the new stylesheet and image changes.

C’mon, it’s definitely worth it.

Now the CodeUnit of Craig feels all nice and clean and pretty – far better than that grungy feel I was going with last time around! :P