Step By Step Instructions on how to Create a Drupal Sub Theme

About Sub Themes

Sub themes or child themes are an important concept in web site development on any platform which uses themes or templates to define the overall look and feel of a site. A theme is a template website created by a skilled web developer who puts together the structure, features and styling of a site. The developer makes this theme publicly available for website “builders” to download and install in their Drupal, WordPress Joomla or other CMS setup. The website builder then needs only to make a few tweaks to the template and add content to the site in order to quickly get a full site up and running.

Every once in a while the developer might make changes to the theme and release a theme update. If the website builder using the theme has changed any of the theme’s files, he may find that once the update is installed, his modifications are over-written. Using sub themes or child themes are very effective way to avoid losing work in this way.

A sub theme or child theme is basically a copy of the parts of the original theme which the web site builder would like to change. The original theme may contain 400 files of which you may wish to only change 1 file, say the main css file. Instead then of copying all 400 files to a sub theme, you would create a sub theme with a couple of config files and a css file to capture the directives you wish to add or change. If there the theme developer releases an update your sub theme will continue to load any changes you made in addition to the modifications made by the update.

Step by Step Instructions on how to Create a Drupal Sub Theme
What follows will provide step by step instructions on how to create a sub – theme in Drupal. Separate articles will be made available soon for WordPress child-themes, MODx, Joomla and other CMSs’.

This guide will be based on a fictitious site named mysite.com which uses a default theme called origtheme. The example commands require that a Linux terminal shell window to the web server is used most likely using ssh.

Create a new sub-theme folder
Create a new folder in the folder in which the original theme is located e.g. commands
cd mysite/sites/all/themes/ mkdir origtheme_child

Note: The sub-theme folder must have a different name to the main theme and will be used as the sub-theme internal name (i.e. the name used by Drupal), so must not contain any spaces. The name of your sub-theme must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.
Copy the original theme’s .info file to your sub theme’s folder
To link your sub theme to the original theme and to get the base settings from the original theme, you need to copy the .info file from the original theme’s folder into your sub theme’s folder. In this case we would copy origtheme/origtheme.info to origtheme_child/origtheme_child.info e.g. commands
cp origtheme/origtheme.info to origtheme_child/origtheme_child.info
Modify the sub theme’s .info file
So that the sub theme inherits the parent theme’s attributes the base theme command must be added to the sub theme .info file.
base theme = origtheme

To give people a little bit of info about your sub theme make sure it contains the following entries…
name = origtheme_child description = This is a sub theme of origtheme by Herb Williams for website mysite.com core = 7.x base theme = origtheme

As the sections below indicate, the sub-theme inherits most properties of the base theme. The important exceptions are regions, core version, and color info. You probably want to copy the regions section of your base theme’s info file, along with its core version declaration. If your base theme supports the color module and you’d like your sub-theme to support it, you probably also want to copy the color folder from your base theme and add the line from your base theme’s info file to your sub-themes info file that looks like

stylesheets[all][] = css/colors.css

and then copy the colors.css from you base theme to the css folder of your sub-theme.

Style sheet inheritance

All style sheets defined in the parent theme will be inherited, as long as you declare at least one stylesheet in your sub-theme’s .info file. You must declare at least one stylesheet in your sub-theme for any of the parent theme’s stylesheets to be inherited.

Overriding inherited style sheets: Specify a style sheet with the same filename in the sub-theme. For instance, to override style.css inherited from a parent theme, add the following line to your sub-theme’s .info file:

stylesheets[all][] = style.css

You will also need to create the style.css stylesheet file; if you simply wish to disable the imported styles, you can create an empty file.

JavaScript inheritance

All JavaScripts defined in the parent theme will be inherited.

Overriding inherited JavaScript: Specify a JavaScript file with the same filename in the sub-theme’s .info file. For instance, to override script.js inherited from a parent theme, add the following line to your sub-theme’s .info file:

scripts[] = script.js

You will also need to create the script.js file; if you simply wish to disable the imported scripts, you can create an empty file.

Template.php function inheritance

Anything defined in the parent theme’s template.php file will be inherited. This includes theme function overrides, preprocess functions and anything else in that file. Each sub-theme should also have its own template.php file, where you can add additional functions or override functions from the parent theme.

There are two main types of functions in template.php: theme function overrides and preprocess functions. The template system handles these two types in very different ways.

Theme functions are called through theme(‘[hook]’, $var, …). When a sub-theme overrides a theme function, no other version of that theme function is called.

On the other hand, preprocess functions are called before processing a .tpl file. For instance, [theme]_preprocess_page is called before page.tpl.php is rendered. Unlike theme functions, preprocess functions are not overridden in a sub-theme. Instead, the parent theme preprocess function will be called first, and the sub-theme preprocess function will be called next.

There is no way to prevent all functions in the parent theme from being inherited. As stated above, it is possible to override parent theme functions. However, the only way to remove a parent theme’s preprocess function is through hook_theme_registry_alter().

Page, node, block and other template (.tpl.php) file inheritance

Drupal provides a large set of files that themes can use to inherit properties. By specifying a particular file name and or structure, this allows the theme to override or inherit a template. For more information on this review working with template suggestions

Drupal 7 Any .tpl.php files from the parent theme will be inherited. You can add template files with more specificity — for instance, node–blog.tpl.php building on an inherited node.tpl.php.

A single hyphen is still used to separate words: for example, “user-picture.tpl.php” or “node–long-content-type-name.tpl.php”, so the double hyphen always indicates a more targeted override of what comes before the “–“. See Converting 6.x themes to 7.x for more info.

Drupal 6: Any .tpl.php files from the parent theme will be inherited. However, to add template files with more specificity, you must also copy over the more general template file from the parent theme manually. For instance, to add a node-blog.tpl.php template in a sub-theme, you must also copy over node.tpl.php from the parent theme. This bug has been fixed in Drupal 7 but will not be fixed in Drupal 6.

Overriding inherited .tpl.php templates: Add a template file with the same name in your sub-theme folder to have it override the template from the parent theme.

Screen shots, logo and favicon inheritance

The parent theme’s screen shot will be inherited. The parent theme’s logo (logo.png/logo.jpg) will not be inherited. The parent theme’s favicon (favicon.ico) will not be inherited.

Overriding inherited screen shots: Specify a new image file in your sub-theme’s .info file.

Region inheritance

Sub-themes do not inherit custom regions from a parent theme. If you are using custom regions, you should copy the region declarations from the parent theme’s .info file. Be sure your sub-theme’s page.tpl.php file matches the sub-theme’s region settings.

Features inheritance

In Drupal 6, if you use a set of features other than the full range of defaults, these are not inherited from the base theme. If you are using features beyond the default, you should copy the features declarations from the parent theme’s .info file.

Color inheritance

Color.module support within the color directory is not inherited.

Theme settings inheritance

Theme settings set via advanced theme settings’ theme-settings.php are not inherited, unless you copy the settings declarations from the parent theme’s .info file.