In WordPress 3.0, there was a milestone feature added known as WordPress Menus. We covered an article on how to add a secondary menu in Twenty Ten theme. But upon a recent request by our user, we will be covering how to style the WordPress Menu. In this article, we will discuss different classes that are added by default within the WordPress menus that we can use to style each individual menu.
Note: This article requires you to have intermediate knowledge of CSS, and a fair understanding of how WordPress works.
First thing that everyone should know is that WordPress Menus are displayed in an unordered list format, so your theme would need to have these classes specified. For example, if you just add:
<?php wp_nav_menu(); ?>
Then it will add the menus under a <div> container tag without any class associated to that container. Your unordered list would have the class name menu with numerous lists each with it’s own classes. This might work if you only have one menu running on your entire page, but if you want to have more customization options, you will want to use the parameters like: ‘container_class’, ‘container_id’, ‘menu_class’, and ‘menu_id’. It is also best to name each menu, and give it a location. So now your menu code should be something like this:
<?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'container_id' => 'header', 'theme_location' => 'header') ); ?>
Here we specified that our menu name is Categories which should be placed under the container with an id of header, and class of main-menu. This means, we are probably developing our primary menu right now. Your output code would now be under the following tags:
<div id="header" class="main-menu"><ul id="menu-categories" class="menu">
Remember, you do not have to add the container id if your theme is not functioning like that. You can go just with the container_class parameter. So in your CSS file now you would need to style classes in the following order:
#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor
Now these are some of the default classes that you can style that are essential to have your menu looking somewhat like how it should be. Now here are some other classes that WordPress adds within the menus to allow for further customization:
.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link
Notice all the classes that we have mentioned above are within the list tags. You don’t necessarily have to edit every single one of them either. We usually do not bother with any menu-item-type class because none of our designs need that sort of customization. But if your site does, then feel free to edit those classes.
Now up until this point, all we have talked about is classes that are generated by WordPress. Often when designing in WordPress, you will find a need to associate a class for an individual menu item. For example, you want each navigation top-level item to have icons like this:
Well, WordPress has the option to do this in the admin panel in the menu screen, but by default it is checked off. So first thing you need to do is go to your Appearence » Menus screen, and click on the screen options tab, and check the Classes tab.
Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.
You can add individual classes in each item to customize the display of it. This is how we achieved the icon next to each top level navigation menu.
If you are using any framework like Genesis, Builder, etc. You will be guided through out the process. Genesis even has an option to do smooth drop down menus with Superfish built-in.
We hope that this article was helpful, and if we have missed something, please let us know in the comments.
For additional Parameters of the WP Menu refer to the WordPress Codex
Great article, thanks.
I never new about that CSS class feature, at least I know now.
Its really going to benefit me.
Thanks.
This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post
great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you!
@wiseroner You cant just add the font-size in the main menu class in your css file.
@mriulian Look in the tutorial above… the classes for current pages are already defined…
In the header code, you need to define the menu container ID and container class… follow the article as it says, and it will work.
Just trying to be more clear, this is my code:
// in the function page
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// in the header page
‘main_nav_menu’)); ?>
// in the css file
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
How do I apply this class to my navigation? ( very easy in a static html page but apparently pretty complicated in wordpress).
Thanks in advance
This is what I did but it doesn t work. I registered my menu in the
functions page and then I called it from the header page as my main
navigation. Now, I have a . current class in my stylesheet to be applied
to the current page but it is not obvious how to do that.
Can you help with a suggestion?
The way WordPress navigation menus work, it will automatically know which page is the current one..
Thank you for mentioning about the css classes in the screen options panel. The problem that I have with my navigation is how to style the nav menu so that each menu item gets a specific background color when you arrive at a certain page. You mention creating a class such as .current_page_item{} in your style sheet. But how to apply this class in the header.php?
Where can I get further more detailed info on how to add the icons to the menu names. Whats a real good css guide for doing alot of these things you outlined here?
Thanks
CSS-Tricks is a good forum, but you should probably look at CSS for Beginner books to learn CSS. Because all you are doing is adding a background image.
Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
Any thoughts on that would be greatly appreciated,
Yes, you would utilize Menu Class parameter for that.
That’s what I was thinking. Thanks for confirming, and for getting back to me.
Cheers!
nice article.
I want to change out put of wp_nav_menu().
I do not like HTML generated by wp_nav_menu().
I have my own nice HTML for Menu I want.
so I wanted to modify HTML structure generated by wp_nav_menu().
is this possible ?
Kindly advise asap.
You can add your own divs etc, but it will always be the list output. You can style it to be however you want.
Thank you! Now I can stop pulling my hair out! Bookmarked this and will tell others!
hi, thank for the tutorial. it would be nice if you guide me to have the nav menu used in your theme. Id like to have a drop-down menu like yours. tnks!
The WordPress default navigation menu lets you have drop down menus. Just drag them a little to the right of the main item, and it is possible. If you use a framework like Genesis, it already has Fancy Drop down option available, so you can simply select that. Or you can utilize jQuery techniques like SuperFish to do this. We may add a tutorial in the future.
very nice article, helped me for my wordpress project, thanks!
Great article. I didn’t know about the CSS classes in WordPress Menus. Thank you so much!
You guys know your WordPress.
This is not an easy tutorial but well explained and certainly adds to my understanding.
Appreciate you educating the rest of us.
Dude! Awesome! I had no idea about CSS option for menus! Rad-a-tad
Great write up, super informative! I didn’t realize the screen options for menus either.
I’m not sure in what you should place the first php wp_nav_menu code. Would it be in the functions file or header or…?
Didn’t know about the CSS Classes menu item! Thanks for pointing that out.
You are welcome
Me neither! That was exactly what I needed. God bless you all and the WordPress dev team!
Respect for pointing out the css styles! I always used the css attribute to style a list item, but these styles are definitely more handy. You just earned yourself another feed subscriber!
Regards from Belgium.
Glad we were able to help Pieter.