WordPress Plug-in: Navigation Menu IDs & Classes

Back in July 2011, I wrote about cleaning up the navigation menus in WP. In that post, I provided code to reduce classes on navigation menu <li>s and make the IDs a little more semantic and consistent across installations. I also mentioned that maybe some day I would convert this into a plug-in, if people seemed interested. And people seemed interested.

So, here it is, my Navigation Menu IDs & Classes plug-in for WP, downloadable right from the WP Plug-in Repository.

And here are a couple screenshots of the plug-in in action…

WP Navigaton Menu code, before Navigation Menu IDs & Classes plug-in
WP Navigaton Menu code, before Navigation Menu IDs & Classes plug-in
WP Navigaton Menu code, after Navigation Menu IDs & Classes plug-in
WP Navigaton Menu code, after Navigation Menu IDs & Classes plug-in

Specifically, note the change from:
<li id="menu-item-677" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-677">
to:
<li id="nav-contact-us">

As well as the change from:
<li id="menu-item-676" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-56 current_page_item menu-item-676">
to:
<li id="nav-home" class="current_page_item">

I think that’s pretty darned nifty! Of course, you could always use CSS that combines pairings of <body> IDs/classes and <li> IDs/classes, thus making even class="current_page_item" unnecessary, but I have see those CSS combination selectors get pretty out of control, depending on the size of the site you’re working on.

Anyhow, there it is, folks, love to hear what you think about it, and if anyone can find a way to get the page IDs into the standard menus. And now that I think about it, IDs might be a bad idea, because multiple menus that contain the same links, would actually conflict…

Hmmm… Thought for another day…

Happy WordPressing,
Atg

33 Responses to WordPress Plug-in: Navigation Menu IDs & Classes

  1. Jason says:

    I’m definitely going to have to try this when I get a chance; thanks!

    Incidentally, I built my last site using a child theme on top of Boilerplate/Starkers and I love it. I’m sure I don’t take advantage of everything that’s in it, but it’s a great parent theme.

    Have you done much with integrating LESS CSS (I just started learning about it two days ago) with WordPress? Do you think it’s something that can just go into a child theme? I find it a little scary but I want to make my next site responsive.

    Vielen Dank, und haben Sie Glück in Deutschland!

    (p.s. I’m not going to complain about #ff5e99, since you’ve created so much other awesomeness at absolutely no cost to me….)

    • aarontgrogg says:

      Danke Shon, Jason, glad you’re finding the stuff useful!

      I’ve not played with LESS at all, but am über interested, mostly because it provides CSS variables, which is something I’ve been dreaming of for some time…

      But there is no need to use LESS in order to do responsive design, you just have start from the right starting point and build-up appropriately.

      I’ve been doing a lot of responsive design lately and have been dying to put together a post about it, but just haven’t made the time to do so. In the mean time, Tweeted this the other day, you might find it useful:
      https://twitter.com/#!/aarontgrogg/status/152656001127026690

      BTW, #ff5e99 isn’t me, it’s straight from HTML5 Boilerplate, so blame Paul & Divya! :-)

      Prost,
      Atg

    • aarontgrogg says:

      @Mario: Thanks for the suggestion, I’ve never bothered digging deeply enough into GitHub to get this there, but I should do this one day soon… Perhaps between this and my next project… :-)

      Cheers,
      Atg

  2. Emily says:

    Hi there,

    Nice plugin! Question: I’m working on a portfolio site and a lot of my menu items go to galleries – is it possible to add a bit of code to the admin-menu.php file that will also add the “current-page-item” class to galleries as menu items too?

    Thanks!

    • aarontgrogg says:

      @Emily:

      Thanks! Currently current-page-item is the only WP class retained, in what context are you not seeing this being allowed? Have a URL example?

      Atg

      • Emily says:

        this is the site: http://www.annabellebreakeyphotography.com/travel

        When I’m on the contact or about pages if you look at the source you can see that it’s adding the “current-page-item” as it should. But if you go to a gallery, say “Place”, look at the source and there is no “current-page-item” class being added :(

        I assumed because it was a gallery?

        Thanks!

  3. Fabio Assis says:

    Hey Aaron, great plugin. Thanks.

    I have suggestion: keep parent and ancestor classes. They’re very useful for sites with many pages and when you need to highlight or hide some .

    Maybe you could change the nav_class_filter.

    Before:
    return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';

    After:
    return is_array($var) ? array_intersect($var, array('current-menu-item', 'current-page-ancestor', 'current-page-parent')) : '';

    • aarontgrogg says:

      Grazie, Fabio. Yes, when I have a couple minutes of free time, I think a great enhancement to this plug-in would be a checkbox list of WP classes that allows a developer to choose which to keep and which to filter, as well as textboxes to add new classes…

      Some day… :-)

      Ciao,
      Atg

  4. Ben says:

    Hi I’m loving the plugin, it makes the code so much easier to read and modify. I’m hoping you might be able to help me with an issue that I’ve run into with the plugin.

    For some reason each li class seems to still pick up the slug id which in itself is no big issue. i.e.
    , until you come to the current page class which displays as .

    Is there any reason you can think of, that might be making this happen?

    This is my code for calling the menu, incase its an issue with that
    'header_menu',// name of menu
    'container' => 'div',// wraps menu in tags
    'container_id' => 'nav',// div id
    'container_class' => '', //class name of container div
    'menu_id' => 'nav_ul',//change ul id
    )
    );
    ?>

  5. Erin says:

    Hi – really excited to use this plugin – it’s what I’ve been looking for awhile now and couldn’t get right on my own..! One problem I’m having though – i seem to only be able to “check all” or “uncheck all” – I don’t seem to be able to select the items individually. I’d really like to keep the current-menu-item class. Any ideas what might be going wrong? Is there an update I missed?

    Thanks!
    Erin

    • aarontgrogg says:

      @Erin: Thanks for the heads-up, good catch! (Actually, you could select items individually, just not by checking the checkbox… :-) In an attempt to “help” devs, by making the entire <tr> clickable, I broke the actual checkbox itself… All fixed now, and live in the WP Repository:
      http://wordpress.org/extend/plugins/navigation-menu-ids-classes/

      Thanks again, always nice to hear from devs, and to find out about errors!!

      Atg

      • Erin says:

        Hi Aaron – thanks for the update – checkboxes work now..! :) however- still having a bit of a problem – I’ve selected current-page-item and a few others, but the only class that’s showing up is the one mirroring the menu item name – do I need to rebuild those menus after updating?

        Thanks!
        Erin

  6. Bryce says:

    Awesome plugin!
    I’m using wordpress’s option of adding classes to menu items in the Menus admin page. The setting is turned on from Screen Options > CSS Classes.

    Can your plugin keep the custom class I enter on the menu items?

    Thanks!

    • aarontgrogg says:

      hey, K, thanks for the comment.

      it seems like you have this CSS applied to the :hover state of your navigation links:
      .nav-menu li:hover > a,
      .nav-menu li a:hover {
      background-color: #21bbc4;
      color: #fff;
      }

      (not sure why you need li:hover a and li a:hover, but okay)

      if that’s the look you want to represent the current page, then you can simply extend the above to:
      .nav-menu li:hover > a,
      .nav-menu li a:hover,
      .nav-menu li.current_page_item a {
      background-color: #21bbc4;
      color: #fff;
      }

      that should do the trick.

      however, i also see you have this CSS, so you could also eliminate it:
      .nav-menu .current_page_item > a,
      .nav-menu .current_page_ancestor > a,
      .nav-menu .current-menu-item > a,
      .nav-menu .current-menu-ancestor > a {
      color: #21bbc4;
      font-style: none;
      }

      your call.

      • K says:

        Hi,

        Thanks for the quick reply! This is actually the navigation / CSS that came with the original theme. I have done a lot of customizing of colors and various elements but this navigation / home tab for some reason has been a complete pain!

        So, I tried or had already tried your suggestions. Here is where I am at, I have left it as is for now so hopefully you might have a chance to see the results.

        I want the home tab to stay highlighted (blue background / white font) on ALL pages which it is now by using the plug-in for that tab and creating a class “hometab” … I entered the following in the custom CSS which at least maintains the blue background on ALL pages …

        .hometab {
        background-color: #21bbc4;
        color: #fff;
        }

        As you can see though, the font is not white which is the issue I keep running into. If you hover, it turns white but when not hovered, it’s still trapped in the main menu designated color of moss green. Arrr! I have tried so many things, hoping you might have the magic solution!

        http://whatsyourdamageheather.com/

        THANKS!

  7. K says:

    P.S.

    I have tried so many things, wasted about three days now! I have tried various plug-ins, uploading an image of the tab, etc. Nothing works as it’s supposed to! I think I have become obsessed to conquer this monster at this point. It seems like such a basic task but … NO!

    • aarontgrogg says:

      that’s because the specificity of this declaration:
      .nav-menu li a {
      color: #817e39;
      ...
      }

      outweighs this new line:
      .hometab a {
      background-color: #21bbc4;
      color: #fff;
      }

      so change this:
      .hometab a {...

      to this:
      .nav-menu .hometab a {...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>