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 menu Walker to add a button description, most notably this one by Kriesi but I couldn’t find too much about showing the active page.
What is the WordPress Walker class?
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.
Use a custom menu walker class
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, you can now set up a WordPress menu walker 🙂
If you’d like a copy of the full navigation class shoot me an email and I’ll send you the file.