Custom Menus: dynamic highlighting problem with custom home link

Question

I'm currently implementing wp_nav_menu - all has gone well save for dynamic highlighting. The menu code looks like this (when home, which is a custom link, is selected):

<div class="menu-header">
<ul class="menu" id="menu-main-nav">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-126" id="menu-item-126"><a href="path.to.link">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122" id="menu-item-122"><a href="path.to.link">Information</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123" id="menu-item-123"><a href="path.to.link">Contact</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124" id="menu-item-124"><a href="path.to.link">About</a></li>
</ul>
</div>

When a page other than home (which is a 'custom link') is selected this is written out:

<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-65 current_page_item menu-item-122" id="menu-item-122"><a href="path.to.link">Information</a></li>

As you can see this includes an active style 'current-menu-item' where the custom link only writes 'menu-item-type-custom menu-item-object-custom'

So my question is is there any way to add a selected item style for custom links in wp3 menus?

Answer 1

I achieved this with some jQuery:

$("#sidebar ul li").each(function () {
     if ($(this).find("a").attr("href") == window.location.href) {
         $(this).addClass("current-menu-item");
     }
});

(My nav is in a div with the id 'sidebar', you will need to change the first selector).

It checks if the href of the links is the same as the current URL, and if so, adds "current-menu-item". You can then style active links with the .current-menu-style class.

Answer 2

A better approach would be to add a "Home" page to the wp_page_menu() args, so that you can add a "Home" page link.

First, add this filter to functions.php to show the home link:

function mytheme_filter_page_menu_args( $args ) {
    $args['show_home'] = true;
    return $args;
}
add_filter( 'wp_page_menu_args', 'mytheme_filter_page_menu_args' );

Now, in Dashboard -> Appearance -> Menus, you will see a "Home" page link under the "Pages" metabox. Select it, and add it to your custom menu.

Credit and screenshots here.

Answer 3

In my themes I make use of the custom menus. As a fall-back menu I use the following code in my functions.php:

function tweaker3_default_menu() {
    echo '<ul class="sf-menu">';
    if(is_home() && !is_paged()) {
        echo '<li class="current_page_item"><a href="'. home_url( '/' ) . '" title="' . __( 'You are Home', 'tweaker3' ) . '" rel="nofollow">' . __( 'Home', 'tweaker3' ) . '</a></li>';
    } else {
        echo '<li><a href="'. home_url( '/' ) . '" title="' . __( 'Click for Home', 'tweaker3' ) . '" rel="nofollow">' . __( 'Home', 'tweaker3' ) . '</a></li>';
    }
    wp_list_pages( 'title_li=' );
    echo '</ul>';

This code solves my problem of setting the current item on the home link. I hope this helps you.