Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

3 Answers

up vote 0 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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