How do I set up conditional "Current-Menu-Item" id attributes?

  • Hey all. I’ve looked into it, but no one has provided explicit instructions on how to set up conditional “Current-Menu-Item” id attributes.

    I don’t like breadcrumbs and my site is small so there’s no need for them. When a user accesses a post or category, no main menu item is highlighted, but I’d like the “Blog” menu item to be highlighted since it’s the unofficial “parent.”

    Exactly, how do I set it up so when users are viewing a post in a specific category the menu item I’d like to be “current” is highlighted?

    Thanks for the help.

Viewing 14 replies - 1 through 14 (of 14 total)

  • It would help to have a link to the site.

    Thread Starter meandrewdunn

    (@meandrewdunn)

    A link won’t help.

    There should be a template method where I could place some code in the functions.php file:

    i.e.:
    “if posts, get_postcategory, if(postcategory (‘category here’), assign current-menu-item_id (‘blog’)” – where “Blog” is the menu item that I’d like highlighted. I have no idea how it would really be coded, which is why I am asking.

    Currently, if you were to select a post, then no menu item is highlighted.

    I would assume the script would go in the functions.php file in the template’s directory.

    A link would help as I could see if your theme already includes a CSS class for nav links that point to the current page. Themes (such as Twenty Eleven and Twenty Ten) that use wp_nav_menu() will already add a current-menu-item class to the appropriate links.

    Thread Starter meandrewdunn

    (@meandrewdunn)

    Well, I wanted to test out what you said, so I switched my theme to twenty 11, and the menu items aren’t tagged with the “current-menu-item” id and aren’t highlighted when viewing this post:

    https://iamandrewdunn.com/2011/08/our-apples-go-to-11-see-how-ifix-the-ios-volume-controls/

    When viewing the post (and all posts in its category) I would like the menu item “8-bit Human” to be highlighted.

    Your theme is adding that class, but not when you want it. It doesn’t know that those posts are in anyway connected to that page. Is the “8-bit Human Articles” page a single page using a custom template or a customized category/archive template? How is your menu generated in header.php? It looks like wp_nav_menu() but could also be wp_page_menu(). Either way, without going so far as to create a custom walker, the easiest way I can think to do this, since it looks like your theme adds the normal body classes, would be to add the category to your <body> classes. Something like this in your functions.php might do that:

    function category_id_class( $classes ) {
    global $post;
    foreach( ( get_the_category( $post->ID ) ) as $category )
        $classes[] = 'category' . $category->category_nicename;
    return $classes;
}

add_filter( 'body_class', 'category_id_class' );

    Then you could add something like this to style.css:

    body.category-articles .ddsmoothmenu ul li.menu-item-175 a {
    background-color: #FC4;
    border-radius: 5px;
    color: #4C4C4C;
    position: relative;
}

    Of course, instead of all that, you can also do what you want by adding something like this to header.php before the closing </head>:

    <?php if ( is_single() && in_category( 'articles' ) ) { ?>
    <style type="text/css">
        .ddsmoothmenu ul li.menu-item-175 a {
            background-color: #FC4;
            border-radius: 5px;
            color: #4C4C4C;
            position: relative;
        }
    </style>
<?php } ?>
    Thread Starter meandrewdunn

    (@meandrewdunn)

    I believe the script your provided would set up a condition that would call a css style into play and highlight menu item 175. Which would work.

    However, I am curious if there is a way to assign a class to the menu item in the same way? Because I wanted to assign the id=”current-menu-item” to menu item 175 when a post from a specific category is viewed.

    There is a javascript menu animation that I liked, but requires the “current” id to initiate.

    Found it. Put this in functions.php and it should add the current-menu-item class to menu item 175 when a single post in the category “articles” is shown:

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

function add_custom_class( $classes = array(), $menu_item = false ) {
    if ( is_single() && in_category( 'articles' ) && 175 == $menu_item->ID && ! in_array( 'current-menu-item', $classes ) ) {
        $classes[] = 'current-menu-item';
    }
    return $classes;
}
    Thread Starter meandrewdunn

    (@meandrewdunn)

    It seems like it would work, but I placed it in the function.php and nothing happened. Is there a specific location/line to feed it?

    Thanks in advanced and for all your help.

    Checked; it’s properly adding current-menu-item to that menu item’s classes on the proper pages. Unfortunately, it looks like your theme isn’t using current-menu-item in your CSS. Switch it to current_page_item:

    if ( is_single() && in_category( 'articles' ) && 175 == $menu_item->ID && ! in_array( 'current_page_item', $classes ) ) {
    $classes[] = 'current_page_item';
}

    Wow a lot of posts with ‘code’ do it with ‘style’, I was working on this just yesterday adding three menus to twenty eleven!

    Example style Twenty Eleven:

    #access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

    Add:

    #access .current-menu-item  > a {
	font-weight: bold;
}

    Note hyphons - and not underscores _ like the other, that got confused for a while!

    Looking at your link it already sets a current-menu-item in navigation with no style, so add a style block:

    .ddsmoothmenu ul li.current-menu-item a {
    background-color: #FFCC44;
    border-radius: 5px 5px 5px 5px;
    color: #4C4C4C;
    position: relative;
}

    As you say it does have a style for current but WordPress is returning current-menu-item, the existing style:
    .ddsmoothmenu ul li a.current

    HTH

    David

    His theme wasn’t adding current-menu-item as a class until he added my bit of code. Since the CSS already exists, changing the class my example code adds to current_page_item (like in my last post) will do what he’s looking for.

    Hey all. I’ve looked into it, but no one has provided explicit instructions on how to set up conditional “Current-Menu-Item” id attributes

    Hi BigBagel.
    Reading this quote and visiting the website, it looked like the current-menu-item already existed. 

    <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-175 current-menu-item">
<a href="https://iamandrewdunn.com/8-bit-human-articles/">8-Bit Human Articles</a>
</li>

    I then looked at the layout.css and there was no style set for the class current-menu-item, so suggested creating a style for the existing class.

    Looking at a preview of the fadelicious theme, I can now see the class is not created as default, so as you say just current_page_item will work with no additional styling.

    Regards

    David

    Thread Starter meandrewdunn

    (@meandrewdunn)

    Thanks all for your wonderful help. Funny, I checked my code again with an HTML inspector and saw the “current-menu-item” id was added to the menu item.

    “It seems like it would work, but I placed it in the function.php and nothing happened. Is there a specific location/line to feed it?

    Thanks in advanced and for all your help.”

    You were totally right. I hope this thread will help anyone looking to resolve this issue. I know it helped me. You were a life saver ??

    Hello everyone. I have been searching all day for a solution to my problem and this seems to come close but I need a little help. here is my work in progress site https://www.wattsweb.com.au for reference.
    I am trying to get the posts (featured clients) listed on the left nav menu to highlight when I am on a category page. As you can see I have got it working so when you click on a post then the categories used are highlighted, for this I used https://kahi.cz/wordpress/highlight-used-categories-plugin/
    So i am just looking to make this work in reverse. Any ideas?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How do I set up conditional "Current-Menu-Item" id attributes?’ is closed to new replies.