Creating a new custom theme with Drupal 7 using the Zen starter theme

Drupal 7 Zen Sub-theme

Creating a beautiful slick drupal website starts with a nice clean well coded theme.  Starting with the Zen theme helps to speed up development and allow you enough freedom to create a beautiful design.

  1. Install a fresh copy of Drupal 7 
    Go to the official drupal website and download the latest release to ensure you're working with the most up-to-date security releases.
  2. Download the latest Zen theme for Drupal 7 and unzip the folder.
  3. Install the Zen theme in the [drupal7-root]/sites/all/themes/zen
  4. Setup the sub-theme by copying the [drupal7-root]/sites/all/themes/zen/STARTERKIT folder and placing a copy one-level up at: [drupal7-root]/sites/all/themes/STARTERKIT
  5. Rename your new STARTERKIT folder to the name you want for your new sub-theme
    **NOTE: The name of your sub-theme folder must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.
  6. Inside your newly named sub-theme folder, rename the "STARTERKIT.info.txt" file to include the name of your new sub-theme, and remove the ".txt" extension.
    For example: rename the file [drupal7-root]/sites/all/themes/foo/STARTERKIT.info.txt to: [drupal7-root]/sites/all/themes/foo/foo.info
  7. Edit your new ".info" file: change the "name" and "description" fields.
    Example:
    "name = Zen Sub-theme Starter Kit" to: "name = Foo"
    "description = Read...." to: "description = A Zen sub-theme"
  8. Choose your preferred page layout method or grid system.
    By default your new sub-theme is using a responsive layout. If you want to use a fixed-width layout for your theme:
    Edit your sub-theme's styles.css file (or styles.scss if you're using SASS), and replace the references to responsive.css with fixed.css
  9. Edit your sub-theme to use proper function names.
    Edit the template.php and theme-settings.php files in your sub-theme's folder.  Replace ALL occurrences of "STARTERKIT" with the name of your subtheme.
    It is best if you use a text editing program that has a search and "replace all" function to ensure that you change all instances.
  10. Now you can set your new sub-theme as your website's default theme.
    Log in as the site administrator and go to the Appearance tab.  Click the "Enable and set as default" for your new subtheme.

Now you can start theming fresh!

REMEMBER:

  • Never edit or change the base ZEN theme - only make changes to the sub-theme.  Why?  Because as security releases become available, you may need to replace the Zen base theme with another version with updated security.
  • If you decide you need to edit any Zen  .tpl.php template files, copy them from the Zen template folder into your sub-theme's template folder before making any changes.
  • For more information, and to discover more ways to extend your sub-theme by reading the Zen theme documentation and Drupal 7's Theme Guide.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.