Custom active menu item in wordpress menu

Question

I have a wordpress theme using wp_nav_menu() to build the menu. I have a custom menu item in this menu that goes to a non-standard wordpress page. Is there a way I can conditionally set this nav item to current based on a match in the url string?

Thanks

Matt Gifford Matt Gifford · Accepted Answer · 2012-07-04T13:22:13

You can use the nav_menu_css_class in Wordpress to achieve the result you're after. Using this hook you can alter an array of CSS classes that can be applied to the menu.

add_filter( 'nav_menu_css_class', 'add_parent_url_menu_class', 10, 2 );

function add_parent_url_menu_class( $classes = array(), $item = false ) {
    // Get current URL
    $current_url = current_url();
    // Get homepage URL
    $homepage_url = trailingslashit( get_bloginfo( 'url' ) );
    // Exclude 404 and homepage
    if( is_404() or $item->url == $homepage_url ) return $classes;
        if ( strstr( $current_url, $item->url) ) {
            // Add the 'parent_url' class
            $classes[] = 'parent_url';
        }
    return $classes;
}

function current_url() {
    // Protocol
    $url = ( 'on' == $_SERVER['HTTPS'] ) ? 'https://' : 'http://';
    $url .= $_SERVER['SERVER_NAME'];
    // Port
    $url .= ( '80' == $_SERVER['SERVER_PORT'] ) ? '' : ':' . $_SERVER['SERVER_PORT'];
    $url .= $_SERVER['REQUEST_URI'];

    return trailingslashit( $url );
}

This method will ignore 404 pages or the root of the site, but will add the class to the menu item if the current URL matches the menu item URL.

Full credit for this code: http://www.rarescosma.com/2010/11/add-a-class-to-wp_nav_menu-items-with-urls-included-in-the-current-url/

Custom active menu item in wordpress menu

1 Answers