Creating custom content and block placement regions in Drupal themes/templates

Configuring Drupal Theme Templates for More Content Regions

Drupal templates make it possible for site developers and designers to control the layout of page content for presentation. Adding regions to your template for the presentation of dynamic content within your XHTML is the main purpose of a template. These instructions are meant for use with the PHPtemplate engine in Drupal 4.7 and higher.

Requisite knowledge

You do not have to be a PHP expert or a Drupal 'hook' guru to begin working on a template that fits your website's branding. If you pay special attention to the following code and use your basic understanding of coding syntax (make sure that all open sequences are properly closed), you can effectively edit or create your template from an existing static site template or a designer's Photoshop mockup.

Depending on your template development workflow, this process comes at the end of the visual layout development cycle when you have an XHTML file of the desired template. This document will guide you through the process of replacing HTML regions with Drupal dynamic regions to which you can place content from the block configuration menu.

Procedure

  1. In your theme's folder, find or create the file named template.php
  2. In that file, place the following code; adding and renaming the variables as necessary to match the number and names of the desired regions:

    // creating custom regions
    function templatename_regions() { return array(
    'siteheader' => t('siteheader'),
    'somefloater' => t('somefloater'),
    'top_banner' => t('top banner'),
    'content' => t('content'),
    'left' => t('left sidebar'),
    'right' => t('right sidebar'),
    'footer' => t('footer') );
    }

  3. Make sure that you replace the section of the function name in bold and italic into the exact folder-name of your template.
  4. The first section of each line represents the variable name of the region and it must NOT have spaces in it
  5. The second section t('somename') is the string label of this region and it can have spaces
  6. Save the template.php file
  7. Open the page.tpl.php file within the drupal theme that you named within the function that you just saved
  8. Using the following syntax, and the variable name (first part) that you gave to name the regions in template.php, place the regions within your site layout as you desire. As demonstrated below, it is recommended that you enclose these regions with identifiers to be able to style the content using CSS (we will not talk about using font tags because they are not Web Standards compliant and we are not about to show you how to do the wrong thing). <div id="top_banner"><?php print $top_banner ?></div>
  9. Save your page.tpl.php file and refresh your website.
If you login to your website and check the available options in the block placement settings, you will see the new regions available for use.

If you did not understand how to do this, contact iDonny for assistance in quickly creating web standards comliant Drupal themes and templates

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Fri, 2008-03-14 01:53 — guest (not verified)

xHTML/CSS to Drupal 6 Theme - References

I've recently come across your site while googling for Drupal 6 themes.
You have some very helpful articles on Drupal. I've just finished reading
your article:
http://cmsproducer.com/configuring-drupal-theme-templates-content-regions
I found it quite useful but still have some questions. I've created my own
site: -------- in xHTML and CSS. I'm in the process of learning
how to convert it to a Drupal 6 theme. After reading over the Drupal 6
handbook at Drupal.org, I'm still a bit confused on how I insert PHP
snippets into my xHTML. What's causing me the most trouble is trying to
figure out how to convert my navigation menu to PHP if and print
statements while still maintaining my ids and classes that control the
styling.

I've considered purchasing the Pro Drupal Development book, but thought it
might be outdated since it was written during Drupal 5. If you know of any
other sources for creating a Drupal theme from scratch I would greatly
appreciate it.

Fri, 2008-03-14 01:57 — iDonny

From PHP to front-end markup

You can/should use XHTML to create the more general frame of content regions to which you can have drupal write the content and the blocks. The approach with menus is to create regions to which you can send drupal PHP blocks. In drupal, you create the menus (using the Drupal menu system), and then use CSS to manage how each menu block is formatted.

The PHP stuff is transferred to the front-end theme by the theme (template.php, and page.tpl.php). Here is a sample showing you XHTML and some PH blocks written in it:
Each of the PHP variables being printed represents blocks or other objects that Drupal writes into XHTML

Let me know if you have more questions (I will post the question and the answer on the site for others with similar questions to benefit from)

<div id="container">
<div id="content">
<div id="content_body">
<?php print $messages ?>
<?php if ($title) { ?><h1><?php print $title ?></h1><?php } ?>
<div class="tabs"><?php print $tabs ?></div><!-- /tabs -->
<?php print $content; ?>
</div><!-- /content_body -->
<div id="related"><?php print $related ?></div><!-- /related -->
</div><!-- /content -->

<div id="footer"><?php print $footer_message ?></div><!-- /footer -->

<div id="header">
<a href="<?php print $base_path ?>" title="<?php print $site_slogan ?>" id="site_logo"><h1>iDonny Photography</h1>
<h4>... a new perspective</h4></a>
</div><!-- /header -->
</div><!-- /container -->
<?php print $closure ?>

Valid XHTML 1.0 Strict
This site is accepts Oped ID authentication for login
This Website is Built Using Semantic Markup and Cascading Style Sheets (CSS)
Some usage rights are reserved, please contact us for approval before using it