Theme building basics for Drupal 6.

1. Building a Drupal Theme
Gaurav Khambhala
<gaurav@deeproot.co.in>
DeepRoot Linux - www.deeproot.in
March 22, 2009
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

2. Introduction
What is Drupal theme ?
Drupal theme components
Try it on your own
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

3. What is Drupal theme ?
Drupal theme is a presentation layer to Drupal database.
Drupal theme is a set of few files, which will work
together to present the Drupal backend data.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

4. Theme Files
Following are the few essential files for the drupal theme:
themename.info
style.css
page.tpl.php
block.tpl.php
node.tpl.php
comment.tpl.php
template.php
logo.png
We will follow the instruction and create a theme as a by
product of this presentation. Create a theme directory as
named example. In the next couple of slides, we will look into
individual theme files and their contents.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

5. example.info
example.info description
A required file in drupal theme.
Drupal will pick theme name from this file only
It should be named as your themename.info
It contains the stylesheets, javascript declarations
It contains block regions for the theme
If you want to define some theme level features, you can
list down in this file
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

6. example.info content
Content of the example.info file:
name*
description
version
core*
engine
base theme
stylesheets
scripts
regions
php
features
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

7. example.info content
name Required. A human readable name of the theme.
In our case,
name = Example
description A short description of the theme. This
description is displayed on the theme select page.
description = Example drupal theme
version Version of the theme.
version = 0.1
core Required. Version of the drupal core, your theme
compatible with.
core = 6.x
engine The theme engine.
engine = phptemplate
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

8. cont. example.info content
base theme If you are building a sub theme. It will inherit
base theme settings.This field is not required
right now as we are building a new theme.
sub theme = garland
regions Set of regions you want to enable for this
theme.Machine readable values in square brackets
is the key followed by regions and human readable
name as a value.
regions[region-name] = value
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

9. cont. example.info content
regions Following are the default regions if no regions
specified.
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
stylesheets Stylesheet to use for the theme.
stylesheets[all][] = style.css
scripts Javascript files to use for the theme.
scripts[] = script.js
php Minimum pHP Version this can support.Not
required for most of the themes. Can omit this
settings.
php = 4.3.3
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

10. cont. example.info content
features You can enable/disable features for the themes.
features[] = feature-name
Basically if you don’t specify anything following
are the default values:
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

11. cont. example.info content
Now you have your example.info file ready with the following
content:
name = Example
description = Example drupal theme.
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
No need to specify regions and features. Let it be default
values.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

12. Theme is ready to use
Now if you copy the example theme directory to your drupal
theme directory. Drupal 6 will detect it from .info file and
ready to be enabled. Go to Administer-Site
Building-Themes.You can see the example theme listed there.
Now we will require to create style.css and php template files
to display the content as we want for this theme.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

13. Template files
page.tpl.php A main template file that contains the display
structure of almost all of the pages.
node.tpl.php Defines the node content.
block.tpl.php Defines block content.
comment.tpl.php Defines comment content.
template.php Defines comment content.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

14. Create template files - page.tpl.php
page.tpl.php file is a combination of html tags as well as
drupal php template variables to show the required
data.Following are some phptemplate variables to use. More
you can find out at http://drupal.org/node/11812
$footer message
The footer message as defined in the admin
settings, also the HTML for the footer region.
$header
HTML for the header region.
$logo
The path to the logo image, as defined in theme
configuration.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

15. Create template files - page.tpl.php
$primary links (array)
An array containing the links as they have been
defined in the phptemplate specific configuration
block.
$sidebar left
The HTML for the left sidebar.
$sidebar right
The HTML for the right sidebar.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme

16. Create Theme files
Download Advanced theme construction kit from
drupal.org.
http://ftp.drupal.org/files/projects/atck-6.
x-6.0.tar.gz
Untar the downloaded file.atck was developed in a
production environment for purposes of quickly building
css and xhtml valid Drupal themes from scratch without
having to un-theme an existing Drupal theme to do it.
So you have all the required files for building drupal
theme. Copy all these files and make required changes to
.info file.
Now go to Administer-Site Building-Themes. Enable the
example theme.
Gaurav Khambhala <gaurav@deeproot.co.in> Building a Drupal Theme