How to Add Custom Menu Dropdown in WordPress

WordPress Release v3 that you can support add custom drop down menu, it is easy for you to add menu that you want every place on your website, this tutorial will help you to use custom menu in your wordpress. Menus often had to be hand coded into header.php and, whilst they could be ‘smart’, it often let the client needing a PHP savvy developer to make alterations to the setup.

Activating a Custom Menu
If you’re using WordPress 3 with the (brand new) default Theme TwentyTen installed this next bit won’t apply, because it’s already set up to use custom menus, so let’s assume you’re working with an older theme or perhaps even building your own. When you log into WordPress, go to Appearance > Menus.

If your current theme doesn’t support custom menus you’ll see this error message:

This means we need to head over to functions.php and get our hands a little dirty with some code. Open up functions.php and add in the following code:

add_action('init', 'register_custom_menu');

function register_custom_menu() {
register_nav_menu('custom_menu', __('Custom Menu'));
}

register_nav_menu has two parameters here, the first is the slug we’ll use in our code and the second is the name our menu will have in the WordPress admin area.

Now before we head back over to the menu screen, let’s stay in the source code and tell WordPress wear to put this menu. The most likely place will be in header.php, but of course there is no reason you can’t put a menu anywhere on your page. To keep things simple for our first menu let’s open header.php and, at whatever point makes sense in your theme, add the following line:

'custom_menu')); ?>

With just the default ‘About’ page in our theme, if we look at our site we’ll see the following in the source code:

And that’s all there is to it! Of course, we can add in a bunch of options into that array. You can check out the details over at the WordPress codex and here are a few of the more important ones explained:

  • menu – which menu to call. In our example we only have one but you can set up as many menus as you like
  • container – what element is wrapped around the menu. The default is a standard
    but if you’re playing with the new kids over at HTML5 you could always change this to
  • container_class – the css class given to this container, helpful for custom styling
  • menu_class – the css class given to the
      that is rendered. The default is ‘menu’, and again this is helpful for custom styling.
    • depth – How many levels should the menu display. The default is 0′ which means all levels, but you can set this to perhaps 1′ or 2′ to limit how far a drop-down menu will render. Handy stuff!
    • That’s probably enough for our purposes, but it’s definitely worth checking out the WordPress codex because there are many options you can set, like adding text before and after menu items and links.

      Using the GUI
      So let’s get cracking with the user interface, where much of the magic happens.

      The first thing we need to do is create our first menu (remember, we can have multiple menus) so I’ll imaginatively create one called ‘Our First Menu’. Type that in to the Menu Name field and hit the Create Menu Button.

      Did you spot the check-box ‘Automatically add new top-level pages’? Well, do you?

      Normally I don’t, because I figure if we’re going to the trouble of making a custom menu we probably don’t want it doing anything automatically. After all, we want complete control over our menu, so I don’t want WordPress dropping in a new page every time we create one. Maybe you do, and that’s okay with me too 🙂

      Excellent! Our first menu is empty but we’re well on our way. Over on the left we’re told that our theme currently only supports one menu so we best make sure we’re using ‘Our First Menu’. Select it in the drop-down, and click Save.

      Adding Pages to our Menu
      So we’ve created a place in our theme for the menu, and now we’ve created the menu itself. Trouble is, there’s probably nothing in it. WordPress gives us three easy ways to add content to the menu, and the great news is that it doesn’t have to be content that sits in the WordPress site. For example, the first box on the left you’ll see is for Custom Links.

      You could perhaps link to your twitter account like I have in the screen-shot above, and just click ‘Add to Menu’. It might be your portfolio, which you’ve hosted elsewhere, or links to live client sites. It might even be links to your favourite news sites. Whatever you choose, it’s great to know your menu can take your visitors anywhere.

      The second (and probably most often used) way to add content to the menu is in the Pages’ box, under ‘Custom Links’.

      As you can see, I’m working on a fresh install of WordPress 3 which gives me just two pages – Home, and About. Now ‘Home’ strictly speaking isn’t a page in the default configuration (although you can change that). For me, ‘Home’ is whatever resides at and in index.php.

      Notice the tabs at the top of the ‘Pages’ box, which allow you to hunt around through content rich sites for exactly the pages you want. If you’re setting up your menu for the first time you might want to look in the ‘View All’ tab, or if you’re just adding in a page you might want to ‘Search’ for it.

      I’m going to select both Home and About so I’ve got something to play with. If I hit ‘Add to Menu’ you can see that my menu is really starting to shape up.

      Finally we have the ‘Categories’ box, which acts in much the same way as the ‘Tabs’ box. Again, as this is the default install of WordPress I only have one category, the much maligned ‘Uncategorized’.

      I’m going to select it (most of my posts often accidentally end up in uncategorized!) and ‘Add to Menu’. This is what we now have:

      Now before we move on you need to ‘Save Menu’, so go ahead and click it.

      To prove that this has worked we can load up my simple blog (which has the TwentyTen theme installed) and marvel at it’s glory.

      Menu Hierarchy
      That’s cool but it’s also only the beginning. The next thing to look at is ordering your menu hierarchy. So far the menu items have just appeared in the order we added them, but we probably want to change this. The good news is that this the whole system is drag-and-drop, so go ahead and move things around.

      What you’ll also notice is that you can create a hierarchy by dragging items onto other items. I’ve added a few more pages and created something that looks like this:

      You can see I’ve created a hierarchy of pages as indicated by their indents, and I’ve also changed the name of ‘uncategorized’ to ‘The Blog’. If we whizz on over to the actual site, we can also see that WordPress has created a funky drop down menu for me.