Atalaya Studio » Themes

Visually Controlling Menus using CSS Body Classes

Greg — Mon, 30 Mar 2009 18:21:52 +0000

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:

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.


  
    
      Home
    
    
      About
    
    
      Local News

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…

Working with CSS Collapsing Menus and NAVT

Greg — Tue, 13 May 2008 07:37:54 +0000

A discussion in the NAVT forum has promoted me to sit down and explain how you can use CSS collapsing menus with the NAVT plugin. This article assumes you have some working knowledge of Cascaded Style Sheets used to style your Word Press theme and some experience with NAVT. The article explains where and how to begin integrating a collapsing menu into your web site using NAVT to construct the correct tag structure. This article applies to NAVT version 1.0.23 and above.

Example Menu

Below is an example of the type of menu we’re going to create using NAVT and two cascaded style sheets. The navigation elements shown in the menu are arbitrary items I put together from this web site.

These types of menus are relatively easy to construct. However, the tricky part is making them work with IE6 and most of this article deals with the IE6 solution.

Getting Started

Examples of CSS style sheets that contain rules for formatting horizontal, vertical, fly-out, drop-down, and cascading menus can be found all over the Internet. When asked, I usually send people to CSS Play which is owned by Stuart Nicholls. CSS Play has dozens of examples of pure CSS menus that you can freely use on your non-commercial web site provided you leave the copyright statements intact that appear in the CSS file. These can also be used on Commercial web site’s provided you obtain permission from CSS Play. For this tutorial, I’m going to use this CSS Play flyout menu to demonstrate the process of integrating the CSS into your web site in concert with NAVT.

You will, of course, need to change the menu text and background colors, adjust the menu width and heights and make any other style alterations to make the menu look right with the theme you intend to use the menu with.

The !DOCTYPE

Before I begin, it’s important to understand that your Word Press theme MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html. Using will switch IE into quirks mode and your menu will not work correctly.

Embedded Navigation Groups

Greg — Thu, 17 Apr 2008 19:11:18 +0000

Not long ago I wrote an article on how to embed navigation groups within pages and posts on your blog. This is probably one of the least used applications of NAVT. However, I think its a great feature if you have a sales organization or you operate a blog with multiple authors.

An embedded navigation list can be used to create specialized pages that show the people in your organization using navigation list that contains user anchors. Using a few CSS rules, a little layout imagination and a navigation group containing your blog Authors/Sales people you can create a unique organizational chart that is far more interesting than the ordinary about page.

Here is an example of an embedded navigation group on this page.

Embedded Navigation Example

How to… Word Press, Themes and NAVT

Greg — Sun, 30 Mar 2008 15:03:59 +0000

Introduction

This topic has been written about many times by many people but this article has a NAVT slant. The information presented here is not intended to teach the basics of the PHP programming language, programming logic or WordPress template construction. It is designed to provide sensible help to the do it your-selfer who would like to use the NAVT Plugin for WordPress and isn’t afraid to do a little template hacking to make it happen. However there are at least three different ways you can integrate the NAVT plugin into your theme. Two of them don’t require programming.

The Theme Hack Method

Template or theme hacking is the very thing I hope to prevent you from doing. Adding the necessary function call to your WordPress template for the NAVT plugin doesn’t take very long to do but you need to understand the following:

Where the NAVT PHP interface call needs to be placed in your WordPress template,
How to correctly write the function call and,
How to style the resulting navigation list.

WordPress Theme Basics

WordPress templates are not very mysterious if you understand some basic information. The content of your WordPress theme directory is composed of one large PHP script that is executed every time someone visits your blog. The theme script is divided into small files and each file name provides a clue to its intended use.

The typical WordPress theme usually contains (at a minimum) the following files:

index.php
header.php
sidebar.php
footer.php

The index.php file is the start of the PHP script and code execution begins with the very first line at the top of the index.php file and ends on the very last line. index.php is responsible for assembling all of the information that produces the pages of your WordPress blog. Page assembly (or production) is accomplished by making PHP function calls that are designed to create the HTML code that is, in turn, interpreted and displayed by the viewer’s web page browser. If you already know this, bear with me; it gets more interesting later.

There is a method to the madness of producing web pages by your WordPress theme. The method is simply the loading and execution of known PHP files in a predetermined order. The PHP files come from your theme’s directory. Specifically, the files named: header.php, sidebar.php and footer.php. If your theme is missing any one of these files, the file of the same name will be used from the default theme directory in your WordPress installation.