In part one, we covered the basics of how Drupal themes work and the base files that are used. We left off on template files, which are the heart of Drupal themes. Today we are going to continue with template files and give some examples of ones every theme will most likely use.
We covered html.tpl.php in part 1, but it was also mentioned that you will most likely not override this file, and it was used more for example purposes. The files we will be going over today are going to be used by any theme you come across and include a lot more bulk than html.tpl.php. The first one we will be covering is page.tpl.php.
page.tpl.php
page.tpl.php is the heart of a Drupal theme. While html.tpl.php provides the basic HTML template for a theme, it is really just a simple wrapper and is so generic that it will never change. The real juicy template you want is the page template. It provide the structure for every page in Drupal, no matter what it is. For an example, we will be looking at the file from the garland theme, which is included with any fresh Drupal install.
<div id="wrapper">
<div id="container" class="clearfix">
<div id="header">
<div id="logo-floater">
<?php if ($logo || $site_title): ?>
<?php if ($title): ?>
<div id="branding"><strong><a href="<?php print $front_page ?>">
<?php if ($logo): ?>
<img
src="<?php print $logo ?>"
alt="<?php print $site_name_and_slogan ?>"
title="<?php print $site_name_and_slogan ?>"
id="logo" />
<?php endif; ?>
<?php print $site_html ?>
</a></strong></div>
<?php else: ?>
<h1 id="branding"><a href="<?php print $front_page ?>">
<?php if ($logo): ?>
<img
src="<?php print $logo ?>"
alt="<?php print $site_name_and_slogan ?>"
title="<?php print $site_name_and_slogan ?>"
id="logo" />
<?php endif; ?>
<?php print $site_html ?>
</a></h1>
<?php endif; ?>
<?php endif; ?>
</div>
<?php if ($primary_nav): print $primary_nav; endif; ?>
<?php if ($secondary_nav): print $secondary_nav; endif; ?>
</div>
<?php if ($page[‘sidebar_first’]): ?>
<div id="sidebar-first" class="sidebar">
<?php print render($page[‘sidebar_first’]); ?>
</div>
<?php endif; ?>
<div id="center"><div id="squeeze">
<div class="right-corner">
<div class="left-corner">
<?php print $breadcrumb; ?>
<?php if ($page[‘highlighted’]): ?>
<div id="highlighted">
<?php print render($page[‘highlighted’]); ?>
</div>
<?php endif; ?>
<a id="main-content"></a>
<?php if ($tabs): ?><div id="tabs-wrapper" class="clearfix"><?php endif; ?>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1<?php print $tabs ? ‘ class="with-tabs"’ : ” ?>>
<?php print $title ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><?php print render($tabs); ?></div><?php endif; ?>
<?php print render($tabs2); ?>
<?php print $messages; ?>
<?php print render($page[‘help’]); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<div class="clearfix">
<?php print render($page[‘content’]); ?>
</div>
<?php print $feed_icons ?>
<?php print render($page[‘footer’]); ?>
</div>
</div>
</div>
</div>
<?php if ($page[‘sidebar_second’]): ?>
<div id="sidebar-second" class="sidebar">
<?php print render($page[‘sidebar_second’]); ?>
</div>
<?php endif; ?>
</div>
</div>
At first glance this can be a bit intimidating, but overall this file is a very simple shell of a website. As we examine the file from top to bottom, we see all the basic parts of a site. We have a header, a few sidebars, a content area, and a footer. The difference between a normal page layout and this one is, again, the use of php variables to include the content.
Your page.tpl.php file can be laid out in any way you want. However, the sections you setup in your info file should be included here. You print your sections using the $page variable and the render() function, which is used in combination throughout the example.
Another thing we see quite often are checks for variables. Like html.tpl.php, there are variables that are only available in this template file. Things such as the blog title, logo, and navigation are included so you can lay them out as you see fit. Check the references section for a link to a list of all the available variables for this page.
node.tpl.php
Quite possibly the most important template in a theme, node.tpl.php is used for a single node page. This is used for any content type that uses the node structure, and typically this is just about any piece of content you have. So let’s take a look at an example file:
id="node-<?php print $node->nid; ?>"
class="<?php print $classes; ?>"
<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<a href="<?php print $node_url; ?>">
<?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<span class="submitted"><?php print $submitted ?></span>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
hide($content[‘comments’]);
hide($content[‘links’]);
print render($content);
?>
</div>
<div class="clearfix">
<?php if (!empty($content[‘links’])): ?>
<div class="links">
<?php print render($content[‘links’]); ?>
</div>
<?php endif; ?>
<?php print render($content[‘comments’]); ?>
</div>
</div>
Like our previous examples, we have a lot of php code referencing variables that are passed through. In this template we have access to all the information about the node, such as the author and comments. While this is a little simpler than the page template, it is equally as important.
One thing to keep in mind, however, is that the node template is being included inside the page template when you are viewing a node. This is one of the most important concepts behind themes, that your template files will create a hierarchy. The HTML template will include the page template, which will include the node template. This is the way the templating engine works.
Between these two files, combined with the others from part one, you have a simple theme. In fact, some of the themes included with Drupal are little more than what we have here. If you add some CSS and the few missing images, you will be good to go.
So this wraps up part two. Keep an eye out for part three, where we will be going over some of the more advanced features of theme building, and some of the other important template files. Just remember, that if you need coding help, all you have to do is Switch On The Code.