WordPress.org

Ready to get started?Download WordPress

Forums

How do I set up conditional "Current-Menu-Item" id attributes? (15 posts)

  1. meandrewdunn
    Member
    Posted 2 years ago #

    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.

  2. Big Bagel
    Member
    Posted 2 years ago #

    It would help to have a link to the site.

  3. meandrewdunn
    Member
    Posted 2 years ago #

    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.

  4. Big Bagel
    Member
    Posted 2 years ago #

    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.

  5. meandrewdunn
    Member
    Posted 2 years ago #

    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:

    http://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.

  6. Big Bagel
    Member
    Posted 2 years ago #

    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 } ?>
  7. meandrewdunn
    Member
    Posted 2 years ago #

    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.

  8. Big Bagel
    Member
    Posted 2 years ago #

    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;
    }
  9. meandrewdunn
    Member
    Posted 2 years ago #

    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.

  10. Big Bagel
    Member
    Posted 2 years ago #

    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';
    }
  11. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  12. Big Bagel
    Member
    Posted 2 years ago #

    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.

  13. Digital Raindrops
    Member
    Posted 2 years ago #

    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="http://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

  14. meandrewdunn
    Member
    Posted 2 years ago #

    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 :)

  15. cyclopath00
    Member
    Posted 2 years ago #

    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 http://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 http://kahi.cz/wordpress/highlight-used-categories-plugin/
    So i am just looking to make this work in reverse. Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic