Dynamic Theming in Drupal 6 - Part 1

Exclusive offer: get 50% off this eBook here
Drupal 6 Themes

Drupal 6 Themes — Save 50%

Create new themes for your Drupal 6 site with clean layout and powerful CSS styling

$23.99    $12.00
by Ric Shreves | December 2008 | MySQL Content Management Drupal Open Source PHP

The Drupal system, when combined with the PHPTemplate engine, gives you the ability to create logic that will automatically display templates or specific elements in response to the existence of certain conditions. In this two part article by Ric Shreves, we will look at running multiple templates, and at creating dynamic elements and styles. Among the techniques covered in these articles ( Part 1 and Part 2 ) are: using suggestions—naming conventions—to control template display, the use of $body_classes to create dynamic styling, and the implementation of the preprocessor function.

Using Multiple Templates

Most advanced sites built today employ multiple page templates. In this section, we will look at the most common scenarios and how to address them with a PHPTemplate theme.

While there are many good reasons for running multiple page templates, you should not create additional templates solely for the purpose of disabling regions to hide blocks. While the approach will work, it will result in a performance hit for the site, as the system will still produce the blocks, only to then wind up not displaying them for the pages. The better practice is to control your block visibility.

Using a Separate Admin Theme

With the arrival of Drupal 5, one of the most common Drupal user requests was satisfied; that is, the ability to easily designate a separate admin theme. In Drupal, designating a separate theme for your admin interface remains a simple matter that you can handle directly from within the admin system.

To designate a separate theme for your admin section, follow these steps:

  1. Log in and access your site's admin system.
  2. Go to Administer | Site configuration | Administration theme.
  3. Select the theme you desire from the drop-down box listing all the installed themes.
  4. Click Save configuration, and your selected theme should appear immediately.

Multiple Page or Section Templates

In contrast to the complete ease of setting up a separate administration theme is the comparative difficulty of setting up multiple templates for different pages or sections.

The bad news is that there is no admin system shortcut—you must manually create the various templates and customize them to suit your needs. The good news is that creating and implementing additional templates is not difficult and it is possible to attain a high degree of granularity with the techniques described below. Indeed, should you be so inclined, you could literally define a distinct template for each individual page of your site.

Drupal employs an order of precedence based on a naming convention (or "suggestions" as they are now being called on the Drupal site). You can unlock the granularity of the system through proper application of the naming convention. It is possible, for example, to associate templates with every element on the path, or with specific users, or with a particular functionality—all through the simple process of creating a new template and naming it appropriately.

The system will search for alternative templates, preferring the specific to the general, and failing to find a more specific template, will apply the default page.tpl.php. Consider the following example of the order of precedence and the naming convention in action.

Dynamic Theming in Drupal 6 - Part 1

The custom templates above could be used to override the default page.tpl.php and theme either an entire node (page-node.tpl.php), or simply the node with an ID of 1 (page-node-1.tpl.php),or the node in edit mode (page-node-edit.tpl.php), depending on the name given the template.

In the example above, the page-node templates would be applied to the node in full page view. In contrast, should you wish to theme the node in its entirety, you would need to intercept and override the default node.tpl.php.

The fundamental methodology of the system is to use the first template file it finds and ignore other, more general templates (if any). This basic principle, combined with proper naming of the templates, gives you control over the template used in various situations.

The default suggestions provided by the Drupal system should be sufficient for the vast majority of theme developers. However, if you find that you need additional suggestions beyond those provided by the system, it is possible to extend your site and add new suggestions. See http://drupal.org/node/223440 for a discussion of this advanced Drupal theming technique.

Let's take a series of four examples to show how this feature can be used to provide solutions to common problems:

  1. Create a unique homepage template.
  2. Use a different template for a group of pages.
  3. Assign a specific template to a specific page.
  4. Designate a specific template for a specific user.

Create a Unique Homepage Template

Let's assume that you wish to set up a unique template for the homepage of a site. Employing separate templates for the homepage and the interior pages is one of the most common requests web developers hear.

With Drupal, you can, without having to create a new template, achieve some variety within a theme by controlling the visibility of blocks on the homepage. If that simple technique does not give you enough flexibility, you will need to consider using a dedicated template that is purpose-built for your homepage content.

The easiest way to set up a distinct front page template is to copy the existing page.tpl.php file, rename it, and make your changes to the new file. Alternatively, you can create a new file from scratch. In either situation, your front-page-specific template must be named page-front.tpl.php. The system will automatically display your new file for the site's homepage, and use the default page.tpl.php for the rest of the site.

Note that page-front.tpl.php is whatever page you specify as the site's front page via the site configuration settings. To override the default homepage setting visit Administer | Site configuration | Site information, then enter the URL you desire into the field labeled Default home page.

Use a Different Template for a Group of Pages

Next, let's associate a template with a group of pages. You can provide a template to be used by any distinct group of pages, using as your guide the path for the pages. For example, to theme all the user pages you would create the template page-user.tpl.php.

To theme according to the type of content, you can associate your page template with a specific node, for example, all blog entry pages can be controlled by the filepage-blog-tpl.php. The table below presents a list of suggestions you can employ to theme various pages associated with the default functionalities in the Drupal system.

Suggestion

Affected Page

page-user.tpl.php

user pages

page-blog.tpl.php

blog pages (but not the individual node pages)

page-forum.tpl.php

forum pages (but not the individual node pages)

page-book.tpl.php

book pages (but not the individual node pages)

page-contact.tpl.php

contact form (but not the form content)

 

Assign a Specific Template to a Specific Page

Taking this to its extreme, you can associate a specific template with a specific page. By way of example, assume we wish to provide a unique template for a specific content item. Let's assume our example page is located at http://www.demosite.com/node/2/edit. The path of this specific page gives you a number of options. We could theme this page with any of the following templates (in addition to the default page.tpl.php):

  • page-node.tpl.php
  • page-node-2.tpl.php
  • page-node-edit.tpl.php

A Note on Templates and URLs
Drupal bases the template order of precedence on the default path generated by the system. If the site is using a module like pathauto, which alters the path that appears to site visitors, remember that your templates will still be displayed based on the original paths. The exception here being page-front.tpl.php, which will be applied to whatever page you specify as the site's front page via the site configuration settings (Administer | Site configuration| Site information).

Designate a Specific Template for a Specific User

Assume that you want to add a personalized theme for the user with the ID of 1(the Drupal equivalent of a Super Administrator). To do this, copy the existing page.tpl.php file, rename it to reflect its association with the specific user, and make any changes to the new file. To associate the new template file with the user, name the file: page-user-1.tpl.

Now, when user 1 logs into the site, they will be presented with this template. Only user 1 will see this template and only when he or she is logged in and visiting the account page.

The official Drupal site includes a collection of snippets relating to the creation of custom templates for user profile pages. The discussion is instructive and worth review, though you should always be a bit cautious with user-submitted code snippets as they are not official releases from the Drupal Association. See, http://drupal.org/node/35728

Dynamically Theming Page Elements

In addition to being able to style particular pages or groups of pages, Drupal and PHPTemplate make it possible to provide specific styling for different page elements.

Associating Elements with the Front Page

Drupal provides $is_front as a means of determining whether the page currently displayed is the front page.

$is_front is set to true if Drupal is rendering the front page; otherwise it is set to false. We can use $is_front in our page.tpl.php file to help toggle display of items we want to associate with the front page.

To display an element on only the front page, make it conditional on the state of $is_front. For example, to display the site mission on only the front page of the site, wrap $mission (in your page.tpl.php file) as follows:

<?php if ($is_front): ?>
<div id="mission">
<?php print $mission; ?>
</div>
<?php endif; ?>

To set up an alternative condition, so that one element will appear on the front page but a different element will appear on other pages, modify the statement like this:

<?php if ($is_front): ?>
//whatever you want to display on front page
<?php else: ?>
//what is displayed when not on the front page
<?php endif; ?>
$is_front is one of the default baseline variables available to all templates.
Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Dynamically Styling Modules and Blocks

The default templates and themable functions supply much of the key output on a Drupal site, and many are positioned on the page through the assignment of blocks to regions. In this article, we want to look at how you can control the formatting of a site's various modules and blocks.

Remember, suggestions only work when placed in the same directory as the base template. In other words, to get block-user.tpl.php to work, you must also place block.tpl.php inside in the same directory.

Dynamically Styling Blocks

Block output is controlled by the block.tpl.php template. As we have seen in other areas, PHPTemplate will look to the names given to multiple template files to determine which template to display. The order of precedence used for the block template is consistent with that used elsewhere:

Dynamic Theming in Drupal 6 - Part 1

The naming convention determines what is displayed. At the most specific, you can provide a template to apply to the blocks of a specific module of a specific delta (block-modulename-delta.tpl.php).You can also attach a template to blocks of a module by module name (block-modulename.tpl.php), orto the blocks of a particular region (block-regionname.tpl.php). Failing the presence of any of the above, the system applies the default block.tpl.php template.

Note that the order of precedence includes the name of the module that produces the output being displayed in the block. Delta is a system-generated value that provides a unique identifier for each block.

All blocks manually created by the user share the module name "block.".

If you are not certain of the provenance of your block, that is, the name of the module that produces the block or the block's delta, try using the Theme Developer feature of the Devel module. If you have the Devel module installed on your site, you can harvest this information in the form of a list of suggestions quite easily. To use this feature:

  1. Install the Devel module.
  2. Activate the Theme Developer option.
  3. Open your browser and go to the page where your block appears.
  4. Click the Themer Info checkbox on the bottom left of the screen, then click on the block in question.

When you click on the element, a pop up will appear, like the one in the following illustration:

Dynamic Theming in Drupal 6 - Part 1

Looking at the above screenshot, you can see the suggestions relevant to the block in our example:

Template

Will apply to...

block-user-2.tpl.php

The Who's Online block

block-user.tpl.php

All blocks output by the User module

block-left.tpl.php

All blocks in the sidebar-left region

block.tpl.php

All blocks

 

You can also use the Theme Developer extension to help you identify potential suggestions for page templates.

Dynamically Styling the Comment Module

The base template of the comment module can be dynamically styled using the suggestions provided by the system. The principal comment template, comment.tpl.php, can be styled according to the node type with which the comment is associated by using the syntax comment-[type].tpl.php. The default comment wrapper template (comment-wrapper.tpl.php) can also be styled according to the node with the syntax comment-wrapper-[type].tpl.php.

Dynamically Styling the Forum Module

The base templates of the forum module is forums.tpl.php. There are several options open for suggestions for both forum containers and topics:

Suggestion

Will apply to...

forums-topics.tpl.php

Forum topics

forums-topics-[forumID].tpl.php

Forum topics belonging to a forum of a specific ID

forums-containers.tpl.php

Forum containers

forums-containers-[forumID].tpl.php

Forum containers belonging to a forum of a specific ID

forums-[forumID].tpl.php

Forum of a specific ID.

 

Dynamically Styling the Polls Module

The Polls module is the subject of a number of default templates. There are default suggestions available for all the key templates:

Default template

Suggestion syntax

poll-results.tpl.php

poll-results-[block].tpl.php

poll-vote.tpl.php

poll-vote-[block].tpl.php

poll-bar.tpl.php

poll-bar-[block].tpl.php

 

Dynamically Styling Nodes

PHPTemplate provides a specific template for nodes—node.tpl.php. Using the same principles of precedence we've seen throughout, you can provide alternative node templates to suit your needs. To provide a template for the blog node, for example, create node-blog.tpl.php; for the story node, node-story.tpl.php. In the absence of a more specific template, the system will apply the default node.tpl.php file. The table below shows the suggestions for the default system:

Suggestion

Affected node

node-blog.tpl.php

blog entries

node-forum.tpl.php

forum entries

node-book.tpl.php

book entries

node-story.tpl.php

story entries

node-page.tpl.php

page entries

 

Note that you cannot use node-admin.tpl.php to theme your admin pages. As noted elsewhere in this article, you can style the admin section either by setting an admin-specific theme or by creating the page-admin.tpl.php template.

Summary

This article covers the basics needed to make your Drupal theme responsive to the contents and the users. In this article we had a look at running multiple templates, and at creating dynamic elements and styles.

In Part 2 we will discuss about Creating Dynamic CSS Styling and Working with Template Variables.

Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Ric Shreves

Ric Shreves is a web applications consultant and tech author. He’s been building websites since the mid-90s and writing about tech for almost as long. Ric specializes in open source content management systems and has written texts on each of the big three: WordPress, Joomla! and Drupal.

Ric is the founding partner of water&stone, a digital agency that focuses on new media and online marketing. He works with clients on digital marketing strategy and supervises the SEO implementation team. Ric lives in Bali and divides his time between the island and Singapore.

Books From Packt

Drupal 6 Social Networking
Drupal 6 Social Networking

CherryPy Essentials: Rapid Python Web Application Development
CherryPy Essentials: Rapid Python Web Application Development

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Drupal for Education and E-Learning
Drupal for Education and E-Learning

PHP 5 CMS Framework Development
PHP 5 CMS Framework Development

AJAX and PHP: Building Responsive Web Applications
AJAX and PHP: Building Responsive Web Applications

Web Content Management with Documentum
Web Content Management with Documentum

Drupal 6 JavaScript and jQuery: RAW
Drupal 6 JavaScript and jQuery: RAW


Your rating: None Average: 5 (5 votes)
You save my day! by
Thanks! This is exactly what i was looking for and presented in such a clear manner! Awesome!
thank you by
It is very helpful
using different layouts by
I like this idea of using page-start-tpl.php for a specific content type but have noticed that all pages attached to the fr uses the same template. for instance start/page2. What I really want is to use a different template for a start page (Note i didn't say front page) then for page2 I want to use the regular page.tpl.php template. How do I do that without using panels or display views?
Thank you by
Clear and very useful, thank you.
Nice! by
Vey nice article, thanks

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
M
v
x
b
Y
b
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software