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)
- Your WordPress theme does not natively support menus.
- Your current menu does not support a multi-level dropdown menus
- You don´t like you current menu design and you like my CSS code better.
- You don´t want to use the “Custom Menu” widget in the sidebar, but in the header of the page.
- 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:
- 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).
- The code maintains WordPress backward compatibility up to version 2.7
- 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).
- 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).
- If you are using WP version < 3.0: The code displays a fallback Page Navigation menu (as specified in the Dashboard -> pages section).
- 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).
- The code is tested to work properly with WordPress Version 3.2.1 but it works on earlier versions > 2.7
- The code is XHTML valid, HTML5 valid and CSS Valid.
- The code is tested for a maximum of 3-level deep Navigation Menu. For deeper level menus, the CSS code need to be tweeked.
- The code is dynamic, the menu is automatically updated with any changes you make in the dashboard.
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:
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.
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.
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.)
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.
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
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.
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.
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.
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.