Blog/ How to create a sub-theme in Drupal 7?

By neerav.mehta Wed, 05/21/2014 - 22:14 5 Comments

Creating a sub-theme is really simple. A sub-theme inherits a lot of the design resources from its parent theme. We can have multiple sub-themes inheriting only one base theme.

It is important to know that what a sub-theme inherits from its parent theme.

A sub theme will inherit:

  • All style sheets
  • Template files
  • Functions and overrides defined in the template.php

A sub-theme will not inherit:

  • Logos and Favicons
  • Block regions
  • Advanced theme settings

Creating a sub theme

  1. Theme Directory: Create a directory in your custom theme directory in the same way you create a theme. Give it a name. For example: mysubtheme.
  2. .info file: Create an .info file in the directory mysubtheme as similar to the parent theme. The only difference will be the following line:
    base theme = theme_name
  3. Logo: Add the logo in the sub-theme directory.
  4. Screenshot: Theme screenshot is inherited from the base’s theme. To override the same, just create a new screenshot.png in the sub theme directory.
  5. Style Sheets:  You must declare at least one stylesheet in your sub-theme for any of the parent theme's stylesheets to be inherited. To override any particular css file (for instance,  style.css), add the following line in your .info file and add a new css file with the same name in your sub-theme’s directory.
    stylesheets[all][]   = style.css
  6. Javascripts: All the js files defined in the parent theme will be inherited. To override any particular js file, add the following line in your .info file and add a new js file (for instance, script.js), with the same name in your sub-theme’s directory.
    scripts[] = script.js
  7. Regions:  You can declare a new set of regions in the sub-theme. To inherit the custom regions of the parent theme, the regions should be copied in the sub-theme’s .info file.
  8. Template Files: You can add any template files in your sub theme. If the template file is found in your sub-theme’s directory, then Drupal will override the parent’s template files. Otherwise, it will use the parent’s template files.
  9. Images: The images used in the theme can also be copied in the sub theme directory. If the image is found in your sub-theme’s directory then Drupal will override the parent theme’s image with the same name. Otherwise, it will use the parent’s image.

Related Articles:

By phponwebsites (not verified) Monday, October 6, 2014 - 17:46 Permalink

wheather it should be formated or not?
ie,
.info file should like only below
name = theme name
description = this is the description of sub theme
base theme = parent theme name

.info is just a simple text file. As an example, the following formatting works:

name = s2p theme
description = Sub-theme of responsive bootstrap theme.
core = 7.x
base theme = bootstrap

 

By Andrej (not verified) Monday, November 3, 2014 - 20:09 Permalink

It would be helpful to explicitly state that:
theme's directory + the sub-theme's .info file name + the theme name inside the .info file
should be identical, or the theme won't appear in the admin.

By Dennis (not verified) Thursday, February 12, 2015 - 09:23 Permalink

I am learning how to create subtheme and while this gives me a check list of things to do, it does not help me figure out what I need to do because there are not details or links to details.

For example, when you say - Logo: Add the logo in the sub-theme directory. What logo are you talking about here?

you just need to copy the logo and screenshot from the base theme, and paste into the root of your subtheme... unless of course you have your own logo and screenshot to use instead

Ready to get Started?