Post navigation

Wordpress

Showing The Active Page With The WordPress Menu Walker

Just the same as many other WordPress developers when it came to building and modifying themes I really needed to be able to customise the menu. I found a few tutorials on extending the WordPress Walker to add a button description, most notably this one by Kriesi but I couldn’t find too much about showing the active page.

To start with what is the Walker class? I’ll let the WordPress Codex explain:

The Walker class encapsulates the basic functionality necessary to output HTML representing WordPress objects with a tree structure. For instance, pages and categories are the two types of objects that the WordPress 2.2 code uses the Walker class to enumerate.

There are two parts to getting this to work. Firstly including the code in the custom menu walker class to ensure the correct WordPress classes are assigned to your button. WordPress already adds a unique class to the active item, we just need to make sure it is also added in our class.


$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names .= in_array("current_page_item",$item->classes) ? ' active' : '';
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

The second part is simply to add the appropriate style to our css file:


#menu-main li.active{
 border-bottom: 4px solid #00CCFF;
}

And that is it 🙂

If you’d like a copy of the full navigation class [sm mailto=”emily@brainstormcreative.co.uk” txt=”shoot me an email”] and I’ll send you the file.