Drupal is a very powerful, and extensible, CMS and with release of Drupal 7 we saw even more power added to it. However, Drupal has always been known to have a fairly steep learning curve, with a whole lot of new concepts to learn. Today we hope to break some of that curve by showing you how to start your Drupal theme, and bring your Drupal site an exciting new look.
Introduction
The easiest part of the theme process in drupal is finding them. They can be found in the themes folder, which is in the root folder of your Drupal installation. Inside Drupal itself, you change the theme by going to the Appearance section on the Admin side. So putting your theme in the right place and changing it is pretty easy.
The difficulties start when it is time to begin building the theme. The folder structure itself can seem a bit alien, especially if you are looking at some of the more complex themes. That being said, there is basically only one folder inside our theme directory, templates. Every theme needs at least templates to change the design of a page, and it is best to create a folder for this, as organization is key. The real trick here is figuring out what templates to override.
Think of themes in Drupal as sub-classes of the main theme. Unlike WordPress or other CMS theming systems, Drupal uses its built-in basic theme for anything that is not defined in the theme itself. In essence, you are overriding this basic theme with each template you make, and if Drupal doesn’t find a template it is looking for, it uses its basic one.
Getting Started
Before we get into our first template file, we need a theme folder, and setup our theme configuration. As long as this folder is inside the themes directory, you can call it whatever you want. Another thing that needs to present is the templates directory inside our themes folder.
The first file we will need is our configuration file. This will tell Drupal a load of information about our theme, including the name, version, and even a few files that needs to be loaded in. This magical file is called the info file and has be be named the same at the theme folder with the .info file extension. So if we named our folder “sotc”, then our info file will be “sotc.info”. The whole folder structure for our theme will look something like so:
Info File
The info file itself has quite a structure to it. It can be quite large or deceptively small. The most basic file will look something like so:
description = The Theme used for Switch On The Code
;screenshot = zen-internals/screenshot.png
core = 7.x
engine = phptemplate
regions[top_nav] = Top Navigation
regions[content] = Content Area
regions[sidebar] = Sidebar
regions[bottom_nav] = Bottom Navigation
stylesheets[all][] = styles.css
;Theme Information
version = "0.1a"
core = "7.x"
project = "Switch On The Code"
Most of the items here are self explanatory. You have a name, description, screenshot, etc. However, the regions section is not as obvious. The regions separate different parts of a Drupal page, and define the area’s content. Regions are defined by the theme, but can be utilized by the Drupal admin to place widgets and other content pieces. Things such as navigation and the login form can be placed based on what region they need to be in. So it is important that you layout your regions wisely.
In this example we have a basic website layout, with a header/footer, content area, and a sidebar. You can change, add, or remove regions as you see fit. There is literally no limit to the regions you can have. However, you will almost always need at least content region defined.
Lastly, we have the stylesheet. You can have a lot of different stylesheets defined in the info file, based on what pages you need them to appear in. In this basic example, we just have one stylesheet that is included on every page.
Before we move on, remember that this info file can be a lot more complex. I left out theme “features” because they are not required and for this basic tutorial they are not needed. If you would like to know the true potential of this file, check out the references.
html.tpl.php
Our last step in this tutorial is to create our first template file, with is the basis of our theme. html.tpl.php is the wrapper for all pages in Drupal. Most themes don’t actually override this file, as it is typically very basic. We will be defining our own in order to introduce the basic concepts behind templates.
To start, each template is named with a “.tpl.php” extension, and is typically named in relation to what role it plays in the theme. For example, html.tpl.php refers to the fact that this file is the html template for the theme. Other templates include page.tpl.php and node.tpl.php. Overall there are templates for just about any type of page you can think of, so in theory your theme could control how every page looks.
So after the file itself is created, it has to be filled. Our file will look something like this:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language; ?>"
version="XHTML+RDFa 1.0"
dir="<?php print $language->dir; ?>"
<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes; ?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
As I mentioned above, most themes used the default html.tpl.php, but this one has a few things stripped out. However, overall this file is the same as the default template. With this in mind, this does show us how a basic template file is structured.
Templates are, at their core, an HTML file with some php mixed in. As the view layer of Drupal, templates are very simple and do very little work beyond formatting output. The output itself is provided by a series of variables, which are passed to the template. Each template file has its own collection of output variables, so keep in mind that other templates may not have access to the variables in this one.
So this is our first template file. In provides the base for our Drupal theme. In the next tutorial we will be building our other templates, and providing some CSS to make things pretty. So keep an eye out for Part 2, and just remember that if you need coding help, all you have to do is Switch On The Code.