Skip to Content

page.tpl.php Overview

| | |

After completing the basic steps outlined in PHPTemplate Basics, you should have a page.tpl.php file in your theme folder.

If not, complete the following step:

  1. Create a new plain text document in the theme folder you created. Name this file page.tpl.php

If you're using a web development-specific text editor, you can set your syntax colouration to "HTML."

drupal/themes/my_theme/page.tpl.php

The folder name "my_theme" above is entirely up to you. It is important to note that the name of the folder will become the name of your theme as far as the Drupal system is concerned.

page.tpl.php Basics

page.tpl.php is the main template that displays the entire Drupal system layout. node.tpl.php (which is the template for an individual piece of content) is outputted within page.tpl.php for instance.

Strictly speaking, page.tpl.php is the only file required in a PHPTemplate theme. Like all *.tpl.php files this document contains XHTML and some embedded PHP. This particular file becomes the structure for your entire Drupal site.

In more technical terms, page.tpl.php overrides the theme('page') function, which outputs the

final page content, along with other interface-level elements.

The specifics of what structural mark-up you use is up to you.

The "theme_page" Function

Let's look at the Drupal "theme_page" Function.

If you scroll down to the "Code" area of this page you will see the function that outputs the default mark-up for the entire Drupal system. The syntax is of course appropriate for a PHP function.

If you wanted to recreate this exact mark-up code in PHP in XHTML (with embedded PHP) you could. This is a recommended exercise if you want to really know page.tpl.php in depth.

Let's take a small sample of this mark-up and convert it to XHTML:

  $output .= "\n<!-- begin content -->\n";
  $output .= $content;
  $output .= "\n<!-- end content -->\n";

Code Snippet from "theme_page" Function

The above code would look more like this in your page.tpl.php document:

  <!-- begin content -->
  <?php print $content ?>
  <!-- end content -->

Code converted to XHTML and PHP. Note the embedded <?php print ?> syntax above. You could also use PHP shorthand like so <?= ?>.

Here's a slightly more advanced sample:

function theme_page($content) {
  $output = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n";
  $output .= '<html xmlns="http://www.w3.org/1999/xhtml">';
  $output .= '<head>';
  $output .= ' <title>'. (drupal_get_title() ? strip_tags(drupal_get_title()) : variable_get('site_name', 'drupal')) .'</title>';
  $output .= drupal_get_html_head();
  $output .= theme_get_styles();

  $output .= ' </head>';
  ...
  return $output;
}

Code Snippet from "theme_page" Function

...becomes:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><?php print $title ?></title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <?php print $head ?>
    <?php print $styles ?>
  </head>
  ...
</html>

Code converted to XHTML.

The "theme_page" Function as a theme

There are a few problems with the "theme_page" function mark-up:

  • Inline Styles
  • Tables for Layout
  • No logic applied to show an element only if it is being used

"theme_page" Function Thoughts

You'll note that tables are used to lay out the visual structure of the theme by default. Those in the know about Web Standards will recognize this as an non-semantic use of mark-up. This is just one of the things you will want to improve by creating your own page.tpl.php document.

‹ PHPTemplate Basicsupbox_grey page.tpl.php ›
printer-friendly version | add new comment