Tag Archives: theme

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

jQuery DataTables: How to Use jQuery ThemeRoller CSS Styling on Your Table CodeUnit 11 AUG 2010

Widget styling is a long, laborious and tedious job for the most part, which is exactly why it is so great that the guys behind jQuery UI came up with the ThemeRoller concept which basically enforces a strict set of rules in terms of generic widget class styling.

As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!

To enable jQuery UI ThemeRoller support in your datatable, simply add the following option during construction:

$(document).ready( function() {
	$('#example').dataTable( {
		"bJQueryUI": true
	} );
} );

And that is all there is to it. Make sure you include a ThemeRoller stylesheet link in your page and your nifty DataTables implementation should be using all those nifty ThemeRoller styling elements!

Nice! :)

Snow White (Version 2) Blogging 27 JUN 2008

Seeing as I got 20 comments the last time I updated the site to its current ‘all white’ state, most of which were negative, I’ve decided to appease some of those naysayers by making a slight difference to the current Snow White theme – by adding a big red border around everything.

There, I hope you are happy now.

P.S. I also fiddled with the menu layout just a touch and added some fairly unobtrusive Google Ads to the bottom of the pages in the hopes that the little bit of generated income it might bring in will offset the cost of now hosting my blog privately just a little.

See, and people say that I don’t care about my loyal readership – all three or four of them.

Blog word.

Snow White Blogging 26 MAY 2008

No, don’t look so surprised. Yes, you are still on the CodeUnit blog, and yes, it does look different today. Simply put, on the spur of the moment I have decided that variety is the spice of life and have therefore whipped up this blindingly brilliant fourth ever skin to the site – in exactly five minutes.

Hope you like it.

And no, I’m not going to change it even if it does now hurt your eyes to look at.

Besides…I kind of like it :)

Blog word.