How to Create WordPress 3 Menus

Home » Tutorials » How to Create WordPress 3 Menus

How to Create WordPress 3 Menus

Written by Pixel Theme Studio Thursday, 23 September 2010 Category: WordPress Tutorials

Yet again, WordPress developers love changing things with several of their major version changes, but in this case, their WordPress 3 menu management system is built into the admin now. This is a very long overdue feature and it marks the beginning of making menus easier for the end-user and non-techy savy individuals. Although, it's best to have a WP 3 theme to take immediate advantage.

See How the Menu Management Area Functions

Simple enough, its mostly a drag and drop concept, almost like the widgets. But the most important aspect with the menus in WordPress is that it lets you create multiple menus and a variety of menu types - even custom menu items. To see more about this, you log into your admin and under the Appearance panel, you will find the Menu Manager there with a select set of mini-panels:

Theme Locations - This is basically predetermined coded theme locations for menus, should your theme have this already done for you
Custom Links - If you want to add your own menu items, this is where you do it. For example, creating external links to other sources.
Posts - This gives you a selection of posts you can add to the menu by checking each box next to the one you want (or more than one).
Pages - This gives you a list of pages you can also add to your menu.
Categories - This gives you a list of Categories you can add to your menu as well.

Somewhat simplified way of adding menu links to your main menu but also to any other menus you might be creating.

A Quick Look of Menu Items

Here is a quick example of a WordPress 3 menu I made on my local computer here. As you can see, there are two menus I made, one called footermenu and the other called mainmenu. The menu items you see in the screenshot below show parent menu items (the ones you see across the main navigation bar of a site) and the ones you see slightly indented are your submenus on the parent ones. So for example, the Templates main menu item now has a submenu custom link to Google. Also, if I decide I want to change it to the "About" parent menu item, I simply drag the Google one to it until it indents. You may also noticed there is a second sub-level menu on Google which I dragged it to that location. Now when I view the front-end of the site, I will have a main menu with submenus.

wp-mainmenu

Great! What About Themes that Don't Have this Ability?

There's going to be a lot of upset people when they discover that their older themes do not support the menu system in WordPress 3.0. Unfortunately, you will need to make it compatible so you can take full advantage of the new menu function in the admin...otherwise it will be a pretty thing in your admin that you can only look at.

This might be scary but if you want to enable your theme to have this ability, you have to do a bit of coding

Adding Menu Code to Your Theme - Part 1

Open your theme's function.php file and add this to to the bottom of the theme (to be safe) just before the ?> closing tag:

if (function_exists('add_theme_support')) {
    add_theme_support('nav-menus');
}

The above code will also help prevent error messages in your admin to show "This theme does not support menus" in red letters. So basically what this function does, is looks at your theme and checks to see if it has the ability to use the new menu function.

Adding Menu Code to Your Theme - Part 2

Now that you added the above code to your function.php file, you still have one more to go, and for this you will need to open your theme's file that contains the menu container - the part that already has menu coding in it. This will be a bit more tricky because all themes do different things for adding menus and it will greatly depend on what theme you are using. Some will be easily distinguishable while others could be complicated.

The code below is what you want to add to your theme by replacing the older code:

<?php wp_nav_menu('menu=your-menu-name'); ?>

That is a basic version of code which contains the name of your menu you would make; but it can have more added to this line. For example, in my first version 3.0 theme, it has this, which is from the WordPress default theme called Twentyten:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' 
=> 'primary' ) ); ?>

You can go to the wordpress.org site for more documentation about the new WordPress 3 menu system. The quick tutorial that I wrote here is to give you a fast solution for any theme you have that originally doesn't have 3.0 compatibility with menus.

Menu Styling

One last thing that may be required when converting or adding a WordPress 3.0 menu system to your older theme, styling may be an issue because it has a set combination of style names for it's structure. The best way is to look at how the default WordPress 3.0 theme "twentyten" looks with it's source code when viewed from the front-end but also check out its style.css file for the menu styling that was created for the menu.

You may need to customize your own styling or at least modify the twentyten theme's own style for the menu to fit into your own theme concept being used. This won't be a plug-n-play method of adding 3.0 menu support so keep in mind css may be required.

Later, I will do more indepth menu management tutorials to give you some additional tips and tricks of how to get a variety of menus within your web site or blog. Remember that this now lets you have more than one menu in your pages.

Comments

1. cy9t Posted: Monday, 18 April 2011

hi great post, I'm having an issue with Menus panel.. by default the 'Main Menu' is taking all of my categories and even I filter it in the menu tab its still keep on coming. I'm using wordpress3.1.1 and having this issue for so long.

Quote

Refresh comments list