Drupal Theme Notes
Posted Wednesday, October 14th, 2009
Recently I was asked to summarize the parts of a drupal theme. I came up with the following semi-literate guide to my own theme framework, sp0xx6 for Drupal 6. This is not a very technical guide but I think it’s none the less important to document my perspective, especially for newcomers to drupal who are having a hard time with the way information is presented on drupal.org.
Please note: The text below makes reference to a set of theme files for Drupal themes. That theme is sp0xx6. You can download sp0xx6 from google code. For free. To keep. Forever. Drupal rocks! Thanks to everyone on drupal.org that makes my life easier and more interesting.
.info
The .info file registers your theme with drupal along with your theme’s regions (area’s content appears in) your CSS and javascript.
template.php
Your template file allows you to customize practically everything in your theme. You can rewrite the appearance of forms, lists, links, taxonomies and add all sorts of functionality.
node.tpl.php
Unless you have a separate node template defined (as with node-gallery.tpl.php), every content type will use the default node.tpl.php file to render the contentof each page.
The node template is made up of two sections, the teaser and the main template the teaser is usually used in lists and the main template is used when you are displaying the actual page your node is located on.
The teaser section is optional, it simply provides another way to render the shortened layout of your template.
Main $components of node.tpl.php
$teaser — the teaser format of the node, can be customized and manipulated
$title — title of your node
$submitted — user that submitted the node followed by published date
$content — the content of the node body
$terms — taxonomy terms assigned to the node
page.tpl.php
This is a crucial part of the theme, but most of the components of this template are actually quite arbitrary. This is one of the reasons I really like Drupal — you can use plain html/css to do just about anything to a page before you get drupal to load some content in it. To function properly the page template requires the following pieces,
$head — prints meta tags and other important stuff
$styles — prints all styles from your .info file and Drupal modules
$scripts — prints all javascript, including your script.js (see below) and Drupal module scripts
$content — prints node content
$closure — prints everything in the footer of your page (it’s easy to miss so check twice!)
Other notable pieces,
A few custom regions (defined in .info and can be placed into content-type templates),
$left, $right, (left & right are defined by default in drupal) $content, $header, $footer, $precontent, $content, $subcontent, $mainnav, $subnav, $searchbox
page-front.tpl.php (not included in sp0xx6)
Page-front is the default frontpage template for Drupal. This page will automatically override your homepage unless you have specified a different page in your theme settings. sp0xx6 does not include this file, but you can simply duplicate page.tpl.php and rename that file to create your own front page for drupal. After you rename the file you can customize it with whatever markup you like and it will only change your homepage.
script.js
Contains all of the javascript stuff you need for your regular templates. Other js elements can be added on a case by case basis using drupal_add_js (http://api.drupal.org/api/function/drupal_add_js)
search-block-form.tpl.php
An optional template that allows you to modify your search form.
style.css
This is the main stylesheet of your theme and will be included with every template. You can add additional styles to specific templates with drupal_add_css (http://api.drupal.org/api/function/drupal_add_css/6) You can also add other css styles in .info
Custom node template example –
node-gallery.tpl.php
node-gallery.tpl.php is an example of a content type called “gallery” that has an image gallery built into it using CCK image fields and the imagecache module that is presented in lightbox form.
In the template you can see that the field_imagefile cck field is rendered as thumbnails using the gallerythumb imagecache preset.
