Done in 60 seconds: creating a D7 subtheme

To create a variation of an existing theme, you could simply copy the desired theme's directory to sites/all/themes change the theme name in a a couple of places and start hacking away. But duplication is a waste of disk space. More importantly it creates an unnecessary maintenance overhead: if an improved version of the original theme comes out, you'll have to merge it with the changes you made in the various files of the overridden version.

Enter subthemes. Subthemes inherit all style sheets, javascript and templates (.tpl.plp files) from the theme they declare as their base. You don't have to hack into the base theme code, which means that when a new version of the base comes out, you automatically inherit all the improvements!

It only takes a minute to create a basic subtheme that will set you up in a maintainable fashion for all possible theme variations you can think of applying in the future. Here are the steps.

1. Make sure that the theme you want to use as a base theme is already installed on your system. Think of a name for your subtheme -- in this example we use mytheme.
2. Create a directory by the name of your theme, i.e sites/all/themes/mytheme. Your subtheme directory does not have to reside as a subdirectory of the base theme. Copy the .info file of the theme you pick as your base, here called theirtheme, rename it to mytheme.info and place it in your new sites/all/themes/mytheme directory. Edit the first lines of mytheme.info to read:
   

       name = mytheme
       description = whatever you like
       core = 7.x
       base theme = theirtheme
       stylesheets[all][] = style.css
   

3. Still in your mytheme directory, create an empty style.css file, which is going to hold any styles you want to change or add.
4. To have your own logo.png file picked up automatically by the system, drop it too in in the sites/all/themes/mytheme directory. Or use the UI to upload a logo at Appearance >> Settings. Appearance is also where you activate your theme as the default, in favour of whatever was selected before. Just press "Save" and you're in business!
5. If you want to override the base theme's page.tpl.php file, or in fact any of the base theme's .tpl.php files, simply copy the ones you want to override to your mytheme directory and change them to your heart's content. Don't forget that you must refresh the theme cache after you've introduced a new file in your mytheme directory, like page.tpl.php or html.tpl.php. Once done, further edits to those files do not require a cache refresh and will be effective immediately.
   A simple way to refresh the theme cache is by going to Configuration >> Performance and pressing the "Clear all caches" button. Easy.
6. Finally we suggest you create a placeholder for any of the plethora of D7's preprocess, process and theme hooks you may want to take advantage of now or in the future. These are normally put in a file named template.php in the mytheme directory. Here's an example of what you can put in it. Don't forget to replace the mytheme prefix by the name of your subtheme.
   

     /**
      * Implements template_preprocess_node().
      */
     function mytheme_preprocess_node(&$vars) {
       // $vars['submitted'] is non-empty when the box "Display author and date information" is ticked for the content type.
       $vars['submitted'] .= '; ' . t('last modified') . ' ' . format_date($vars['revision_timestamp']);
     }
   

   This will append to the phrase "; last modified ..." to the text "Submitted by.... on..." that appears above content for which this is switched on. Naturally if you don't like this, leave the function body blank or remove the function altogether.

View more tips and tricks...