• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

WordPress comes with a powerful Navigation Menu system that allows the theme developers and website administrators to add beautiful navigational menus to their websites. Using the Menu Editor, users can add and remove items from the navigational menus, customize items, add external items, create drop down menus and so on.

When I was writing the post “WordPress Advance Menu Plugins“, I realized that I am writing about plugins because I never fully tried to understand the Menu System. This is when I took a mental note of learning more about creating Navigational Menus for WordPress. I was able to modify existing menus in any theme but now I wanted to add my own, right from the scratch.

How the WordPress Menu System works

Since WordPress 3.0 theme developers can define navigational menus in their themes. Most modern WordPress themes come with menu locations defined so in most cases you probably don’t need to create your own menus. However, lets assume that your theme does not have menus or you want to create an extra menu location. Then you need to understand how the menu system in WordPress works.

In the first step theme developers define their menus and their location in the theme by registering menus. In the next step they add their menu to the location they have defined and then they stylize the appearance of the menu. Theme developers can add support for multiple navigational menus in their themes. The last step is when a user edits the menus using the built in Menu Editor.

Registering and Displaying a Navigation Menu in WordPress

Registering Menus is simple all you have to do is to tell WordPress to register a menu and provide a theme location and a name to your Menu.

	register_nav_menu( 'header-menu', 'Header Menu');

		// Or you can register multiple menus at once:
	register_nav_menus(
    		array(
      			'header-menu' => __( 'Header Menu' ),
      			'Top-menu' => __( 'Top Menu' )
    		)
			  );

Once you have registered your menu(s) you can add them to your themes. Like this:

<nav id="access" role="navigation">

				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav>

Styling your WordPress Menus

The wp_nav_menu function allows you to define menu container, container id, menu id and menu class so that you can later stylize them easily. Before you dive into styling your WordPress menu it is important that you understand the CSS classes used by WordPress in the menus. First have a look at how we are going to style our menu:

/*
First we prepare the navigation menu bar
 */
#access {
	background: #4572BF; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#4572BF, #6187C7);
	background: -o-linear-gradient(#4572BF, #6187C7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4572BF), to(#6187C7)); /* older webkit syntax */
	background: -webkit-linear-gradient(#4572BF, #6187C7);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}

/*
Now we style the unordered list, hover effect, and sub menus
 */

#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}
/*
Styling the currently rendered page
 */
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

Understanding the CSS Classes Used by WordPress Menu System

WordPress displays Menus in unordered list formats. If you are a CSS beginner then perhaps you should stop reading this post and instead head over to the ancient but still useful article of “CSS Design: Taming Lists” for a basic understanding of how unordered lists can be used to create beautiful navigational menus for websites.

In this unordered list, WordPress assigns classes to each item rendered in the menu. There is a container class which contains the unordered list, there is a container ID, there is css class for the menu, and then separate css classes for each menu item and each menu item type.

This might sound a bit overwhelming and confusing, but actually it is not. There are so many classes because WordPress allows you to add many type of items in your menus. You might want to add a page, a category, a custom link or may be even an external link in your Menu. WordPress treats each type of item differently so that designers can have more options to use with the menus.

CSS Class Description
.menu-item This is the main class added to every item in the menu.
.menu-item-object-{object} This class is added to every menu item where an object could be category, page, tag, etc. See next few classes
.menu-item-object-category
.menu-item-object-tag
.menu-item-object-page
.menu-item-object-{custom}
.menu-item-type-{type} The {Type} here is used for either “post_type” or “taxonomy”. See next two examples
.menu-item-type-post_type
.menu-item-type-taxonomy
.current-menu-item This class is used for the page the user is currently viewing
.menu-item-home This class is added to menu items that correspond to the site front page.
.page_item Provides backward compatiblity when Default menu falls back to wp_page_nav
.page-item-$ID
.current_page_item

Conclusion:

Learning to develop with WordPress is easy and fun. Personally, I can’t believe how far I have come from just a blogger with a desire to write journal to a blogger writing about CSS, HTML and WordPress functions. WordPress Navigation Menus are not that difficult to conquer. For more examples and inspiration, download other WordPress themes and have a look at how they have designed their menus.


Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

8 Comments

  1. Tojihi karimeh

    tnx for this podt. wordpress is very lovely cms for me and its functions you make evry thing dream…

  2. Ash

    This is exactly what I am looking for…Wow! I didn’t know there’s no need to use javascript/jquery just to have a dropdown navigation on your site.

    Thank you so much! <3

  3. Ash

    hello again! may i ask if where should I put the Registering Menus codes? is it in functions.php? I hope you’ll reply!

  4. You have missed a key piece of infomation for people who are quite new to WordPress.
    Where do I register the menu? There is no explanation for this in your tutorial.

    Steve

  5. also he doesn’t mention what is the name of styling css file for menu and where to save and how to include it , if you have shown without missing any steps it would be great help for beginners like myself with experienced user you are targating. hit two apple with a single bullet bro!

  6. but how can I make the menus at the center of the page?
    and BTW, my dropdown sub menu isn’t working, while I’m writing a wordpress theme from scratch.
    thx!

  • Comments are Closed

Search

Our Sponsors