Visually Controlling Menus using CSS Body Classes

This was written in response to a discussion on the topic of conditionally managing menus… To control the visual presence of various menu levels, a fairly simple theme modification can be made using a php function written as a WordPress action and used in conjunction with a few CSS rules.

WordPress knows which type of query has been requested and as a result, it sets one of the is_* conditional tags. For example, is_page(), is_single(), is_category(), etc. (An explanation of the topic is provided here)

If I want to modify the contents or behavior of a menu I simply add a couple of things to the theme.

In the theme’s functions.php file, create a function that can determine which conditional tag is active; assign a php variable to a CSS class that corresponds to the current conditional tag. Here I have named a function setBodyClass


/**
 * This function echos a CSS class statement
* that corresponds to the current conditional tag
 */
function setBodyClass() {

    /* Home page or front page ? */
    $class = (is_home() ? "homepage" : is_front_page() ? "frontpage" : '');

   /* single page ? */
   $class = (is_single() ? "single-page" : $class);

   /* any category ? */
   $class = (is_category() ? "category" : $class):

   /* A specific category ? */
   if( is_category() ) {
      $cat_id = get_category_by_slug("news-category");
      if($cat_id) {
         $class = (is_category($cat_id) ? "news-category": $class);
      }
   }

   if( '' != $class ) {
      echo ' class="' . $class . '"';
   }
}// end function

/**
 * add this action
 */
add_action('setBodyClass');

Now that we have the function written we want to use the routine in the template file where the BODY tag is created. The BODY tag can typically be found in the header.php or index.php file of your theme. After locating the BODY tag modify the tag as follows:

<body <?php do_action('setBodyClass'); ?> >

What have we done here?

We’ve just provided a method for dynamically adding a CSS class to the body tag of the page based on a set of conditional tags. The do_action call is an action hook that is exclusively provided by the theme’s functions.php file. Theme’s can act as their own plugin functionality provider and mine often do. This technique is a preferred (by me) over a direct php call to the setBodyClass function. The action will add the semantic class to the BODY tag if one of the conditions I care about is true. If the none of the conditions are met, then a CSS class is not added to the BODY tag. If the setBodyClass function was not present in the theme’s functions.php file then nothing would happen.

Body Class

To visually control navigation menus I can now create CSS rules that determine what the web site visitor can see when specific content is displayed on the site. This works in conjunction with the applied BODY class. For example, NAVT applies specific classes to various types of menu items. The class page_item is applied to the unordered list tag that encapsulates an anchor to a page. It also applies the class cat_item to the unordered list tag that encapsulates an anchor to a category. More specific classes are also applied by NAVT for pages, categories and other list assets that are contained in the menus. There are too many to enumerate here.

Example Menu with CSS

Here is a simple menu that was generated by NAVT.


  <ul class='menu samplemenu firefox en-US'>
    <li class='erow samplemenu_item current_page_item hometab'>
      <a href='http://wp.local' title='Home' class='navt_ilink current_item'>Home</a>
    </li>
    <li class='orow samplemenu_item page_item about-page pagetab'>
      <a href='http://wp.local/?page_id=2' title='About' class='navt_plink'>About</a>
    </li>
    <li class='orow samplemenu_item page_item local-news-cat categorytab'>
      <a href='http://wp.local/?cat=1' title='Local News' class='navt_clink'>Local News</a>
    </li>
  </ul>

If, for example, I did not want to display the “Local News” category on the homepage or the front page I can easily write a CSS rule to hide the category when the visitor is on the home page or the front page:

body.frontpage ul.samplemenu li.local-news-cat,
body.homepage ul.samplemenu li.local-news-cat {
    display: none;
}

The CSS rule above hides the display of the LI tag assigned the class local-news-cat that is a descendant of the UL tag with the class samplemenu that is a descendant of the BODY tag assigned the class frontpage or homepage.

Conclusion

This is an easy technique to apply (your milage may vary). Create the menus you want with NAVT, examine the tags created by the plugin and decide what you want to control and under what conditions then write the CSS rules accordingly.

I hope this was helpful, have fun…

Atalaya Studio