Grow your CSS skills. Land your dream job.

Custom Post type and WP Nav menus – Active State

  • # July 11, 2013 at 6:10 am

    I have a custom post type called cakes.

    I am using a file called single-cakes.php to display this content.

    How do I get a class in my WP Nav menu so I can provide it with an active state?

    On a different site I found this code that worked but this was with a standard post type.

    add_filter(‘nav_menu_css_class’ , ‘special_nav_class’ , 10 , 2);
    function special_nav_class($classes, $item){
    if(is_single() && $item->title == “cakes”){
    $classes[] = “current_page_item”;
    }
    return $classes;
    }

    # July 11, 2013 at 5:36 pm

    No one got any ideas on this? I could really do with a fix supposed to be going live tomorrow. I’ve search the web high and low but because I don’t fully understand the solutions its hard to know why they aren’t working for me.

    Thanks

    # July 13, 2013 at 5:22 pm

    Finally found some code that worked for me.

    Included below just in case someone ever finds this thread and has the same issue.

    // Add class of current-page-ancestor to Custom Post Types
    function remove_parent($var)
    {
    if ($var == ‘current_page_parent’ || $var == ‘current-menu-item’ || $var == ‘current-page-ancestor’) { return false; }
    return true;
    }

    function tg_add_class_to_menu($classes)
    {
    // Add custom post type name
    if (is_singular(‘cakes’))
    {
    $classes = array_filter($classes, “remove_parent”);

    // Need to add menu item number
    if (in_array(‘menu-item-56′, $classes)) $classes[] = ‘current-page-ancestor';
    }

    return $classes;
    }

    if (!is_admin()) { add_filter(‘nav_menu_css_class’, ‘tg_add_class_to_menu’); }

    # July 13, 2013 at 5:22 pm

    Add to your functions.php

    # January 3, 2014 at 3:58 am

    Yo @Ricky55, Your code works which is great, many thanks!

    # January 19, 2014 at 2:43 pm

    I tried adding this code to my functions.php file but it gave me an error. Am I missing something? I changed the menu item id and the name… I’m stumped.

    // Add class of current-page-ancestor to Custom Post Types
    function remove_parent($var)
    {
    if ($var == ‘current_page_parent’ || $var == ‘current-menu-item’ || $var == ‘current-page-ancestor’) { return false; }
    return true;
    }

    function tg_add_class_to_menu($classes)
    {
    // Add custom post type name
    if (is_singular(‘work’))
    {
    $classes = array_filter($classes, “remove_parent”);

    // Need to add menu item number
    if (in_array(‘menu-item-21′, $classes)) $classes[] = ‘current-page-ancestor';
    }

    return $classes;
    }

    if (!is_admin()) { add_filter(‘nav_menu_css_class’, ‘tg_add_class_to_menu’); }

    # June 3, 2014 at 1:33 pm

    This was very handy, thanks for posting. I did streamline it a bit:

    // custom nav highlighting for various pages
    function fb_custom_nav_highlights($classes) {
      if (is_singular('video') && in_array('nav-watch-now', $classes)) {
        $classes[] = 'current-menu-item';
      } elseif (is_singular('post') && in_array('nav-whats-new', $classes)) {
        $classes[] = 'current-menu-item';
      }
      return $classes;
    }
    if (!is_admin()) { add_filter('nav_menu_css_class', 'fb_custom_nav_highlights'); }
    
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".