CHAPTER 9 ■ THE THEME SYSTEM

With just a four-line .info file and a few lines of CSS, we were able to create a brand-new Drupal theme from scratch. We didn’t have to create template files, HTML, or touch a single line of PHP code in the process, demonstrating how easy and powerful the Drupal theming is.

One of the reasons the job of creating the Grayscale theme was so easy is that Drupal comes with a predefined set of template files that are applied to a theme when the theme itself does not provide those files as part of its own distribution. In the next section, we’ll cover the details of the various template files.

The .info File

The Grayscale theme .info file had the minimum amount of information required to register the theme and make it available for selection on the Appearance page. In most cases, you’ll want to define your own regions, incorporate additional style sheets, and include JavaScript files as part of your theme. Let’s take a look at how you expand the .info file to address each of those attributes.

Adding Regions to Your Theme

A region is essentially a section of the page on your site. When we constructed the Grayscale theme, we used the standard regions that Drupal automatically creates for us: sidebar first, sidebar second, content, header, footer, highlighted, help, page_bottom, and page_top. There may be situations where you want to divide your theme into additional regions, and we do that through a combination of specifying the region in the .info file and including that region in our page.tpl.php file.

To define a new region in your theme, the syntax is as follows:

regions[alerts] = Alerts regions[featured] = Featured Articles regions[socialnetworks] = Social Networks

You can define as many regions as you wish in your .info file, but you must include page_bottom, page_top, help, and content in your .info file, as core requires those regions to function properly. The next step is to update your page.tpl.php file to address your new regions. The process for displaying the region on the page is as follows:

<div id=”alerts”>

<?php print render($page['alerts']); ?> </div> <!-- /alerts -->

Adding CSS Files to Your Theme

When we created the Grayscale theme, we added a single CSS file that incorporated all of the styles that we needed to accomplish our design objectives. There may be situations where you need to incorporate more than one style sheet, or you want style sheets based on the device that the site is being viewed on. Both are accomplished by adding style sheets using the following syntax (assuming all of your style sheets are in a subdirectory named css in your theme directory).

194

CHAPTER 9 ■ THE THEME SYSTEM

;// add a style sheet that deals with colors for all mediums stylesheets[all][] = css/colors.css

;// add a style sheet just for printing stylesheets[print][] = css/print.css

;// add a style sheet just for projecting stylesheets[projector][] = css/showtime.css ;// add a style sheet for screen stylesheets[screen][] = css/style.css

;// add a style sheet for screen and projector stylesheets[screen, projector] = css/showit.css

Adding JavaScript Files

If your theme uses JavaScript, it’s a best practice to create and store the JavaScript in external files. To include those files into your theme requires that you list each JavaScript file in your .info file. Assuming you’ve placed all of your JavaScript files into a subdirectory of your theme named js, the syntax of including the files is as follows:

scripts[] = js/jcarousel.js

Adding Settings to Your Theme

There may be situations where you want your theme to be configurable without having to touch the template files or CSS. For example, you may want to provide the ability for a site administrator to change the default font size and the default font face. We can do that by providing settings. To define a setting, you incorporate the definition into the .info file as follows:

settings[font_family] = 'ff-sss' settings[font_size] = 'fs-12'

Update your grayscale.info file with the foregoing settings and follow along as we implement the other pieces of the puzzle that allow a site administrator to set the values and your theme to use the values.

The next step is to provide the means for a site administrator to change the values. To do this, we’ll create a theme-settings.php file in our Grayscale theme directory and add the form elements necessary to collect the values for font family and font size. In the theme-settings.php file, we’ll use the hook_form_system_theme_settings_alter() function to add the fields for setting the font family and font size. Insert the following code:

<?php

function grayscale_form_system_theme_settings_alter(&$form, &$form_state) {

$form['styles'] = array( '#type' => 'fieldset',

'#title' => t('Style settings'), '#collapsible' => FALSE, '#collapsed' => FALSE,

);

195

CHAPTER 9 ■ THE THEME SYSTEM

$form['styles']['font'] = array( '#type' => 'fieldset', '#title' => t('Font settings'), '#collapsible' => TRUE, '#collapsed' => TRUE,

);

$form['styles']['font']['font_family'] = array( '#type' => 'select',

'#title' => t('Font family'),

'#default_value' => theme_get_setting('font_family'), '#options' => array(

'ff-sss' => t('Helvetica Nueue, Trebuchet MS, Arial, Nimbus Sans L, FreeSans, sans-

);

$form['styles']['font']['font_size'] = array( '#type' => 'select',

'#title' => t('Font size'),

'#default_value' => theme_get_setting('font_size'),

'#description' => t('Font sizes are always set in relative units - the sizes shown are the pixel value equivalent.'),

'#options' => array( 'fs-10' => t('10px'), 'fs-11' => t('11px'), 'fs-12' => t('12px'), 'fs-13' => t('13px'), 'fs-14' => t('14px'), 'fs-15' => t('15px'), 'fs-16' => t('16px'),

),

);

}

After saving the file, visit the Appearance page and click the Settings link for the Grayscale theme. You should now see the style settings feature that we just added at the bottom of the form. Click the Font Settings link to expand the form, as shown in Figure 9-4.

196

CHAPTER 9 ■ THE THEME SYSTEM

Figure 9-4. The font settings options

The final step in the process is to use the values selected by the site administrator in the theme. We’ll do that by adding the settings for font family and font size in our theme’s $classes variable. To add the values, we’ll need to create a template.php file. This file is used for various theme processing. We’ll look at this file in detail later in the chapter. For now we’ll create the template.php file in the Grayscale theme directory and a hook_process_HOOK() function to add the values of the parameters to the $classes variable. The name of the hook_process_HOOK() function will be grayscale_process_html(), where grayscale is the name of the theme and html is the name of the .tpl.php file that we want to override. We can also override any other theme file using the same hook_process_HOOK() function.

<?php

/**

* Override or insert variables into the html template. */

function grayscale_process_html(&$vars) { // Add classes for the font styles $classes = explode(' ', $vars['classes']);

$classes[] = theme_get_setting('font_family'); $classes[] = theme_get_setting('font_size'); $vars['classes'] = trim(implode(' ', $classes));

}

With the variables set, they will now be applied in the html.tpl.php file and used in the body tag through the $classes variable. The html.tpl.php file resides in the modules/system directory and is part of core. Later in the chapter, I’ll show you how to override core templates, including the html.tpl.php file.

<body class="<?php print $classes; ?>" <?php print $attributes;?>>

197