0

I have an interesting problem I am trying to solve here regarding a custom nav menu.

Essentially, I have created a custom walker class for my nav menu and I have manually added a menu entry directing users to "/articles" which is a custom post type archive page. (BTW, as far as I know there is no way to have these custom post type archive pages included within the left hand selection correct?)

Anyway... so, I have added the menu entry by using the custom link dialog box and my custom walker correctly highlights that nav menu entry when you click it/visit the "/articles" page.

The problem I am having here is that when you select one of the news items this "/articles" menu link is no longer selected. So the question here is: what would I need to change in my custom walker class (code I am using is included below) to append a class to the menu when your on of those post pages.

It would seem to me that this functionality should be built into wordpress for custom post types. For example, the class "current_page_parent" is appended to a parent page if you visit one of the subpages. I thought there would be something like "current_post_parent" or "current_custom_post_parent" but this does not seem to exist as far as I can tell.

So team, any idea how I can add this functionality?

My Custom Walker Menu

// COMPANY - RIGHT MENU - CUSTOM MENU WALKER
class Company_Menu_Bar_Walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = '';
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $current_indicators = array('current-menu-item', 'current-menu-parent', 'current_page_item', 'current_page_parent');
    $newClasses = array();
    foreach($classes as $original_class) {
    //check if it's indicating the current page, otherwise we don't need the class
        if (in_array($original_class, $current_indicators)) {
            array_push($newClasses, $original_class);
        }
    }
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $newClasses), $item ) );
    if($class_names!='') $class_names = ' class="'. esc_attr( $class_names ) . '"';
    $output .= "\t" . '<li' . $value . $class_names .'>';
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    if($depth != 0) {
    //option to store things like sub-menus
    }
    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
    $item_output .= '</a>';
    $item_output .= $args->after;
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Template Code which calls the custom walker*

<div class="rightbar-widgets" id="submenu">
<span id="title">select a page</span>
<?php wp_nav_menu( array(
'theme_location'    => 'company-menu',
'container'         => '', 
'container_class'   => '', 
'container_id'      => '',
'menu_class'        => '',
'menu_id'           => '',
'echo'              => true,
'before'            => '',
'after'             => '',
'link_before'       => '',
'link_after'        => '',
'fallback_cb'       => '',
'items_wrap'        => '<ul id="company-right-menu">' . "\n" . '%3$s</ul>' . "\n",
'depth'             => 2,
'walker'            => new Company_Menu_Bar_Walker
)); 
?>
</div>

1 Answer 1

3

When i want to add the classes current-menu-item and current-page-ancestor i always use the wp_nav_menu without any custom walker. I only build my own walker if i want to change lets say the classes to something like "sel" instead.

So i add the menu like this:

<?php
  wp_nav_menu( 
    array(
    'theme_location' => 'company-menu',
    'container' => false,
    'menu_class' => '',
    'echo' => true,
    'before' => '',
    'after' => '',
    'link_before' => '',
    'link_after' => '',
    'depth' => 2,
    'items_wrap' => '<ul id="company-right-menu">' . "\n" . '%3$s</ul>' . "\n"
    )
  );
?> 

And then i add this action to my functions.php file:

function additional_active_item_classes($classes = array(), $menu_item = false){
    global $wp_query;

    if( in_array('current-menu-item', $menu_item->classes) ){
        $classes[] = 'current-menu-item';
    }

    // add class current-menu-item to archive
    if ( $menu_item->post_name == 'my_custom_post' && is_post_type_archive('my_custom_post') ) {
        $classes[] = 'current-menu-item';
    }

    // add class current-menu-item to single
    if ( $menu_item->post_name == 'my_custom_post' && is_singular('my_custom_post') ) {
        $classes[] = 'current-menu-item';
    }


    return $classes;
}
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

If this is in the right direction i can help you more if you want.

1
  • thanks for your response there. The issue I was trying to address specifically relates to highlighting ONLY the parent MENU item for the active page which contains that link. Any ideas? Commented Jun 26, 2012 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.