I did the following presentation at DrupalDaze last weekend. It is for very beginner users to understand how Drupal themes are made!

First, make sure your site (or page) is very stripped down. Take out anything that might make it complicated — like javascript or anything dynamic. You can add functions back in later.

We’ll start with a page that looks like this as an example:

http://www.pinkslipmedia.org/ideacoop

It’s pretty simple. You have two menus (one won’t be dynamic since it is image-based and the other in a sidebar that can readily expand with other blocks) content title, content, images, and a footer.

Take out the content (the title text, the body content–including image, and anything in the sidebar and footer). This is what we have left.

Let’s switch gears and look at how a Drupal theme is put together.

Drupal themes can be created using a variety of theme engines, such as Smarty, XTemplate, PHPTAL, and, the favored Drupal engine, PHPTemplate. They control the PHP syntax used in the template files. We’re going to build our’s using PHPTemplate.

So what does the theme look like? A Drupal theme is made up of a series of files that can be super simple or extend with surprising granularity. Bluemarine’s theme might be the simplest you can find:

In there you have: an image file for your logo, a screenshot (which is used by Drupal to identify the theme on your theme selection page), a stylesheet and about five php template files.

As you could surmise, block.tpl.php controls how blocks look and comment.tpl.php, comments. Box.tpl.php controls how boxes around element look, the most common example being around comment forms. Node.tpl.php controls the actual content of a page, the node itself.

Page.tpl.php is the main one we are concerned about today. This is the skeleton of your site, the bones of it. Let’s open one up and see what it looks like.

Bluemarine’s is simple, but it is made with tables. Let’s use a different one. “Clean” theme has a basic page.tpl.php.

It actually looks quite a bit like our original file, with a few differences. The main one you will see is little snippets of php code. You don’t need to know very much php to make this work.

Here are some of the basic ones to take note of in here (don’t copy these directly because I had to put spaces in the code to make it show!):

• < title >< ?php print $head_title ? >< /title >
This dynamically pulls your page title from the database.

• < ?php print $styles ? >
This pulls in all your stylesheets — many modules come with their own stylesheets.

• < ?php print $search_box ? >
Search box

• You will notice a few have “if” statements. This will check your database to see if there is something to fill that element first — and not print otherwise. For example:

< ?php if ($title): ? >
< h2 class="page-title" >< ?php print $title ? >< /h2 >
< ?php endif; ? >

This checks to see if there is a title. If there isn’t one, it won’t print any of it, not even the html. If there is, it will print it, with h2 tags around it.

• < ?php print $breadcrumbs ?>
Prints your breadcrumbs

• < ?php print $right; ? >
This is a region. Regions are areas you can stick blocks. You can add more… but right now there are five regions in here: left, content, right, header and footer.

• < ?php print $closure ? >
The last thing that drupal prints on a page. Always have this snippet at the end of your page.tpl.php file.

You can check out the list of other PHP variables that can be passed to page.tpl.php.

Now we can start plopping in the variables we need into our theme. I’m going to use the “Clean” page.tpl.php file as a starting point and bring the PHP snippets over to my stripped down web page.

Also bring over your images and your style sheet. I’d rename your original page.tpl.php and style.css files so you can save them, just in case!

Upload your new folder (renamed of course) to the sites/all/themes folder. Enable it in your themes section and make it your default. It will probably look very, very ugly… but that’s OK!

In all likelihood, your images are all broken. That’s because the path to that images folder has changed. It was once just images/. Now the path needs to be absolute, and go to: /sites/all/themes//images. Change all instances of that in your page.tpl.php and style.css files.

There will probably be some other kinks. I often run into this one, in which a div doesn’t clear the sidebar float. (And the formatting on the menu is not correct.)

The easiest way to narrow down what styles are conflicting or causing the problem is to pop open your CSS preview pane in the Firefox web developer toolbar and start deleting chunks. This one can be remedied by adding .node-form .standard { clear: none; } to your style.css file. Your theme’s style.css file should be the last stylesheet called, so you can use it to override styles from modules or drupal.

In this case, the clean theme used template.php to pull in a whole slew of css files. I deleted that connection to reset the styles. Also, add: .block ul { padding: 0 0 10px 20px; } to fix the menu formatting.

Cool. So your theme should be up and running, with a little bit of css patching. A good thing to do right now is to check the W3C Validator (which you can do right from the Firefox web dev toolbar). This will help you fix any problems and make sure everything’s neat & clean!

But, you say, what if I want a front page that looks totally different? Because of Drupal theming’s granularity, page.tpl.php can be duplicated and renamed to fit many different configurations. For example, say you want a specific page theme only for node 1. You could duplicate page.tpl.php, rename it page-node-1.tpl.php, edit it, and the new template will ONLY theme that node. The naming structure cascades, so Drupal would look for it in this order:

page-node-edit.tpl.php
page-node-1.tpl.php
page-node.tpl.php
page.tpl.php

Or, if you wanted granularity for the user section of the site, the following order would apply:

page-user-1.tpl.php (themes all pages /user/1/*)
page-user.php (themes all pages /user/*)
page.tpl.php (themes all pages)

So, as I was saying, you can make a template called page-front.tpl.php which will theme your front page. In this case, I’m going to just copy the code of the front page of the existing site and put it in the page-front.tpl.php — but if you do this at home, you can include php snippets that will talk to your database.

Yay!

There’s a lot more to Drupal theming than this; check out Pro Drupal Development for a rich chapter on it. A more advanced topic that we were not able to address today is how to use template.php (a file you can create in your theme folder if it does not exist already) to override theme functions. We’ll save that til next time!