Learning Drupal 6 Module Development: A practical tutorial for creating your first Drupal 6 modules with PHP
Header block body. This block shows you what a block looks like in the header region and does not have a title because the title heading would cause a WCAG AA heading nesting error.
Candy Corn is fun, orange, vegan, fluid, and XHTML 1.0 Strict, passing both the W3C and TV tests. TV says it is WCAG AA and US 508. Wave detected no accessibility errors. Cynthia Says it is WAI and US 5.08 as far as a computer can check.
Candy Corn demonstrates an interesting menu layout. I converted Candy Corn from Drupal 4 to 5 and today I decided to make a Drupal 6 version. This page describes the steps so you can converted your Drupal 5 themes to Drupal 6. The results of this conversion are not loaded up at drupal.org. Download candy-corn.7z, the smallest download, or a big old fashioned candy-corn.zip file. The downloads are 6.x-0.2 and incorporate Superfish.
7-Zip files save download time and disk space. Get 7-Zip for your computer at 7-zip.org.
Start with a copy of Candy corn from Drupal 5 and name the directory candy-corn. Spaces create a problem with some operating systems so replace the space with something else. The underscore character is popular but the underscore may be invisible in a link and underscore cannot be used in CSS class names. We will use the dash, -, in the directory name, the file name, and the class names.
You should now have the following directory containing the theme.
/home/example/public_html/sites/all/themes/candy-corn
The first part, home, is common on Web servers. The next part, example, is the name allocated to your Web site account by the ISP hosting the site or, if you have a Virtual Private Server controlled by WHM and Cpanel, the account name you allocated in WHM. public_html is a name used by the CentOS distribution of Linux commonly used by ISPs. sites/all/themes is the place for your themes in Drupal 6.
You need a .info file for themes in Drupal 6. The file is similar to the .info file used in Drupal modules. The .info file can contain comments starting with a semi colon, ;, so start documenting your theme with a comment similar to the following.
; Candy Corn converted to Drupal 6 at PeterMoulding.com.
You tell Drupal the name of the theme by adding the following line. This is the public name Drupal uses in the theme list. Internally Drupal will use the theme directory name.
name = Candy Corn
Add the following description. This is the text displayed under the theme name in the theme list. You can also add a screen shot to show the result.
description = Corny orange theme appealing to vegetarians.
I mentioned a screenshot. You can identify the screenshot with a line similar to the following. I made it a comment because I do not yet have a screenshot.
;screenshot = screenshot.png
The project line is optional. When you produce lots of themes, you can group them into projects.
project = "Drupal for Vegans"
Give your theme a version so people can tell the difference between versions of your theme. The following common format tells people the theme is for any version of Drupal 6 and is an early beta version, 0.1, of the Drupal 6 version.
version = "6.x-0.1"
Drupal will check the version of Drupal need for the theme. This will be important when Drupal 7 arrives and you are in the middle of swapping your themes over.
core = "6.x"
Drupal can use multiple theme engines to apply your theme to the page. The built in theme engine is phptemplate. Request phptemplate for your theme using the following line.
engine = phptemplate
You can optionally indicate the date when the theme was last updated. This is usually inserted automatically by version control software. The version is more important because it can be understood by humans.
datestamp = "1230509227"
The following line is optional because it is the default in Drupal. You only have to add stylesheets lines when you use more than one stylesheet or you use a name different to the default.
stylesheets[all][] = style.css
You have a file named page.tpl.php. The page part means it builds the page set to the Web browser. The tpl part means it is a template file. The PHP part tells your Web server to pass the file through PHP for processing and it tells intelligent editing software to highlight the PHP components in the file.
The file should start with the following line to tell PHP that the next lines are PHP.
<?php
After the PHP line, add comments using the following multiple line format. You can then add additional comments at any time.
/*
Candy Corn converted to Drupal 6 at PeterMoulding.com.
*/
The following line is near the top and tells the web browser the language you use. The format is Drupal 5.
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
Here is the Drupal 6 format:
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
Why is there a difference? (Warning, the following is programming talk not suitable for anyone in awe of the intellectual capabilities demonstrated by Paris Hilton.) The language used to be stored in something called a string and is now stored in something called an object. String are simple and objects flexible.
The column on the left is named $left in Drupal 6 and was named $sidebar_left in Drupal 5. You have to convert all occurrences of $sidebar_left to $left in the Candy Corn page.tpl.php. The following lines show the before and after HTML.
if($sidebar_left)
if($left)
<div class="left_news"><p> </p><?php print $sidebar_left; ?></div>
<div class="left_news"><p> </p><?php print $left; ?></div>
The node.tpl.php applies theme structure to nodes. The Drupal documentation explains nodes. When you edit a page, you are editing a node.
The Candy Corn D5 node.tpl.php file contained display elements in paragraphs. Some of those elements can contain HTML that is illegal in paragraphs. Change the paragraph element to a division because a devision is similar to a paragraph but can contain almost any HTML. The following two lines show the before and after HTML.
<p><?php print $terms; ?></p>
<div><?php print $terms; ?></div>
I converted all the GIF files to PNG, the modern open format for graphics.
This theme includes a standard logo so switch on Use the default logo.
This theme includes a standard shortcut icon so switch on Use the default shortcut icon.
The original Candy Corn used fixed positioning for the left column and that always creates problems. I changed the positioning to float left.
The new beta version has Superfish added. If you are a theme developer, you will have to read the code to see the changes.
The following code is from another theme, the Drupal 5 version of Mondrian, from the template.php file. Note the part containing drupal_add_css. That part is no longer needed because it is replaced by the stylesheet specification in the .info file. When you are converting a theme from Drupal 5 to 6 and find the template.php file is adding stylesheets, remove the code and specify the stylesheets in the .info file.
function _phptemplate_variables($hook, $vars) {
switch($hook) {
case 'page': {
drupal_add_css($vars['directory'] . '/layout.css', 'theme');
drupal_add_css($vars['directory'] . '/typography.css', 'theme');
drupal_add_css($vars['directory'] . '/system.css', 'theme');
$vars['styles'] = drupal_get_css();
}
case 'node':
if (count($vars['node']->taxonomy)) {
$vars['terms'] = t('Tags: !tags', array('!tags' => $vars['terms']));
}
if ($vars['submitted']) {
$vars['author'] = t('By: !user', array('!user' => theme('username', $vars['node'])));
}
break;
}
return $vars;
}
Here is the code after the change:
function _phptemplate_variables($hook, $vars) {
switch($hook) {
case 'node':
if (count($vars['node']->taxonomy)) {
$vars['terms'] = t('Tags: !tags', array('!tags' => $vars['terms']));
}
if ($vars['submitted']) {
$vars['author'] = t('By: !user', array('!user' => theme('username', $vars['node'])));
}
break;
}
return $vars;
}
Here are the lines in the .info file:
stylesheets[all][] = style.css
stylesheets[all][] = layout.css
stylesheets[all][] = typography.css
stylesheets[all][] = system.css
Content block body. This block shows you what a block looks like in the content region.