Creating a sub-theme for Zen 7.x-5

Creating a sub-theme for Zen 7.x-5

One of the mistakes I have noticed junior Drupal developers tend to make is directly editing base theme files. It is an easy mistake to make if you are new to Drupal and have not yet gotten into the habit of reading README.txt files for modules and themes.

The reason we don't modify our base theme files is because when you upgrade the theme folder to the new release you don't want to lose any of your custom code.

I love using the Zen Theme ( so I will use it as my example but most of the popular starter themes follow very similar steps ( please always read the README.txt for instructions! ) .

1. Copy the STARTERKIT folder out of the zen/ folder then copy into your sites/all/theme folder and rename it to your sub-theme name, lowercase letters, numbers and underscores. Please note, to make it easier to upgrade Zen, this new sub-theme folder does not live inside the Zen folder but alongside it in the themes folder ( i.e. sites/all/theme/my_sub_theme ).

2. You will now need to rename the inside your sub-theme. You will need to remove the .TXT at the end so that it ends with just .INFO and replace STARTERKIT with your sub-theme name  ( i.e. )

3. You now open and edit this .info file and replace the name and description at the top of the file. You can replace "name = Zen Sub-theme Starter Kit" with your sub-theme name, and "description = Read the.." with your custom description. If you are new to Drupal it is important to learn about how you can control your CSS, JavaScript, Regions through .info files.

4. You now will edit two files template.php and theme-setting.php in your sub-theme's folder. Replace  "STARTERKIT" with the name of your sub-theme for all the functions. ( i.e. function STARTERKIT_preprocess_page(&$vars)  )

5. It is VERY important to always rebuild your theme-registry and clear your caches once you have modified any template or theme files.

6. You can now log in to your Drupal site and go to the Appearance section admin/appearance and enable and set  new sub-theme as default.