If you have worked on PHP websites that use a database to store content, then the term content management system (CMS) should be familiar. If you are new to the concept of dynamic sites used for managing content, then it's time to join the party.

Content management systems are all the rage of business, bloggers, and independents alike. Bloggers use a CMS even if they're not aware of it. CMS software allows users to view or post and edit content without knowledge of HTML, CSS, or webmaster tasks such as uploading via FTP. The Internet has seen CMS vendors come and go, but in the 21st century it is open source software that has us look at the CMS options of today.

One of the most popular content management systems for PHP is Drupal. Drupal is free software known for rapid web publishing supported by a bevvy of add-on modules and themes. Drupal is community built and community oriented. It is this vibrant community (and higher market share for PHP) that pushes Drupal to the front of businesses looking to cut costs, keep creative, and remain competitive. With such an open community, and tons of free modules available, any Drupal site can adopt trendy web features overnight. This puts more pressure on web designers and developers to create front ends that have a great look and feel. In the Drupal world the look is known as a theme.

Note: Drupal is a social content management software. Sites built on Drupal are notorious for powering social web features (see, for example, the Adobe Flex Showcase site, a noteworthy use of Drupal with Flex). The beauty of Drupal is that it does the heavy lifting for you while it adheres to web standards and easily offers social multimedia publishing.

In this article, you will learn the fundamentals of a Drupal theme and how Dreamweaver CS4 (and Adobe AIR) helps designers produce these themes.

Requirements

In order to make the most of this article, you need the following software:

Dreamweaver CS4

• Try
• Buy

Drupal 6

• Download

Drupal Theme Starter

• Download

Drupal API extension for Dreamweaver

• Download

Prerequisite knowledge

Basic working knowledge of Dreamweaver, web standards (XHTML, CSS), and PHP.

Introducing Drupal themes

Themes for Drupal consist of a mix of PHP and web standards (XHTML and CSS). Purists of PHP can theme Drupal without templates by taking advantage of the Drupal API. Web designers who are comfortable with markup can theme Drupal faster than developers, because the theme layer picks up templates within a theme folder—no custom code necessary. These templates are known commonly as TPL files since the template file name ends in either .tpl, or .tpl.php file extensions.

Drupal allows you to install and run multiple themes at once—one theme for administrators; one theme for site members. This dual theme setup is recommended when trying out newly installed themes, helping prevent unintentional lock-outs from your site in case a new theme has unexpected issues. There are many Drupal themes available for free or purchase. The Drupal community supports web standards; and if you like to sprinkle JavaScript in your web designs you'll be glad to hear that jQuery, a new-wave JavaScript library, ships with Drupal core. Although jQuery use appears mostly in module code, front-end designers should not rule out the power a theme has over Drupal's output. The theme layer is the last stop in a Drupal build process—themes have the final say of what appears and how it is displayed.

Simply put, themes for Drupal are a collection of graphics, styles, and templates. Remember, templates use XHTML, CSS, and some PHP. By nature, a Drupal page is built by the sum of its parts; this is the power of PHP. Each theme has what is known in Drupal as regions that define areas of a page structure with <div> tags. Drupal populates these regions with site content. If you have ever used server-side includes for headers and footers of a web page, then you are familiar with what Drupal is doing behind the scenes with each region. Content known as nodes and blocks, important terms in the Drupal world, fill these regions. Nodes are pages of content, such as news articles or blog posts. Blocks are secondary content such as lists of articles or a new poll, usually appearing in left or right sidebar columns.

Breaking down a theme into regions and content templates allows front-end designers to produce custom templates for pieces such as a page, node, and block. Although the idea of server-side includes might seem comforting, you should know that Drupal does all the heavy lifting. For example, you would not define navigation menus in template files; instead you would define a navigation region in your page template and let Drupal build menus from its database. This is why templates should limit their logic to showing and hiding of region <div> tags. When you wrap regions with conditional logic you allow users to morph a site from a three-column layout into two columns.

Using Drupal themes with Dreamweaver

By default, Dreamweaver can edit any Drupal theme template that ends in .tpl.php, but Dreamweaver isn't familiar with the Drupal API or any of the other custom file types used by Drupal for themes or modules (file types such as .info and .module). To help both the Drupal and Dreamweaver community, I created a free Dreamweaver extension that enables support for Drupal file types and the entire Drupal API (see Figure 1). Be sure you have my Dreamweaver extension and Drupal 6 installed before you continue.

Note: For help with using extensions in Dreamweaver, see Add and manage extensions in Dreamweaver Help.

Figure 1. Drupal API extension for Dreamweaver by XTND.US.

An important workflow feature of Dreamweaver while working with Drupal templates is the ability to apply and modify styles efficiently. To do this in Dreamweaver, you use the feature known as Design Time Stylesheets (located in the secondary menu of the CSS Styles panel). Each template should have a design-time link to each style sheet used by your theme. The Dreamweaver help documentation covers Design Time Stylesheets in more detail.

Each theme requires a .info file that contains the meta information for a theme, such as the theme name, description, style sheets, and regions. This .info file is not a PHP file, but a simple text file and is packaged with each theme for Drupal to recognize. Without this .info file Drupal will not display your theme in the administration area. Figure 2 shows a typical Drupal theme folder (here, a core theme called Garland).

Figure 2. A typical Drupal theme folder and its files.

Looking at a Drupal .info file

A quick glance of the Garland theme files in Figure 2 shows TPL templates (.tpl.php), style sheets, and the theme declaration file known as a .info file (named after its file extension). Note that the folder and file name for the .info file are spelled the same. The .info file is the first file you should create since it will define your regions, scripts, and style sheets. The following example shows a typical Drupal theme .info file:

name = Untitled Theme
description = Our very cool theme made in Dreamweaver CS4.
screenshot = custom_screenshot.jpg
 
version = 1.0
core = 6.x
engine = phptemplate
 
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
 
features[] = logo
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
 
stylesheets[all][] = styles.css
stylesheets[print][] = print.css
        

The theme .info file defines your theme name, a description, regions, features (which I haven't covered yet), and style sheets. Visit your Themes administration page to see the relationship between the .info file values and how Drupal displays these configurations. Additional documentation for Drupal theme .info files is available online.

Using the Drupal Theme Starter AIR application

Dreamweaver (or any text editor) can create and edit Drupal theme .info files, but I think you'll appreciate a free Adobe AIR application that quickly produces custom .info files for themes (Figures 3–5). The Drupal Theme Starter AIR application outputs a custom theme .info file so you don't have to generate that file from scratch. It's best to start with this software since it will prepare a .info file in seconds. Download and launch the application to define your theme .info file, then use Dreamweaver for editing templates and styles. Populate the fields in all three of the theme starter tabs as desired, then click the bottom button Generate Theme to export your custom theme .info file.

Note: When generating a .info file, make sure the file name you export doesn't start with a number or contains special characters or spaces. Drupal will use the file name as the internal id for a theme and its settings.

Figure 3. Drupal 6 Theme Starter AIR application: Define the theme meta info such as name, description, and a screenshot (150px wide).

Figure 4. Define theme regions and features.

Figure 5. Declare theme style sheets and script files.

Dipping into Drupal core

Now, here's the confusing part for Drupal newbies. There is no magic code for templates that only Drupal monks know. All theme templates are based on code that ships with Drupal core. Be sure to download Drupal 6 if you haven't done so already for the following steps. You are going to copy and edit templates from either Drupal core itself or a core theme. By default Drupal uses core templates if your theme is missing any needed items to complete a page and your custom theme templates are essentially custom overrides. You can take code from the default templates, tweak them with your desired markup (and styles), and then activate your new theme in the Drupal administration. Sounds easy? It is.

Launch Dreamweaver CS4 and create a new site definition for your theme folder. This is where you will collect the rest of the files needed for your Drupal theme, so follow the steps below.

1. Make sure your new theme folder is named the same as your .info file.
2. Place your theme .info file into your new theme folder. Remember, the theme .info file name should match its folder name.
3. Quickly open the .info file to see what style sheets or scripts are declared for your theme.
4. Generate empty files for your style sheets and scripts inside the theme folder. You can insert code into these files later.

5. Download and unzip Drupal 6 and open the themes folder. You will copy the following template files from Drupal core into your theme folder, eliminating the need to code templates from scratch.

   • page.tpl.php: The page shell template contains XHTML tags such as <html>, <head>, and <body>, plus all <div> regions listed in the theme .info file. This template can be found in the modules/system folder, or in a core theme folder such as themes/garland.
   • node.tpl.php: Defines rendering of node content which in Drupal are pages, blog posts, news articles, and so on. This template also can be found in the modules/node folder, or in a core theme folder such as themes/garland.
   • block.tpl.php: Template for blocks, which mostly appear in sidebar regions. This template can be found in the modules/system folder, or in a core theme folder such as themes/garland. Copy and edit each template file as you see fit. Make sure you do not alter the file names, as Drupal will look for each template. Sprinkle your own CSS class and id names within the markup. Experiment and have fun.

Each template is used to build a complete page, starting with page.tpl.php, then loading node.tpl.php for each node on screen, and of course, block.tpl.php for any blocks that appear such as a login form, quick search, or lists of content (latest blog posts, for example). Each template has a set of PHP variables that is replaced with your content (for example, $title is used for node and block titles). If you would like to read about templates your theme can include, then visit the Drupal 6 Theme Handbook. Refer to Figure 6 for a visual map of where each template is used. Remember, each template is used like a server-side include.

Warning: Never edit core Drupal files for any reason whatsoever!

Figure 6. This illustration shows where each template is used.

Note that the page.tpl.php template does not have <link> or <script> tags defined in the <head> tag. Drupal internally builds and caches all paths to each include file and renders the lists in proper order: generating CSS <link> tags first, then JavaScript <script> tags; an industry standard practice. Styles can be declared in a single external file or in multiple CSS files. Remember, too many script files and style sheets can affect download performance. To help with performance, Drupal 6 has a standard feature that compresses all the CSS and JavaScript files into single include files, speeding up page loads significantly.

Note: PHP is easy to learn and the Drupal 6 theme layer was built with front-end designers in mind. Everything can be customized through a theme template, or with pure PHP code (known in Drupal as a theme override functions). For those getting comfortable with PHP or Drupal, it is with mixed feelings that I reveal Drupal is not object-oriented and this is for various adoption reasons that have been explained in the Drupal manifesto. Only knowledge of naming conventions is necessary to complete a custom Drupal site, so it's a win-win situation for web designers not versed in heavy PHP.

Installing new Drupal themes

After you have assembled your Drupal templates by copying them from core into your custom theme, verify that Drupal is running, because you will now upload your theme to Drupal.

To recap, you should have at least page.tpl.php, node.tpl.php, and block.tpl.php files in your theme folder, plus the required .info file that defines your theme. As mentioned above, you should never modify any core Drupal files because any changes you make will be lost the next time you update Drupal. However, you will be adding folders to your Drupal installation to house your custom modules and themes within the sites folder.

Go to your Drupal 6 installation folder and open the sites folder. In this folder you can add more than one site domain, a superb feature of Drupal since a multi-site install would share the same core, reducing update maintenance across multiple domains. The sites folder is where you are allowed to add your own modules and themes.

Follow these steps to prepare your Drupal installation for custom modules and themes:

1. First, always set your site Administration theme to a core theme such as Garland. This prevents theme accidents while trying out new themes. Under the Drupal Administration screen, choose "Administration theme" and choose Garland, then click "Save configuration". Now you can safely add any new themes without fear of breaking your site.

2. Inside the sites/all folder add two new folders named modules and themes.

   A tip for Drupal newbies is to add two more folders inside sites/all/modules called custom and contrib; this helps separate modules your team creates versus modules you download from the community (contrib, short for contributed). Themes do not need this folder separation as most sites usually have more modules installed than themes.

3. Copy or upload your custom theme folder into the sites/all/themes folder and Drupal should instantly recognize it under your Themes administration page.

Note: The only folder you should ever touch is the sites folder or any of its subfolders. New themes and modules should never appear in the core folders (drupal/modules, drupal/themes), only in your drupal/sites/all folder.

After you get Drupal 6 installed, and your theme is added to sites/all/themes, visit the Drupal administration page to locate the Themes section. Figure 7 shows the standard Drupal Themes administration area, and you should see your custom theme listed with the core themes. If you don't see your theme, then your theme is not in the right folder (drupal/sites/all/themes), or you forgot to include a proper .info file in your theme folder.

With a new theme enabled, you should visit your site home page and any content (pages) you may have added. If you notice something is missing or a custom change you have made does not render, then double-check your theme folder and make sure all desired templates reside in your theme folder and each file is named properly.

When working on new themes, any updates to a theme folder may require the site Theme cache to be flushed. To flush the site Theme cache just visit or refresh the Theme administration screen. Each time the Themes administration screen loads the theme cache is cleared, allowing Drupal to register new themes and any new templates.

Figure 7. The Drupal theme administration screen.

Where to go from here

This concludes the second article in my series covering Drupal 6. By now you should be familiar with the various Drupal terms used to describe a theme and its parts, along with how Dreamweaver CS4 is used in the mix. I hope you are excited to join the Drupal ranks as a themer. If you complete a custom theme that you want to share with the community, then you can visit drupal.org and register your theme as a free download. My next Drupal article, Building Drupal Zen sub-themes with Dreamweaver CS4, will cover the popular theme starter kit known as Zen.

About the author