the graphic design blog that speaks the truth

Using the WordPress menu feature has made it fairly simple for developers to add advanced styling to their WordPress navigation menus.

It creates classes such as:

  • current_page_item – To highlight the current page
  • current_page_parent – To highlight the current pages parent
  • current_page_ancestor – To highlight any ancestor of the current page

WordPress automatically adds these classes to the menus on your site, meaning styling these elements is a simple matter of adding some CSS.

There is one important class it has forgotten though.

A main functionality I find clients wanting is the ability to differentiate between top menu items that have drop-downs (sub items), and those that do not. In that, if you wanted to, lets say, add an arrow next to any menu items that had drop-downs in WordPress, there is no default way of doing so.

So how do we go about adding an arrow next to such items? It’s very simple by using just one line of Jquery:


WordPress automatically adds the class ‘sub-menu’ to any drop-down lists your WordPress menu contains. As such, the above code simply assigns a new class named ‘dropdown-arrow’ to the parent of these ‘sub-menu’ lists.

We now have a new css class to style!



  1. 23/06/12
    5:37 am
    I found a way to do it without having to change any code (for those that don't have that ability). First create a Custom Link using # as your URL. Then type in your Label (for instance on my site it's "Resources") then after you type in your label end it with ▼ and the HTML will create the arrow. I found it on this site pretty great!!
  2. 24/06/12
    2:37 pm
    Thanks for sharing! It's still a rather hacky way of achieving the goal though, I was hoping Wordpress would support this functionality in 4.3 but it still doesn't seem possible with an out of the box install.
  3. 26/06/12
    1:40 pm
    Hey, I've been searching for a solution to this for quite a while since I'm no good with actual scripting and stuff myself. So I also got a noobish question. Where exactly do i add this one-line-code?
  4. 10/09/12
    1:28 pm
    You need to add the line inside "script" tags and inside a "document ready" jQuery listener. You should also be sure to "include" the jQuery library in your header file too. You can read more on the above here.
  5. 22/12/12
    12:49 am
    Do you know how to do this with standard javascript? I'm not loading jquery and don't really want to just for this. I can't believe they left this out.....
Voice Your Opinion

Thanks for your comment, it will appear here once it has been moderated.