Last updated August 26, 2009. Created by ugerhard on June 6, 2006.
Edited by ronald_istos, add1sun, dvessel, Dublin Drupaller. Log in to edit this page.
The snippet shown here will convert node categories to CSS classes. It will do this for each node when viewed as a teaser or when a node is rendered as a full page.
It's up to your own imagination to style it from the 'style.css' file in your theme folder.
Example: node with taxonomy terms (categories) of 'apples', 'oranges' and 'apples & oranges' will put out tax-apples, tax-oranges and tax-apples-oranges for individual nodes.
b-tax-apples, b-tax-oranges and b-tax-apples-oranges will be used for the page body when an individual node is a full page..
Any non-alphanumeric characters and spaces will be stripped and replaced with a '-' so we don't inadvertently have illegal class characters.
Place the code below into your template.php file in your themes folder to pass along the new variable. Create one if it doesn't exist.
Note that you must use module_exist, without the 's' in Drupal 4.7.
<?php
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
$prefix = ' b-tax-';
}
if ($hook == 'node') {
$prefix = ' tax-';
}
if (module_exists('taxonomy') && $vars['node']->nid) {
foreach (taxonomy_node_get_terms($vars['node']->nid) as $term) {
$vars['node_terms'] = $vars['node_terms'] . $prefix . eregi_replace('[^a-z0-9]', '-', $term->name);
}
}
return $vars;
}
?>Inside your page.tpl.php file add this to the <body> class. Use the same $node_terms variable in your node.tpl.php file. Preferably inside a containing div block. The same variable will print out different classes for the two templates.
class="<?php print $node_terms; ?>"With this in place you can now make custom styles, colors , layouts or anything else with CSS according to the categories set for you nodes. The possibilities with this are endless from this simple enhancement.
- Updated to work with the body class
- I'm in the beginning stages of learning this stuff so any improvements are very welcome. The main php snippet came from Dash with some modifications.
- This idea came out of the forum discussion: taxonomy as CSS class?.
Comments
Update to 6.x?
With _phptemplate_variables() depreciated in 6.x, is there a way to update this code using Theme Preprocessors?
Figured it out, well, half of it.
I figured out how to do half of this: Node taxonomy into classes for teaser (just not full page). I'm sure it's easy to rewrite the rest, I just needed the teaser styling.
See http://drupal.org/node/316395#comment-1042096
To get it working on the page
To get it working on the page (in body)
<?phpfunction phptemplate_preprocess_page(&$vars) {
if (module_exists('taxonomy') && $vars['node']->nid) {
foreach (taxonomy_node_get_terms($vars['node']) as $term) {
$vars['node_terms'] = $vars['node_terms'] . ' pagetax-' . eregi_replace('[^a-z0-9]', '-', $term->name);
}
}
}
?>
Simply preprocess_page
This sort of works. It puts
I think this would be better if the terms were made lowercase so I did this:
function my_theme_preprocess_page(&$vars, $hook) {if (module_exists('taxonomy') && $vars['node']->nid) {
foreach (taxonomy_node_get_terms($vars['node']) as $term) {
$vars['node_terms'] = $vars['node_terms'] . ' taxonomy-' . strtolower(eregi_replace('[^a-z0-9]', '-', $term->name));
}
}
}
Becky
Zen Subthemes
If you're using a Zen subtheme, you'll have to uncomment the override function that applies to pages or nodes (whichever you're trying to use this snippet for). The instructions in the file explain which function overrides what and which line to delete to uncomment it.
Then rebuild the site registry in order for the changes to take effect.
This is just something I ran into, so I'm sharing it here.
:j
joerhoney.com