Creating Drupal v 5.x Themes

Creating Drupal v 5.x themes using Drupal's PHPTemplate

An introduction to Drupal theming for experienced web designers and templaters.

Part 1 - Creating Drupal 5.x Themes

Intended Audience

This knol is for web designers and CSS/XHTML templaters who are interested in creating Drupal themes.

How this article is presented/how to read this article

Sections flagged with a indicate that a your participation is required (e.g. testing a theme, configuring something, etc.)

Sections flagged with a indicate if you’re not sure how to do something, further details are available, but they’re external to this article.

Attachments

Dependencies

It is recommended that you are able jump in to the 'participation required' sections, by:

Drupal Theming – Part 1 - Introduction

How does Drupal enable theming

Drupal uses theme engines, a theme engine is a layer that abstracts functionality between the Drupal core and pluggable Drupal themes. By default, Drupal 5.x installs the Drupal-specific PHPTemplate engine. Other theme engines may be used by installing add-on modules.


This diagram demonstrates how theme engines plug into Drupal core, and individual themes (i.e. the ones you will create) rely on the theme engines.


In the Drupal-specific PHPTemplate world, the only must-have of a theme is a page.tpl.php file. The other files are not mandatory, and we will look at what they do later.

First, lets inspect page.tpl.php

As you can see, page.tpl.php provides the HTML/XHTML framework for your theme. The highlighted PHP tags are either print, or conditional (if-then-else) print, pre-defined variables (discussed in next section).

Create a new theme by:

  • Creating a folder named ‘simplest_theme_demo’ in /sites/all/themes
  • Downloading the following page.tpl.php into your newly created folder
  • You should have:

Select the theme for your site and look at the code it generates:

By comparing page.tpl.php and the generated code side by side, the extra tags you will need to accommodate in your stylesheet become obvious:

The generated code which has been highlighted in green, indicates sections generated from node.tpl.php. We will discuss node.tpl.php next.

By creating files using the Drupal naming convention, you are able to further control the display of teasers (node.tpl.php), full content (node.tpl.php), comments (comment.tpl.php), and blocks (block.tpl.php), and these will be discussed in the section.

Get stylish

As stated before, all you need to create a Drupal 5.x theme, is page.tpl.php, but as a designer, you're itching to add some style. By dropping a style.css file into you're theme's folder, you're ready to begin theming. For your convenience, we've created a starter theme for you: bare_bones.zip. Edit the bare_bone's style.css, or replace it with your own.

Part 2 - Creating Drupal 5.x Themes

Using other *.tpl.php files used by themes, and any others that you create, using Drupal’s PHPTemplate file naming convention, you are able to ‘override’ the default display:
  • node.tpl.php
  • block.tpl.php
  • box.tpl.php
  • comment.tpl.php

Drupal’s PHPTemplate theme engine uses the content generated by these files in page.tpl.php, as the following diagram demonstrates:

More control means more power

Using the *.tpl.php you can control:

  • the display of different content types, such as blogs, forum posts, or anything else you create  (node-[content type].tpl.php)
  • the display of content in edit-mode (node-edit.tpl.php)
  • the display of individual nodes (node-[node ID number].tpl.php)
  • the display of the front page

Controlling the content being passed to the *.tpl.php using variables

Let’s look at the variables used in page.tpl.php and node.tpl.php:


Here, we see page.tpl.php prints variables such as $sidebar_left and $mission.


In node.tpl.php we see variables such as $sticky.

You can use template.php to override functions returning these variables and you can intercept other variables:

This template.php example, from the Zen theme, demonstrates function overrides:

  • zen_regions
  • zen_breadcrumb

Here is the documentation listing all themable functions: http://api.drupal.org/api/group/themeable/5. It also demonstrates variable re-definition, which is scope controlled:

  • $vars[variablename]

Here is documentation listing all variables available in page.tpl.php, node.tpl.php, and block.tpl.php.

For more on creating Drupal themes, the following are recommended:

Comments

Article rating:
Your rating:

Activity for this knol

This week:

20pageviews

Totals:

814pageviews
©2009 Google