A Guide to Creating a Drupal Theme

A Guide to Creating a Drupal Theme

There are three ways to create a Drupal theme: from scratch, through a starter theme or through a sub-theme. Each has its advantages and disadvantages and so the final decision is a matter of personal preference.

Do you want total control? Or perhaps you just want a website up fast? If you are looking for total control, building a theme from scratch is the way to go. If you want a website up fast, a starter theme will help you increase the speed of development time.

To use a house analogy, developing a Drupal theme from scratch is like building a house on an empty lot. It provides you with complete control but requires time and knowledge. Using a starter theme is equivalent to a pre-fab house – it provides some options but may not meet your exact specifications. A sub-theme may be likened to remodeling a house where the shell will remain but you have many configuration options.

Starter Themes and Sub-Themes

Starter themes and sub-themes are both great ways to begin a theme. They are a zipped package containing the files with basic configurations to create your own theme. They come with a basic page layout and minimal CSS and jQuery already written. You may simply change the name and other basic settings to meet your needs and then proceed onto customizing the CSS and jQuery. Sub-themes are themes you place inside of base themes; they allow you to override the base theme. Any theme can have a sub-theme, but some are designed to be base themes for sub-themes.

In both starter themes and sub-themes, you are working off of a foundational theme and tweaking it to meet your design needs. That said, the specific approaches in each are slightly different. In a starter theme, you make changes directly to the theme as you remove unwanted code. In a sub-theme, you override code in the sub-theme files and the base theme code remains intact.

From Scratch

Drupal 7 themes are easy to create from scratch. You will need basic knowledge of HTML and CSS. It is also very helpful to know jQuery and PHP but you can manage without knowing these languages.

The first thing you’ll need to get started is a theme folder. In this case, we’ll call it “base_theme.” The only file actually required to create base_theme is an .info text file which we’ll save as base_theme.info. That said, without any css or javascript added, your theme won’t actually do anything.

It is best to keep your files in a tidy folder scheme so that you can update your work later. A clean organization of files also enables other developers to pickup where you left off without much preparation. Here’s an example of a simple root directory for a Drupal 7 theme:

• base_theme.info [text file that contains theme title, description, regions]
• logo.png [site logo for header region]
• screenshot.png
• /css folder [contains style.css file]
• /images folder [for styling images and sprites]
• /scripts folder [contains JavaScript files, including base file script.js]
• /templates folder [contains page template files .tpl.php - eg: page.tpl.php, node.tpl.php, etc]

Steps to Create Theme

Here is a rough breakdown of the total steps involved with creating a custom theme:

1. Create or modify an HTML file for the site.
2. Create or modify a CSS file for the site.
3. Create an .info file to describe your new theme.
4. Standardize the file names as per Drupal best practices.
5. Insert relevant variables into template files.
6. Construct additional template files as needed for nodes, blocks, etc.

Theme .info File

The most important file is the .info file. This text file uses a human-readable structure to tell Drupal what files to use and how to build your theme. The most basic .info file may look like this:

[text]
name = Base theme
description = Basic Drupal 7 theme
version = 7.x-1.0
core = 7.x

engine = phptemplate

regions[header] = Header
regions[sidebar] = Sidebar
regions[content] = Content
regions[footer] = Footer

stylesheets[all][] = styles/style.css
scripts[] = scripts/script.js

[/text]

The file is fairly self-explanatory, but we’ll go ahead and describe each line:

• “Name” represents the name of your theme.
• “Description” is where you give your theme a description.
• “Version” describes the version of Drupal in use. It is recommended that version is not set Drupal, but that only applies if your theme will be uploaded to Drupal.org.
• “Core” refers to the core installation of Drupal installed on your server. In this case, “7.x” displays as we are building a theme for version 7.
• “Engine” refers to the engine used by Drupal with phptemplate being the default. Theme engines enable developers to use template files that are written strictly in the php programming language.
• “Regions” represent the distinct areas of the webpage layout. You can think of regions like containers in which elements display inside (eg: blocks or nodes). You may lay out the regions of your website however you wish. The breakdown of regions will likely depend on the final design mockups. In most simple cases, you’ll have header, content, sidebar, and footer regions. But if you’re unsure, you can leave them out for the base Drupal regions.
• “Stylesheets” are for setting the .css files. The first brackets are used to set the media type. Examples include “all,” “screen,” or “print.”
• “Scripts” is where you set the JavaScript files.The style.css and scripts.js files in this example are where you place your CSS and JavaScript, respectively. Blank style / script files indicates your theme will not be making any changes to the system defaults.

Adding Unique Regions

Drupal comes preloaded with the following standard regions as default:

• sidebar first
• sidebar second
• content
• header
• footer
• highlighted
• help
• page_bottom
• page_top

The ability to create additional unique regions within your theme is one of the powerful aspects of Drupal theming. Unique regions enable your website to accommodate unique creative design layouts. As a developer, you may create as many unique regions as you would like.

In order to create a new unique region, you’ll want to take the following steps:

1. Specify the region in the .info file
2. Ensure that the region is included in the page.tpl.php file

Regions are specified in the .info file as follows:

• regions[home_specialty] = Home specialty block
• regions[home_phone] = Home phone number block

The above code in the .info file would create two new regions with the technical names of ‘home_specialty’ and ‘home_phone’. After the equals sign is the description for each block.

Now that you have successfully defined your region in the .info file, you must add the region to your page.tpl.php file. The region may be added by simply adding the following code:

<?php print render($page[‘home_specialty’]); ?>

Template Files

The template files (page.tpl.php, node.tpl.php) are what Drupal uses to create the layout for respective pages. The best practice for starting a theme the first time is to copy these two files out of the /modules/system and /modules/node Drupal folders, place the copies into your templates folder and then make adjustments on these copied files.

One important item to change in the page.tpl.php file is to add your regions to the layout with the following PHP code: print $page[‘header’]. It’s also important to remove any Drupal base regions you’re not using. If you do not make use of template (‘tpl’) files in your theme folder, the base files will be used.

The last step is to place this newly-created theme folder in the following location: /sites/all/themes. Finally, you can make your theme display on your website by going to /admin/appearance and clicking “Enable and set default” next to your theme name.

Putting Blocks into Regions

In Drupal, you can insert any block into any region. A block is a container for any type of content. Blocks may be generated by modules or views. These blocks are often dynamic lists of content from the database or elaborate pieces of functionality when generated from modules. At the same time, a block can also be quite simple as you may simply insert text, images or raw HTML code.

To place a block in a specific region, log in as the administrator and go to /admin/structure/block. Through following the web-based administration on this page, you can place blocks in any region you wish.

You can “configure a block” to make changes and have it only appear on particular pages. The block configuration page enables the administrator to edit the following:

• Block name
• Region where it displays
• Pages the block will appear (by path)
• Content types the block will appear within
• Roles for who can see the block
• Whether each user can customize the visibility for the block in their personal settings.

Conclusion

These three theming options - from scratch, a starter theme, or a sub-theme – are the main approaches for setting up your own custom Drupal 7 theme.

Whether you require total control or would like to simply remodel an already-created structure, the approach you decide is a matter of personal preference and the design needs of the website.