WordPress.org

Support

Support » Requests and Feedback » [Resolved] How about add classes to menu items?

[Resolved] How about add classes to menu items?

  • I was wondering a way to easily add classes to menu items in order to create unique visuals and behaviors for specific links.
    I’ve been using css selectors, such as li + li to create these effects but the code can become really clumsy and confused, not mentioning this technique is not scalable, once the CSS is static and any modification in items order will cause a disaster.

    Then, I wonder how difficult would be to implement this “add class to a menu item” in new versions of WordPress! I’m not a developer but I’m sure it’s not rocket science. Am I wrong? Please tell me if it’s a delirious of mine.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    To which HTML element do you want to add a class?

    It depends.. <a> or <li>. It’s usual to add a class to <li>tag. For instance, imagine that only few items in the menu have subitems, and I want to add a down arrow to these items indicating that there’s subitems under them, hidden. Right? It is a good practice.
    A good way to do it, would be on admin panel > appearence > menus. Once you select an item to add to your menu, besides the conventional inputs like Label and Attribute, it would be awesome to have a simple input called “Class”. Then, just assign the desired class to a specific menu item.

    At least, in my limited non-developer mind, it looks pretty simple to implement and it would be a super useful setting.

    Andrew Nevins
    Forum moderator

    @anevins

    I know you’re not a developer but it may be worth reading on what developers do in your situation:
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    Hi Andrew! I appreciate your help, but for what I see in this article, I don’t think it solves my needs. Even if it does, all this seems to be so unecessary!

    Check this image I made to explain what I belive to be a huge improvement and why WP developers should take into account.

    Zarce Baron, already found a solution for it? Got the same problem and i am looking for a solution so i can play with responsive menu’s =]

    psopacua, Not a word from the community. I really hope this feature can be added soon ’cause I don’t believe it’s a rocket science and it would be so so helpful for us.

    What I’m doing as an interim solution, is to add an title attribute to the link when it’s created, and then, using the [title=””] css selector, I’m able to assign any visual element to the link that I need.

    Still, it’s far from a good solution, considering its lack of scalability and maintenance, but until the feature proposed is not implemented, I think it’s the better way to deal with it.

    I was wondering a way to easily add classes to menu items in order to create unique visuals and behaviors for specific links.

    You don’t need that.

    CSS already lets you create unique calls for specific links.

    http://justintadlock.com/archives/2013/08/07/social-media-nav-menus
    http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2

    Just as an example, if your menu is called ‘social’ then you can do this:

    li.social a[href*="facebook.com"] {
        color: blue;
    }

    And so on 🙂

    Justin Tadlock
    WordPress God

    @greenshady

    All you need to do for custom classes is add your class in the “CSS Classes (optional)” input box for specific menu items.

    If you don’t see that option, go to /wp-admin/nav-menus.php

    Click on Screen options.

    Check the box for CSS Classes

    Blissed on the simpliest answer, of course!

    Hey Justin and Ipstenu! Thank you guys for your help!
    That was exactly what I was looking for! I wasn’t able to see the option at first… I feel silly now. 😀

    Thank you again!

    Just closing this topic as RESOLVED. 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] How about add classes to menu items?’ is closed to new replies.