Step-by-Step: Creating an (Omega-) Sub Theme

Maybe I'm one of the last drupal developers who has put creating subthemes of Drupal Themes on the backburner. I just found that there's never been enough time to set it up properly, and frankly, I shied away from the whole process because I wasn't able to piece together all the info that can be found around creating subthemes for Drupal (especially for the Omega theme) into an efficient work flow.

Since you found your way to this article, chances are you belong to the same club! And just like me, you probably found out the hard way that it makes so much more sense to structure your work in advance. Setting up a proper theme structure will pay off in the long run. Especially, if you're working on larger projects (in my case our Commons implementation for Royal Roads University, Victoria) that require frequent updating of your Drupal themes. A no brainer, I know!

There are many good articles around creating a sub theme for a Drupal theme. In fact, if you're working with Omega Themes, you will find information about it in the Read Me files of the theme itself, and in Omega's online documentation. However, in my attempts to create a manageable workflow, I found that these resources didn't cover all the steps I needed. I ended up combining resources to develop my own workflow.

Setting up the Sub Theme

1. Copy the original theme and place this copy in a themes folder of the project you're working on. I usually use the sites/all/themes folder. This copy is going to be your sub theme or child theme. Sub themes can be built from scratch but many sources recommend to copy the parent and to adjust this version.
2. Name the sub theme by applying the following naming conventions:
   • The name must start with a letter
   • it can only contain lower cases, letters, numbers and underscores
   • try to not use a name of a module as this can cause issues with arrays (as Wumms pointed out) 
   • example: my_subtheme
3. The name of the theme and the theme folder have to be identical​

Adjust the .info file

1. Rename the .info file in your sub theme folder to the exact name of your sub theme. Example: parenttheme.info becomes my_subtheme.info.
2. Open your my_subtheme.info file and make the following adjustments to the Head of the file:
   • Name: Change the name into a Human Readable Name
   • Description: Describe your sub theme and add a url if you wish.
   • Base Theme: put in the exact naming of the parent theme. Note: if you've copied the theme, then the name that's stated there initially is probably the grand parent theme.
   • I usually leave Core, Release, Engine and Screenshot untouched.
3. The sub theme inherits most properties from the parent theme. This makes sense as a general logic if you're creating a sub theme, you will probably be interested in making adjustments to the parent theme in your new sub theme, but rarely do you want to overwrite everything, because then, it wouldn't make much sense to use the parent theme in your work in the first place. The following features are NOT inherited:
   • regions
   • core version
   • color info
4. That means, if you have created a blank .info folder now you'd have to specify these properties. If you have copied your theme like I suggested above, these are the features that you have to leave in your my_subtheme.info folder if you want them to be translated into your subtheme.

Declaring CSS stylesheets in your my_subtheme.info file

As a simple rule: you must declare at least on .css file in your .info file so that your sub theme inherits the style sheets of the parent theme. You basically have two options:

1. Add an empty .css file in your sub theme folder and call it something like my_subtheme_custom.css. It will hold all your style changes for this sub theme while the style sheets of the parent theme still apply.
2. Choose the same name of a .css file of the parent theme for your .css file in the sub theme (for example: global.css) if you plan to overwrite that particular .css file of the parent theme. As a logical consequence: If you declare a .css file in your sub theme with the identical name as a .css file of the parent theme and you leave the sub theme version of this .css file completely empty, you've nullified the parent theme's .css file with the same name. As an example when sub theming for Omega parent themes: By adding a blank global.css file to your sub theme you're erasing all style properties of the Omega parent theme's global.css file.
3. It is not advisable to use a copy of the parent's .css style sheet and then modify it where you need to. Even though at first, there's no visible difference between taking a custom .css file or an identical copy of a parent's theme .css file, issues might arise when you're looking at upgrading. The upgraded .css file of the new parent theme might have been modified to work with the updated parent. These updates, however, are now overwritten by the sub theme's global.css without your explicit intention. You don't face this problem when using an empty .css file in your sub theme.

Weights of CSS files 

Some themes (such as the Omega Theme) allocate weight to .css files. If your parent theme's weight is heavier (higher), it will overwrite your sub theme .css. Not knowing about this property can be incredibly frustrating, because even though you believe you've set up a correct sub theme, the parent theme will still overwrite your customized styles.

Here's a simple example of what you could find in an  .info file as found in a Drupal Group Discussion:

css[global.css][name] = 'Your custom global styles'
css[global.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[global.css][options][weight] = '10'

This is how you should set your sub theme's .css:

css[my_subtheme_name-global.css][name] = 'Your custom global styles'
css[my_subtheme_name-global.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[my_subtheme_name-global.css][options][weight] = '11'

Note that the weight of your customized .css file is 1 unit higher than the one of your parent theme, thus allowing it to overwrite the parent theme's styles.

Other Adjustments

1. If you copied your parent theme you will have to open your template.php (and possibly other files, such as theme-settings.php or node.processor.inc etc.) and search and replace all parent theme names with your sub theme name. As a rule of thumb: you want to swap the parent theme for the sub theme name in your sub theme folder. In general, templates are inherited, so no changes need to be made. 

2. The screenshot that shows up in the GUI when activating a theme will be the same as the parent theme unless you upload a new screenshot into your my_subtheme folder.

3. Logo and favicon are not inherited and need to be added. Again: if you've copied the whole folder as I suggested above, you'll have to change favicon and logo to customize your sub theme.

Finalizing Steps

1. Clear your caches (!)
2. Go to /admin/appearance/settings and activate your sub theme.
3. Go to /admin/appearance/settings/my_subtheme and make final adjustments by using the GUI
4. And finally, if you're using the Omega theme as a parent, don't forget to activate your style sheet by clicking the "Toggle Styles" tab and enabling your new style sheet.

I hope you're still with me and that following these steps will get you to a new sub theme in no time. If you find any glitches in the matrix, I'd appreciate your feedback greatly! Thanks.