node.tpl.php Overview

Here's the official word from Drupal.org on node.tpl.php:

This template controls the display of a node, and a node summary.

View the Overview of node.tpl.php at Drupal.org

Node?

No really, what is a node? A node is an individual piece of content, so a blog post, a book page, a forum entry and an original CCK type entry are all nodes. So node.tpl.php is the template file that controls the display of nodes*.

node.tpl.php Basics

node.tpl.php looks very similar to page.tpl.php. That is no coincidence - node.tpl.php and page.tpl.php are meant to be used together.

node.tpl.php is the template for displaying generic nodes or individual pieces of content. For instance, when you're looking at the perma-link for a blog post you're seeing a single node displaying within the page template. You'll note that the URL for that perma-link will be something like "node/114." So a node is the unique piece of content on any page. Sometime multiple nodes are displayed on a page.

Where page.tpl.php is the template that displays the entire Drupal system, node.tpl.php is the individual piece of content that is outputted within page.tpl.php.

Like all *.tpl.php files this document contains XHTML and some embedded PHP. This particular file becomes the structure for your individual piece of content.

The theme_node Function

Like page.tpl.php, node.tpl.php is a template file used to override the default output of the theme function theme_node.

The theme_node function looks very similar to theme_page. It's purpose is to return a themed node. The default mark-up that is outputted isn't perfect. Here is an issue with the default output:

  • The <small> tag is used to contain the $links and the $terms - deprecated tags that only have a presentational purpose should not be used. CSS is preferred.

node-$type.tpl.php

*If you have a node.tpl.php file in your theme, this file becomes the default template that is used to display all node types (book, blog, page, forum, etc.).

You can also make *.tpl.php files for each node-type. An easy way to do this is to duplicate the node.tpl.php file and simply rename the filename to node-$type.tpl.php

drupal/themes/my_theme/node.tpl.php
drupal/themes/my_theme/node-book.tpl.php
drupal/themes/my_theme/node-blog.tpl.php
drupal/themes/my_theme/node-page.tpl.php
drupal/themes/my_theme/node-forum.tpl.php

The *.tpl.php file that has a name that corresponds with a recognized node-type (using the syntax above) will take precedence over node.tpl.php.

node-book.tpl.php for instance corresponds to the node type of "book".

creating a node.tpl.php file

node.tpl.php in box_grey

We looked at page.tpl.php in box_grey which is a great, simple theme. It does have some limitations though:

  • Tables are still used for visual Layout
  • Structural tags are used strictly for clearing: <br class="clear" />
  • Some static title and alt values are explicitly set

The default node.tpl.php mark-up on the other hand is quite usable. It's not nearly as complex as far as structure goes because it does not require any mark-up for layout. It is just the content after all:

node.tpl.php default code

<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
<?php if ($page == 0): ?>
<h2><a href="/<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php print $picture ?>

<div class="info"><?php print $submitted ?><span class="terms"><?php print $terms ?></span></div>
<div class="content">
<?php print $content ?>
</div>
<?php if ($links): ?>

<?php if ($picture): ?>
<br class='clear' />
<?php endif; ?>
<div class="links"><?php print $links ?></div>
<?php endif; ?>
</div>

There is still one small issue with the code above:

  • Structural tags are used strictly for clearing: <br class="clear" /> - it would be best to remove this tag

node.tpl.php modified code

<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
<?php if ($page == 0): ?>
<h2><a href="/<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php print $picture ?>

<div class="info"><?php print $submitted ?><span class="terms"><?php print $terms ?></span></div>
<div class="content">
<?php print $content ?>
</div>
<?php if ($links): ?>

<?php if ($picture): ?>
<?php endif; ?>
<div class="links"><?php print $links ?></div>
<?php endif; ?>
</div>

The <br /> tag has been removed from the above code.

Creating a node.tpl.php document

  1. Create a new plain text document in the theme folder you created. Name this file node.tpl.php
drupal/themes/my_theme/node.tpl.php
  1. Copy the "node.tpl.php modified code" above and paste it into your node.tpl.php and save your document
  2. Examine the available variables for node.tpl.php
  3. Use the appropriate syntax to apply any additional node.tpl.php variables

node.tpl.php Variables

You can use the variables on this page to print out dynamic content in your node.tpl.php document.

The following list and descriptions are from Drupal.org

View the PHP syntax used to apply these variable to your *.tpl.php file.

$title
Title of node.
$node_url
Link to node.
$terms
HTML for taxonomy terms.
$name
Formatted name of author.
$date
Formatted creation date.
$sticky
True if the node is sticky on the front page.
$picture
HTML for user picture, if enabled.
$content
Node content, teaser if it is a summary.
$links
Node links.
$taxonomy (array)
array of HTML links for taxonomy terms.
$node (object)
The node object.
$main
True if the node is appearing in a context, like the front page, where only the teaser should be shown.
$page
True if the node is being displayed by itself as a page.
$submitted
Translated text, if the node info display is enabled for this node type.