metinsaylan // rogue developer

HOWTO: Dropdown Menu Using WP Menus

//

Wordpress 3 brought many great features. One of those great features is navigation menu support. Although many themes not supporting this great feature yet, you can use it with dropdown menu widget to create custom menus on your site. In this tutorial i will explain you how to use custom navigation menus with dropdown menu widget. ***


First make sure you have latest wordpress installation. Custom Navigation Menu support comes with Wordpress 3. So if your wordpress version is lower than that, you need to update first. Don’t worry, it will worth it ;)

If you have the latest wordpress installation now, you will see Menus link under Appearance section of the admin panel.

Click on Menus to start building our brand new custom menu. Wordpress may warn you about “theme doesn’t support custom menus” but don’t worry. We will be using menu in our dropdown widget so it doesn’t matter.

You see white box there under + sign. Enter a name for our new menu. For example, let’s call it, “My Custom Dropdown”. How original! Click on create menu button afterwards to create the menu.

Your menu is created now but it doesn’t have any link inside. You will see tools on the left to add links to your custom menu. You can add blog pages & categories to your menu.

You can also add custom links to your menu. After you add links, you can easily order your menu items using drag and drop.

You can create sub menus dragging a link item under another.

After your ordering is complete, save your menu. This menu is now added to dropdown menu widget. Steps from now on requires dropdown menu widget installed on your site. If you haven’t already click here to get it.

Add a dropdown menu widget to your widget area. I like my custom themes to have it. Makes wordpress more customizable.

Note that not all the themes have header widget areas. You can either use Dropdown Menu PHP template tag or you can add a header widget area to your theme to overcome this. I recommend using PHP Template tag instead.</div>

Select your custom menu from the Menu selection of dropdown menu widget. And click on Save.

If you just installed the dropdown menu widget you may need to visit menu style page. Change dropdown menu theme to any theme you like and then click on Save Changes.

Now visit your blog and enjoy your new custom menu. Cheers!