Create a subtheme Drupal 7

First of all, create a new directory in the sites theme folder to add the custom theme.

Create the .info file, aside the mandatory name and core properties, and the recommended desription property, add the base theme property.


name = Custom subtheme
desription = A custom subtheme for training purposes
core = 7.x
base theme = bartik

The custom theme can be activated on the /admin/appearance page. As you can see in the image below, the themes screenshot is taken from the base theme.

disabled_themes.png

Enable and set default to see the custom theme in action. 

The default Bartik theme doesn't need to be enabled, disable it to keep your Drupal enabled themes array clean.

Now, as seen in the image below, the layout from the new theme is the same as Bartik, however, the logo is missing.

custom_theme_no_logo.png

Every Drupal 7 theme needs to have a logo. In this example, the default Bartik logo is copied from the core themes directory into the subtheme directory.

Once the logo is added and the page is refreshed, a set of notices are printed referring to undefined indexes in the Bartik page template.

undefined_index_notice.png

Regions are not inherited in the subtheme. To inherit the regions from the base theme, copy the regions properties to the .info file of the subtheme.

name = Custom subtheme
desription = A custom subtheme for training purposes
core = 7.x
base theme = bartik

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

Remember, a .info file is cached. To let Drupal know about the new regions, clear the cache.

This example show the basics to create a subtheme in Drupal 7. For a more in depth tutorial on inheriting theme settings, javascript etc, I want to reffer to the Drupal sub-theme documentation.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.