8

Is it possible to add the id or slug of a category in the output of wp_nav_menu menu's?

For example, the standard output of wp_nav_menu is:

<div class="menu-header">
    <ul id="menu-categorieen" class="menu">
        <li id="menu-item-4353" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4353"><a href="http://domain/">Home</a></li>
        <li id="menu-item-1034" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1034"><a href="http://domain/category/category_1/">Category 1</a></li>
        <li id="menu-item-1039" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1039"><a href="http://domain/category/category_2/">Category 2</a></li>
        <li id="menu-item-1032" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1032"><a href="http://domain/category/category_3/">Category 3</a></li>
    </ul>
</div>

I'm wondering if it is possible to add the category slug to the css class for that <li>, like so:

<div class="menu-header">
    <ul id="menu-categorieen" class="menu">
        <li id="menu-item-4353" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4353"><a href="http://domain/">Home</a></li>
        <li id="menu-item-1034" class="menu-category-1 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1034"><a href="http://domain/category/category_1/">Category 1</a></li>
        <li id="menu-item-1039" class="menu-category-2 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1039"><a href="http://domain/category/category_2/">Category 2</a></li>
        <li id="menu-item-1032" class="menu-category-3 menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1032"><a href="http://domain/category/category_3/">Category 3</a></li>
    </ul>
</div>
1
  • add where? could you elaborate on what the desired results are?
    – Milo
    Mar 19 '13 at 21:23
13

Use the nav_menu_css_class filter to add classes to wp_nav_menu output.

Add ID (no additional query needed):

function wpa_category_nav_class( $classes, $item ){
    if( 'category' == $item->object ){
        $classes[] = 'menu-category-' . $item->object_id;
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpa_category_nav_class', 10, 2 );

Add slug (loads category object via get_category):

function wpa_category_nav_class( $classes, $item ){
    if( 'category' == $item->object ){
        $category = get_category( $item->object_id );
        $classes[] = 'menu-' . $category->slug;
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wpa_category_nav_class', 10, 2 );
3
  • 4
    i had the same issue, but i needed the slug of my page. this thread helped me a lot. here is the solution: function my_special_nav_class( $classes, $item ) { if( 'page' == $item->object ){ $page = get_post( $item->object_id ); $classes[] = $page->post_name; } return $classes; } add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
    – honk31
    May 12 '14 at 9:10
  • The difference between $item->ID and $item->object_id is key here. Nice answer! Apr 21 '17 at 2:12
  • to prevent the additional query, you could use sanitize_title($item->title) instead of getting the category slug
    – benedikt
    Mar 27 '20 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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