Drupal theme hacking - creating a sub-theme

In a previous blog post I introduced the basics of how Drupal themes work. Let’s dig a bit deeper and create our own sub-theme. What you need, is a working Drupal environment and at least one custom theme installed in sites/all/themes. During this tutorial I will create a sub-theme for the Colourise theme. If you want to use a different starting theme, the explanation below should still apply (apart from the name of the parent theme).

The sub-theme I want to design is based on the Colourise theme, and will be used for my ShutterFreak.net website, hence the very original theme name “ShutterFreak Colourise”

The first step in creating a Drupal theme (or a Drupal sub-theme), is creating a theme directory in sites/all/themes. If you manage a theme and all of its subthemes, then it makes sense to create the sub-theme directory as a subdirectory of the parent theme. This is not at all a hard requirement. I decided to create the sub-theme directory on the same level as the parent theme’s, hence the “ShutterFreak Colourise” theme resides in sites/all/themes/shutterfreak_colourise.

Next we have to create the ‘theme info file’ in the theme directory. I named this file shutterfreak_colourise.info. The format of this file is “KEY = VALUE”. Lines that start with a semicolon (‘;’) are comments. At the very minimum, this file should contain this:

; $Id: $
name = ShutterFreak Colourise
description = Dark tableless design with valid XHTML/CSS, based on the Colourise theme.
version = 0.1
core = 6.x
engine = phptemplate
base theme = colourise

What does this mean?

1. $id: $ is a CVS or SVN placeholder. When this file gets checked in, this placeholder will automatically be replaced with basic versioning and tracking information from the source code control system. Since this line starts with a semicolon it is treated as a comment by the parser.
2. name specifies the human readable name of the theme. This name appears in admin/build/theme.
3. description gives basic information about the theme. If it depends on another theme, make sure to specify this here, preferably with a link to the parent theme.
4. version is the version of your sub-theme.
5. core represents the core Drupal version your theme works for. For Drupal 6, this value is 6.x.
6. engine represents the theme engine that applies to this theme. The built-in Drupal theme engine is phptemplate.
7. base theme is the most important statement here: it specifies the relationship between the “ShutterFreak Colourise” theme and the parent theme: Colourise.

The last finishing touch you may want to do, is adding a custom favicon. There are various on-line resources that accept an image and will transform it for you into a valid favicon.ico file. The favicon for your theme must reside in the theme directory. In my situation it resides at sites/all/themes/shutterfreak_colourise/favicon.ico.

Now it is time to try out your first sub-theme: navigate to admin/build/theme, enable your theme, and behold! Now you can start playing around with blocks and position them in your theme.

In a next post we’ll dig still a bit deeper in how to develop a Drupal theme. Time to write some PHP code by then