How To Add a Dropdown Navigation Menu To WordPress Without a Plugin

In this tutorial, I will show you how to dynamically add a Multi-Level(up to 3-level deep) Dropdown Navigation Menu to your WordPress blog without the need of a plugin. This tutorial is NOT about creating custom Menu widgets but rather a native theme support for Page or Custom multi-level navigation menu. The navigation menu can range from a single top level and up to 3 level deep.

A Blog´s success largely depends on its navigation menu. If it is difficult for your users to navigate your WordPress Website they will not stay long and probably will not return.

For WordPress 3.0 and newer versions, the user has the ability to create a custom navigation menu. The code below shows how to add a navigation menus to your WordPress theme while maintaining backward compatibility with earlier WordPress verions.

What about a plugin?

Yes, there are plugins that add Navigation Menu to your blog. But I encourage you to read my previous article about unnecessarily adding plugins to your theme.

Reasons To Use the Navigation Menu Code (CODE-1)

  1. Your WordPress theme does not natively support menus.
  2. Your current menu does not support a multi-level dropdown menus
  3. You don´t like you current menu design and you like my CSS code better.
  4. You don´t want to use the “Custom Menu” widget in the sidebar, but in the header of the page.
  5. You just want to try my code and see how it works!

Features of The “Multi-Level Dropdown Navigation Menu” Code (CODE-1)

The code has the following features:

  1. You can customize the code to make the navigation menu as a single Top level Menu or as a multi-level dropdown menu (up to 3 levels deep).
  2. The code maintains WordPress backward compatibility up to version 2.7
  3. If you are using WP version >= 3.0 AND there is a custom menu created in the dashboard: The code displays a Custom Navigation Menu (as specified in the Dashboard -> Appearance -> Menus section).
  4. If you are using WP version >= 3.0 AND there is NO custom menu created in the dashboard: The code displays a fallback Page navigation menu (as specified in the Dashboard -> Pages section).
  5. If you are using WP version < 3.0: The code displays a fallback Page Navigation menu (as specified in the Dashboard -> pages section).
  6. The code is tested to work properly with all major browsers. IE7/IE8/IE9, Safari 5 (for windows), Google Chrome 15, Opera 11.5
    and Mozilla Firefox 8. The code was NOT tested for IE6 (and I don´t care if it does not work).
  7. The code is tested to work properly with WordPress Version 3.2.1 but it works on earlier versions > 2.7
  8. The code is XHTML valid, HTML5 valid and CSS Valid.
  9. The code is tested for a maximum of 3-level deep Navigation Menu. For deeper level menus, the CSS code need to be tweeked.
  10. The code is dynamic, the menu is automatically updated with any changes you make in the dashboard.
  11. The code does not rely on JavaScript. The code works properly even when JavaScript is disabled in your browser.

Diary Theme Without a Navigation Menu

The image below shows the Diary theme without a navigation menu. The Diary theme does not natively supports menus.

Diary theme rendered without a menu.

Demo of a 3-Level Deep PAGE Navigation Menu | Final Result

If you want to add a Multi-level Page Navigation Menu to the header of your theme, I will show you here where to add it and the Final result after adding CODE-1 below.

To add your pages, login to your WordPress dashboard. In your Administration Screens, and on the left Panel, go to Pages -> Add New.

In the Page Attributes box, make sure to specify the page Level, a top level or a sub-level page, and then click Publish. This will create a new page as shown in the image below:

WordPress Admin panel: Adding a new page and specifying its level.

The image below shows the result after I added the top level page and up to 3 level deep pages. This will be the basis for your Multi-Level PAGE navigation menu. Of course, You can specify how deep you want your menu to display. For instance, the page navigation menu for this blog is only a single “Top Level” menu.

WordPress Admin panel: Added top level and up to 3 level deep pages.

Once you add the pages as shown in the image above, adding CODE-1 to your theme´s header.php file (and depending on some conditions defined), will result in the image below for the Diary theme.

Diary theme: Example of the PAGE dropdown navigation menu - 3 level deep.

Demo of a 3-Level Deep CUSTOM Navigation Menu | Final Result (For WordPress 3.0 and Newer)

If you want to add a Multi-Level Custom Navigation Menu at the top (header) of your theme, I will show you where to add the custom navigation menu and the Final result after adding CODE-1 below.

For the Custom Navigation Menu you can add pages, categories and other custom links. Also if you have custom post types and taxonomies, those types will also be available to add as custom menu items.

To add your custom navigation menu, login to your WordPress dashboard. In your Administration Screens, and on the Left Panel, go to Appearance -> Menus. Please refer to the WordPress tutorial: Adding Custom Navigation Menus for details.

WordPress Admin panel: Adding a 3-level deep CUSTOM navigation menu for WordPress 3.0 and newer.

Once you created the Multi-Level Custom Navigation Menu as specified in the above image. Adding CODE-1 to your theme´s header.php file (and depending on some conditions defined), will result in the image below for the Diary theme.

Remember: Custom Navigation menus are only availabe for WordPress Version 3.0 and newer

Diary theme: Example of a CUSTOM dropdown navigation menu - 3 level deep.

Dynamic (Custom or Page) Multi-Level Navigation Menu Code | header.php

Copy and paste CODE-1 below to your header.php file located in your theme´s folder. Add CODE-1 where you want your menu to appear (I will show you an example where to add the code later.)

CODE-1:

<!-- 
/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 1, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates a Dropdown (Pulldown) Multi-Level
* Navigation Menu for your WordPress Blog.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions > 2.7)
*******************************************************************************/ 
-->
<div id="navigation">
    <?php 
	//if wp_nav_menu() function exists, meaning if you are using WordPress >=3.0
	if (function_exists('wp_nav_menu')) //If you are using WP version >= 3.0 
	{	
		//Display the navigation menu created in the (Appearance -> Menus) panel. 
		//If there is NO menu created in the Admin area, use the fallback function bac_wp_page_menu().
		//http://codex.wordpress.org/Function_Reference/wp_nav_menu
		wp_nav_menu(array('container_class' => 'menu', 'fallback_cb' => 'bac_wp_page_menu')); 
	}
	//Else, if you are using WP version < 3.0, use the fallback function bac_wp_page_menu()
	else { 	
		bac_wp_page_menu(); 
	}
	//Fallback function:
	//1. In case you are using WorPress version >=3.0 AND you did not create a Menu in the Admin area.
	//2. OR if you are using WP version < 3.0 
	function bac_wp_page_menu() {
		//http://codex.wordpress.org/Function_Reference/wp_page_menu
   		wp_page_menu('show_home=1&menu_class=menu&depth=0');
	}
	?>
</div>

CODE-1 Notes:

Eventhough WordPress documentation suggests to register the names of your menus in your theme´s functions.php file, but in this case I did not have to register the menu since (I guess) I added the code directly to the header.php file.

It is important that the CSS class for the “Custom Menu” and “Page Menu” MUST be the same, in order to reuse the same CSS code for different conditions.

CODE-1 was tested to work on WordPress 3.2.1 and it is backward compatible to WordPress version 2.7. But I hope that you will upgrade to the latest WordPress version.

You can easily customize the code to fit your needs!

For WordPress 3.0 and newer: If you want to show only the Top level items for your Custom Navigation Menu (Single Level Menu), then make sure to adjust your menu accordingly in your WordPress dashboard. Whatever level you specify in the Appearance -> Menus in your dashboard, is what you get as a result of using CODE-1.

Code References:

Real Example | Where to Add the Navigation Menu Code

To give you a real example. The Diary theme I am using for this blog did not natively support menus. But now after I added CODE-1 it does.

Below is where I added the Multi-Level Dropdown Navigation Menu code (CODE-1) to the header.php file.

header.php file | Diary Theme

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<!-- Code REMOVED for Brevity... -->
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

?></title>

<!-- Code REMOVED for Brevity... -->
<?php
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
	wp_head();
?>   
</head>

<body>
<div id="wrapper">
<!-- Code REMOVED for Brevity... -->
<!-- 
/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 1, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates a Multi-Level Dropdown (Pulldown)  
* Navigation Menu for your Blog.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions > 2.7)
*******************************************************************************/ 
-->
<div id="navigation">
    <?php 
	//if wp_nav_menu() function exists, meaning if you are using WordPress >=3.0
	if (function_exists('wp_nav_menu')) //If you are using WP version >= 3.0 
	{	
		//Display the navigation menu created in the (Appearance -> Menus) panel. 
		//If there is NO menu created in the Admin area, use the fallback function bac_wp_page_menu().
		//http://codex.wordpress.org/Function_Reference/wp_nav_menu
		wp_nav_menu(array('container_class' => 'menu', 'fallback_cb' => 'bac_wp_page_menu')); 
	}
	//Else, if you are using WP version < 3.0, use the fallback function bac_wp_page_menu()
	else { 	
		bac_wp_page_menu(); 
	}
	//Fallback function:
	//1. In case you are using WorPress version >=3.0 AND you did not create a Menu in the Admin area.
	//2. OR if you are using WP version < 3.0 
	function bac_wp_page_menu() {
		//http://codex.wordpress.org/Function_Reference/wp_page_menu
   		wp_page_menu('show_home=1&menu_class=menu&depth=1');
	}
	?>
</div><!-- End of Navigation Menu -->

<!-- Begin Header -->
<header id="page-header">
  <div id="logo">
   
   <!-- Code REMOVED for Brevity... -->
                 
   <span><?php bloginfo( 'description');?></span>	  
  </div>
        
<div id="topSearch">
   <form id="searchform" action="<?php bloginfo( 'url' ); ?>" method="get">
       <input type="text" id="s" name="s" value="type your search and hit enter" onFocus="this.value=''" />
   </form>
</div>
</header> <!-- End Header -->

<!-- Begin Content -->
<div id="content-wrapper">
    <div id="content-inner-wrapper">
    
<!-- Code REMOVED for Brevity... -->

Styling the Multi-Level Navigation Menu | style.css

Finally we need to style the Multi-Level Dropdown Navigation Menu with CSS. The following code is what I used for this blog. The code should be added to your theme´s CSS file (called style.css). Feel free to tweak it to fit your blog´s design.

The CSS code could be more tweaked especially for sub-levels and by adding arrows for the selected menu items. If you are using more than 3-level deep menu (the chance of that is probably 0.01%) than you need to update the CSS code.

/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 1, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: CSS code for a 3-Level deep Dropdown (Pulldown) Navigation Menu
* @Tested on: IE7/IE8/IE9, Safari 5 (for windows), Google Chrome 15, Opera 11.5 
* and Mozilla Firefox 8
*******************************************************************************/ 
#navigation{ 
clear:both; 
float:right; 
margin-top:0; 
margin-right: 10px;
}
#navigation ul, #navigation li {
display: inline; 
/*z-index is for IE7, so that the pulldown menu displays in front of the image.*/
z-index: 99999;
}
#navigation li {
display: inline;
}
#navigation a {
border-right: 1px solid #AFA69C;
float: left;
font-size:97%;
padding: 4px 8px;
text-align: center;
text-decoration: none;
border-bottom: 1px dotted #bbb;
border-top: 1px dotted #543;
}
#navigation a:hover {
color:#543;
border-bottom: 1px dotted #543;
}
#navigation li.current_page_item a {
color:#543;
border-bottom: 1px dotted #543;
font-weight: bold;
}
#navigation ul li:first-child{ 
border-left: 1px solid #AFA69C;
}
#navigation ul ul { 
display:none; 
position:absolute; 
top:30px; 
left:0; 
float:left;  
border-left: 1px solid #AFA69C;  
border-right: 0; 
} 
#navigation ul ul li:first-child{ 
border-left: 0; 
}
#navigation ul ul ul { 
left:100%; 
top:0;   
border-left:0; 
border-right: 0; 
} 
#navigation ul ul ul li:first-child{ 
border-left: 0;
}
#navigation ul ul a {
height:auto;  
padding:4px 8px; 
width:100px;
} 
#navigation li:hover > a, #navigation ul ul :hover > a { 
width:100px; 
color:#543; 
background:#F8F7F1; 
font-weight: normal;
}
#navigation ul li:hover > ul { 
display:block;
}  
div.menu ul { 
list-style: none;
}
div.menu li { 
float:left; 
position: relative; 
margin: 0; 
}

Scenario 1 | How To Modify CODE-1

Question: I have WordPress Version >=3.0. I just want to show the Top level PAGES in the Menu. I don´t want to show any sub-level pages. Also I am not using a Custom Menu (that section is empty in the dashboard -> Appearance -> Menus). What do I need to do?

Answer: All what you have to do is modify CODE-1 to show only the top level pages (On line 30 of CODE-1 replace the “depth” to 1 instead of 0) as shown in CODE-2 below.

CODE-2:

<!-- 
/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 1, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates a Top level Navigation Menu.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions > 2.7)
*******************************************************************************/ 
-->
<div id="navigation">
    <?php 
	//if wp_nav_menu() function exists, meaning if you are using WordPress >=3.0
	if (function_exists('wp_nav_menu')) //If you are using WP version >= 3.0 
	{	
		//Display the navigation menu created in the (Appearance -> Menus) panel. 
		//If there is NO menu created in the Admin area, use the fallback function bac_wp_page_menu().
		wp_nav_menu(array('container_class' => 'menu', 'fallback_cb' => 'bac_wp_page_menu')); 
	}
	//Else, if you are using WP version < 3.0, use the fallback function bac_wp_page_menu()
	else { 	
		bac_wp_page_menu(); 
	}
	//Fallback function:
	//1. In case you are using WorPress version >=3.0 AND you did not create a Menu in the Admin area.
	//2. OR if you are using WP version < 3.0 
    //Then create a Single Top level menu
	function bac_wp_page_menu() {
   		wp_page_menu('show_home=1&menu_class=menu&depth=1');
	}
	?>
</div>

Scenario 2 | Modifying CODE-1

Question: I have WordPress Version >=3.0. I just want to show the PAGE Navigation Menu at the header (top) of the theme. Also I have a CUSTOM Navigation Menu (that I made in the Appearance -> MenuS dashboard), but I would like to use the Custom menu in the sidebar as a widget. What do I need to do?

Answer: All what you have to do is modify CODE-1, removing the code related to the Custom navigation menu and keeping the code related to the page navigation menu as shown in CODE-3 below.

CODE-3:

<!-- 
/******************************************************************************
* @Author: Boutros AbiChedid 
* @Date:   December 1, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Code that dynamicaly generates a Dropdown Page Navigation Menu.
* @Tested on: WordPress version 3.2.1 (but it works on earlier versions > 2.7)
*******************************************************************************/ 
-->
<div id="navigation">
    <?php 
		//http://codex.wordpress.org/Function_Reference/wp_page_menu
   		wp_page_menu('show_home=1&menu_class=menu&depth=0');
	?>
</div>

Notice How CODE-3 is much simpler now.

1. If you don´t want to add “Home” to the Page Navigation Menu, then replace the ´show_home´ number 1 by 0, as shown in the code below:

wp_page_menu('show_home=0&menu_class=menu&depth=0');

Or you could use the following code since “Home” does not show up by default:

wp_page_menu('menu_class=menu&depth=0');

2. If you have a multi-level pages in your dashboard, but you want your page navigation menu to show only the top-level pages then replace the ´depth´ number 0 by 1, as shown in the code below:

wp_page_menu('show_home=1&menu_class=menu&depth=1');

3. If you want to exclude some pages from your page navigation menu, then add the exclude string as shown in the code below.

wp_page_menu('show_home=1&menu_class=menu&depth=1&exclude=3,7');

the page IDs, specified above, are different in your case. If you don´t know how to find the page ID, read my previous tutorial on How To Find the Page ID.

Your Turn to Talk

You now have the choice to create a Custom or Page Dropdown Navigation Menu for your WordPress Blog without the need of a plugin that you can style to best fit your needs.

How easy did you find this tutorial to implement? Did you have a hard time integrating the code into your WordPress theme? Do you have something to add or anything else to say? If so, please share your opinion or questions in the comments section. Your opinion matters, unless it is a Spam.

If you enjoyed this post, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

5 Responses to “How To Add a Dropdown Navigation Menu To WordPress Without a Plugin”

  1. seni says:

    Hi,

    How about a footer menu bar which is style differently than the top menu bar. I mean you do not use a drop-down menu in footer but more of a list of links, structured as columns. But you obviously want all links in footer.

    Can u show how to style the top menu to look like columnar lists in footer and where and which code to insert in footer.php

    thanks,
    seni.

  2. NAwfal says:

    please , i have 2 menus and i want choose the second one! what should i do? thank you!

    • Hi NAwfal,
      I request a donation to do custom work first.
      If you are interested, I need to know the WordPress theme you are using and more details of what you intend to do.
      Then we’ll go from there.
      Thanks.
      Boutros.

  3. NAwfal says:

    Thank u , it was great!

  4. msrosyidi says:

    I want to create drop down menu but with centered position. I’m looking for the tutorial but I don’t find. I hope you can help me. Thanks.