Main content begins here

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 2

Saturday, March 14, 2009

In Theming Drupal, Part 1 we talked about some of the basics of the Drupal theme, getting started with your design, code, and the initial steps to creating the theme. Now, as Young MC might say, its time to bust a move.

Your first ally in real theming is the template.php file. This is the place where you override (theme) Drupal's core while maintaining the virgin-freshness of the core itself. If your theme doesn't have a template.php file, add one now. If you're adding one, just add an empty file.

Theming Drupal Regions: Ad, Delete, Mix and Match - More Fun Than Garanimals!

The first thing to notice inside template.php is the regions function: "function themename_regions()". If you don't have this function because you're starting with an empty file, add it now (Garland doesn't have it). It looks something like this:

function mythemename_regions()
{
return array(
"sidebar_left"=>t("left sidebar"),
"sidebar_right"=>t("right sidebar"),
"content"=>t("content area"),
"header"=>t("site header"),
"footer_message"=>t("site footer")
);
}

The regions function allows you to add regions to your design. Be sure each theme's region function is named appropriately. For example in our example from Part 1 the theme is called "my_theme" so the function name will be "function my_theme_regions()".

An example of adding a new region to your theme is, say on the home page you wanted to have a rotating promo. Create a new variable name such as $promo then insert this variable into your page.tpl file like you do any other Drupal snippet such as $content or $sidebar_left. Then in your region function add a new line so we can make the region appear in your blocks for that theme:
"promo"=>t("home page rotating promo")

Creating a Drupal Content Type

Now you'll need to create a new "content type" in Drupal for your home page called "Promo". To do this go to "administer > content management > content types" and choose "add content type". This will be where we store our promos from which we will randomly draw one for display on the home page. Once you create the content type, create a couple dummy promos so you can see this in action when we're done.

Next go to Views and add a Block List View of 1 called "promo_view" with the field of Node:Body, a filter of Published:Yes & Node:Type->"promo", and Sort Criteria: Random. Next visit Blocks where we tell our theme we want the "promo_view" to be placed inside our "promo" region. Shazzam! You have rotating promos. Ain't life grand?

Now I will touch on more customization that I half-promised back in Part 1. It's more template.php magic. That's not magic as in Merlin, it's magic as in Penn & Teller in that I'm gonna show you how it's done. Sort of...

Getting Control of the Drupal Navigation

The default Drupal nav was pretty uninspiring to me at first, back when the only way I knew how to accomplish tasks was hacking core. Naughty, naughty. Now I've learned a few things and I'd like to share them because it is frustrating to a lot of people. That is namely dealing with some navigation customization. Things like adding a selected state to a list item instead of the anchor, adding a span INSIDE the anchor, and enabling a way to allow for using images in the navigation.

I'm not really an intensely learned PHP guy. I can understand most of what's going on and can usually edit existing PHP to achieve a desired outcome, though it may not be the most efficient way, so your mileage may vary, but here is the function I use to spice up my Drupal menus:

function phptemplate_menu_item($mid, $children = '', $leaf = TRUE, $extraclass = '') {
if (menu_get_active_nontask_item() == $mid) {
$class_active = ' selected';
}

if ((menu_in_active_trail($mid)==1)) {
$active_section = ' selectedSection';
}

if($mid) {$mid_id='item'.$mid;}
if($children) {$hasChild=' hasChild';}
else {$hasChild='';}

return $thing.'<li class="'. $mid_id . $active_section . $class_active . $hasChild . ($leaf ? '' : ($children ? ' expanded' : ' collapsed')) . ($extraclass ? ' ' . $extraclass : '') . '">'. menu_item_link($mid, TRUE, $extraclass) . $children . "</li>\n";
}

The above makes a list item (not its anchor) have a "selected" class when active, and its parent will have addionally a "selectedSection" class. This is helpful when you want to control what sections are open/closed using CSS in a menu.

The above also adds an "item#" class such as "item69" to a nav item. People often use an id for this instead of a class but I often have to generate menu items or parts of the menu several times on a page, and muliiple ID usage is improper HTML, so use a class. This is useful if you want to use images for your nav items because you can target specific list items.

The above also adds a "hasChild" class so you can do things such as using an arrow bullet in your nav to indicate which sections have children. You can see this in use on this site by rolling over "Projects" in the main nav to see an arrow indicating that "Industries" has child nodes.

In Part 3 of this series I will continue discussing some template.php magic. Be sure to tune in next time, same Bat Time, same Bat Channel...

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
You're the bomb John.
Y. G. D.
Copyright ©2001-2017 Way Cool Web Design LLC. All Rights Reserved.