Your First Drupal Theme

This is the second in a series of occasional tutorials about Drupal. Much of what is written below can be found in the book ‘Pro Drupal Development’ by John K. VanDyk which is an excellent book for Drupal newbies. However, programming books are not cheap and if you prefer not to part with the cash then read on.

This tutorial assumes that the reader already has some knowledge of HTML and a little knowledge of PHP/MySQL. All references to Drupal in this article refer to Drupal 6. I look forward to getting to grips with Drupal 7 some time in 2011.

I would maybe argue that themes are the most important component of Drupal. What about modules I hear you say? Modules are also a very important component but a core installation of Drupal gives a developer a great deal of functionality out of the box. It is possible to extend that functionality by installing additional modules if required and this can all be done with little or no knowledge of HTML and PHP. This is not the case when creating your own theme. OK its possible to install Drupal themes with the same level of knowledge but to make the site look distinctive, it is essential that a developer has some knowledge of HTML and CSS as well as an understanding of how Drupal theming works. A bespoke site cannot be created without knowledge of themes and therefore I would argue that the knowledge of themes is more important. This tutorial intends to give the reader some of that knowledge and understanding.

A peep inside the ‘themes’ directory in a new Drupal installation (see previous tutorial on how to install Drupal) will reveal a number of sub-directories such as ‘bluemarine’, ‘chameleon’ and ‘garland’. These are all Drupal themes and contain a number of files. A Drupal theme is essentially a collection of HTML, PHP, CSS files and images that control the look and feel of a site. The default theme for Drupal 6 is Garland but it is quite possible to change this by logging in as the admin user and navigating to Administer > Site Building > Themes. The page is shown in the image below.



Many more themes are available for download at drupal.org (http://drupal.org/project/Themes). Most of these themes look great but if you are a developer looking to build a bespoke site for a client, you are more than likely going to want to create your own. To do this you need to create the directory for your theme. If your theme was called systemick you would create the directory /sites/all/themes/custom/systemick. You could just as easily create the systemick directory in the themes directory along side the existing themes but this method is frowned upon by Drupal developers. It is far better to keep the files and code you create yourself entirely separate from the core Drupal code.

After you have created this directory you should create a .info file. Your .info file should be the same name as your directory so ours would be systemick.info. Like it says on the tin, this file gives Drupal the info it needs to create your theme and structure your web pages. The .info file for the Systemick website (http://www.systemick-wedb-development.co.uk) looks like this.

; $Id$

; Name and core are required; all else is optional.

name = Systemick

core = 6.x

description = Theme for the Systemick website.

;screenshot = screenshot.png

engine = phptemplate

regions[left] = Left sidebar

regions[right] = Right sidebar

regions[content] = Content

regions[header] = Header

regions[footer] = Footer

; Features not commented out here appear as checkboxes

; on the theme configuration page for this theme.

;features[] = logo

;features[] = name

;features[] = slogan

;features[] = mission

;features[] = node_user_picture

;features[] = comment_user_picture

features[] = search

;features[] = favicon

features[] = primary_links

features[] = secondary_links

As it says in the comment above (lines beginning with a ‘;’ are comments that are ignored by Drupal), the only 2 lines that are required are name and core. These two, along with the description are displayed on the page Administer > Site Building > Themes as you can see in the image below.

The engine parameter determines which template engine you intend to use in your theme. Smarty and PHPTAL are supported by default and it is possible to install others but I stick to the default engine which is PHPTemplate. The regions settings refer to areas of the web pages that you will use in your theme. More on them in the next tutorial. The features settings refer to features that you may need in your site. Any that you uncomment in your .info file will appear on the page Administer > Site Building > Themes and click the ‘configure’ link next to your theme. Again I will say more about these in later tutorials.

Once you have created you theme’s directory and its .info file you will need to add the other files that make up the theme. The quickest way to do this is by copying over the files from another theme. Go to the directory /themes/garland and copy over all the files (with the exception of the garland.info file) to your theme directory. You can now navigate to Administer > Site Building > Themes and switching to your new theme. Once you do this and then navigate back to the front page of your site you will see that your site looks the same as it did before but the difference is that you are now using the new theme and you are free to change things! You can prove this to yourself by editing the file page.tpl.php that you have copied over and refreshing the page on your screen to see your changes appear.

Lets look in slightly more detail at the files in your new theme directory. The file page.tpl.php determines the layout of your site. Every page on your site uses this file as its template. You should only put code in here that you want to appear on every page in your site. The file node.tpl.php controls the layout of the content of the page that you and your users will create by navigating to Administer > Create Content. Content created by users of the Drupal CMS is contained within nodes. (More on them in a later tutorial). The file block.tpl.php controls the look and feel of the blocks displayed in the left and right columns of your page and comment.tpl.php controls the look and feel of user comments on your pages. The images directory, as you would expect contains images used in your theme and the file style.css contains the CSS responsible for the look and feel of the site.

I try not to overwhelm readers with too much information in one article which is why I try and limit each of my tutorials to 1000 words. I’m not going to go into any more detail right now about how to change your theme to get the look and feel you require. It is enough for now that you are able to create your own theme. Instead I would urge you to experiment by editing the files mentioned above for yourself and seeing the results of the changes you make. I’ll explain more about these files in my next article.