• Gå direkte til primær navigation
  • Skip til indhold
  • Gå direkte til primær sidebar

Vayu Robins

WordPress theme & plugin developer

  • Kompetencer/Services
  • Om/About
  • Kontakt/Contact

Highlighting wp_nav_menu() ancestor with Children for custom post types

10. august 2011 by Vayu Robins 8 kommentarer

I was in need of a solution to highlight the top menu item for a custom post type when viewing a single subpage (cpt).  There is no built-in method in WordPress that adds a class to the top menu item of cpt, when viewing a child item.

I spent some time searching for this topic on the net and came across this post on WordPress Answers.  I specifically noticed somatics answer.

I had created a cpt called “trips”.  Because it was for a danish website I could not have a menu item named Trips.

I just didn’t like having to enter the slug into my Title Attribute, as trips makes no sense in danish and I didn’t want the browser tooltip to appear on the menu line on mouseover.  So I came up with idea of adding a class name of the cpt slug instead to the menu item either.

So I went into the Menus section and added this “trips-menu-item” to the css classes in the menu item.

The code below then finds the menu item with this class trips-menu-item and adds another “current_page_parent” class to it.  Furthermore, it removes the “current_page_parent” from the blog menu item, if this is present.

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2);
function current_type_nav_class($classes, $item) {
    // Get post_type for this post
    $post_type = get_query_var('post_type');

    // Removes current_page_parent class from blog menu item
    if ( get_post_type() == $post_type )
        $classes = array_filter($classes, "get_current_value" );

    // Go to Menus and add a menu class named: {custom-post-type}-menu-item
    // This adds a current_page_parent class to the parent menu item
    if( in_array( $post_type.'-menu-item', $classes ) )
        array_push($classes, 'current_page_parent');

    return $classes;
}
function get_current_value( $element ) {
    return ( $element != "current_page_parent" );
}

 

Del:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to share on LinkedIn (Opens in new window) LinkedIn

Like this:

Like Loading...

Skrevet i: Kode, WordPress

Læserinteraktioner

Kommentarer

  1. Adam skriver

    13. august 2012 kl. 20:33

    Very cool. One question… When I’m on a single-{post_type}.php page, and the parent page (of that custom post type) is listed in the wp_nav_menu, that parent page in the nav menu isn’t highlighted (and it should be). Any thoughts on how to get this to work?

    Thanks for the code!

    Svar
    • vayu skriver

      25. september 2012 kl. 08:50

      Hi Adam.
      That’s exactly what this code should fix. You can see it in use on this site for instance:
      http://fysiorejser.dk/rejser/
      I am not sure if I have misunderstood your question. 🙂

      Svar
  2. Piet skriver

    25. september 2012 kl. 08:32

    Amazing code snippet, thanks!

    One little typo in the code on line 10 it should read {custom-post-type}-menu-item

    Svar
  3. Nick skriver

    21. april 2013 kl. 06:43

    hey, I put this into my menu.php file, and it doesnt seem to do anything. Is that where i should implement this code to fix the issue with highlighting menu links through single.php? Or should i put this into the wp_nav_menu.php file?

    Svar
    • vayu skriver

      21. april 2013 kl. 09:47

      Hi Nick.
      You should never ever change the WordPress source code. If you do, then it will be deleted next time you update WordPress.
      You should put this code in the functions.php file in your theme. wp-content/themes/your-theme/functions.php.

      Svar
  4. Dave skriver

    31. august 2013 kl. 04:03

    Dude! thank you! Struggled with this for a while! your tip saved me!

    Svar
  5. borxa skriver

    3. september 2013 kl. 20:05

    Hi there!
    thaks about your tip!

    how can i do the same with a custom taxonomy?

    cheers

    Svar
    • vayu skriver

      5. september 2013 kl. 23:15

      Hi Borxa. Good question! I just tried to setup a quick demo and tested it locally. It seems as if it is now built-in the core. Propper classes are added to the current menu item as well as parent/ancestor menu items. Works for both custom post types and custom taxonomies. Are you running the latest WP version 3.6? Can you confirm that it works for you too?

      Svar

Skriv et svar Annuller svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primær Sidebar

Vayu

Vayu

I am a webdeveloper from Denmark. I make my living building WordPress websites, e-commece sites, custom themes, plugins and widgets.

Verified Services

View Full Profile →

Kategorier

  • Ikke kategoriseret
  • Kode
  • Plugin
  • WordPress
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

  • vayu.dk
  • Frederikssundsvej 49
  • 2400 København NV
  • +45 61 77 00 33
  • info@vrweb.dk

%d