Convert any website layout or template into a Drupal theme - easily!
Convert any website layout or template into a Drupal theme - easily!
This lesson has now been posted in the Drupal handbook: http://drupal.org/node/313510
Theming for Drupal is not actually as hard as you may think. Certainly there are more advanced areas of theming possible with Drupal, which may or may not be necessary depending on the needs of your site or whether there are subtle defaults which you wish to change (and which you can learn about if and when they become necessary for your site). Creating the “overall theme” for your site though is very simple.
A Drupal theme is nothing more than a standard website layout, with a few bits of PHP code added in certain places, which you can simply copy/paste into place in order to call up Drupal’s “dynamic” content and features in those spots.
Contributed/downloaded themes are more complex than “your” theme needs to be
You may have looked at various pre-made themes which come with Drupal core, or are available for download, and sighed with frustration at seeing how confusing the code of some of those themes looks.
Contributed themes such as those are created to handle all kinds of “possible” scenarios about how the theme might need to work “for everyone”, allowing the you to dynamically add various columns and other aspects of the layout, and supporting custom theming for many features and modules which you might not even need on your site. These themes usually include a large amount of PHP code that essentially says “if this setting is true, then show this part this way, or else show that”. This makes the theme very flexible, but also very complicated.
However, “your” theme doesn’t need to work for everyone. It only needs to do the things your own site requires and nothing more. All that you need are a few bits of PHP which you can simply copy and paste into your own HTML template, which tell Drupal to load its dynamic content in those spots.
Just a few simple & basic elements make up a Drupal theme
The “main” template file in Drupal is called page.tpl.php. Make a copy of your website layout/template and call it page.tpl.php. Then, simply paste the following bits of code into your layout, in the locations noted (all the code mentioned in this lesson goes in the page.tpl.php file).
The <head> section of your site
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>The side bars or columns of your layout
Most websites have a left and/or right column next to the “main” larger content area. These side bars usually contain various features and information (for instance a log-in form, navigation, recent comments, etc). In Drupal these features/information are called “Blocks”, and you can customize where they show up on your page by going to Administer > Site building > Blocks (admin/build/block). In order for Drupal to know where to put the Blocks though, you need to add some “placeholders” to your theme (Drupal calls these placeholders “Regions”). There are more of these placeholders available (and you can create your own custom ones too) but it’s important to add the side bar one(s) at first, since the admin menu appears in them. Add the below Region(s) to your side bar:
If you’re using Drupal 5:
<?php print $sidebar_left ?>
...and/or....
<?php print $sidebar_right ?>If you’re using Drupal 6:
<?php print $left ?>
...and/or....
<?php print $right ?>Menu system / navigation
Drupal’s default menu for your site’s content is called Primary Links. There is also a Secondary Links menu which can show related sub-pages under the Primary menu. When stripped of all images and styles, a menu in Drupal is nothing more than a nested unordered list, in plain HTML, with links for each list item. You can use CSS to style a menu in any way you want; changing how it looks, whether it is horizontal (like tabs) or vertical, etc.
To make the Primary and Secondary Links menus appear on your site, paste the following into either the top area of your theme (for instance, if your menu is going to be styled as tabs or buttons), or in the sidebar area (for instance if you plan to have your menu show vertically in the sidebar).
Simple way:
Here’s the simple version to use, if you’re already sure you want to use “both” Primary and Secondary Links (or feel free to delete the Secondary Links portion if you don’t need it):
<div id="primary">
<?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->
<div id="secondary">
<?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->More flexible way:
If you’re not sure that you will have both Primary and Secondary Links, you could use the following code instead (it’s the same, but just does a “check” to see if the menus are enabled, and only shows them if they are):
<?php if ($primary_links): ?>
<div id="primary">
<?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->
<?php endif; ?>
<?php if ($secondary_links): ?>
<div id="secondary">
<?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->
<?php endif; ?>The main “dynamic” content of the page
At this point, you’ve added all of the “framework” of your site’s layout which surrounds every page, and is generally similar or the same throughout the entire site. Now though, it’s time to include the area where actual Content will be displayed in the template (different content depending on the page being viewed, of course).
Simply locate the spot in your template where the main content is to be displayed (usually the center of the page, after the header and between any sidebars), and paste the below code in that spot:
<?php if ($breadcrumb or $title or $tabs or $help or $messages): ?>
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php endif; ?>
<?php print $content; ?>Footer: Add a final tag at the bottom of your theme
Paste the following at the end of your page.tpl.php file. You must have this tag at the bottom, which will dynamically include any scripts that need to appear at the bottom of the page, as well as close up any loose ends and tags that might have been left open:
<?php print $closure ?>
</body>
</html>For Drupal 6: Create a YourThemeName.info file
Lastly, in Drupal 6, the one final element is to create a YourThemeName.info file. Simply make a blank file and paste the following code into it, customize it with the appropriate name/description, and save it in the same directory along with the rest of your theme’s template files:
name = YourThemeName
description = Description of YourTheme
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = FooterThe “regions” portion after style.css includes all of Drupal’s “standard” regions, and is recommended so that you can easily remove regions you don’t want to use, or add custom regions. If you want to add a custom region, simply copy one of the region lines and rename it.
That’s all! Paste in the above bits of code into ANY site layout or template, and you have a basic, functional Drupal theme.
Learning more about Drupal theming
There are quite a few more elements you could use in your theme if you want to. Here are a number of excellent resources for learning the more detailed aspects of theming in Drupal:
- Anatomy of a Drupal theme
- Full listing of available Drupal 5 theme variables to choose from for page.tpl.php.
- Full listing of available Drupal 6 theme variables to choose from for page.tpl.php.
- Drupal theming for designers - this is a fantastic article, including screenshots and diagrams to help you clearly understand how Drupal’s theming system works.
- Theme guide (Drupal 6) - Official theming guide on Drupal.org
Very nice article. It seems like it is the right choice for my website to build my own simple theme. Trying to start from the available themes has been really frustrating. But I have a question on something that isn’t covered here. What about themeing outputs of modules? Like how will I control how Views lists will look or how a calendar would look? And is this the right place to ask ? :)
So far as theming other things… theming the output of modules can be done by either a) CSS - using CSS is very often a viable way to get things the way you want… b) In Drupal 6 only, copying the template files provided with the module into your own theme, where your copy then overrides the module’s copy, or… c) If template files aren’t available, the module probably at least has theme functions inside it - search inside the module for “theme” and you can usually copy and paste that theme function out into your template.php where your version overrides. That’s not the best description really, but search for “theme overrides” to learn about it.
Views theming is a different matter, which I’m covering in another article. I’ve not got to Views theming in the article yet, so here’s a starter: http://drupal.org/node/299406#comment-978324