How to Create and Use WordPress Custom Menus

Feb 22, 2012
WordPress
144 Shares
By

WordPress 3.0 introduced users to a powerful feature: custom menus.

Now, without the need for plugins, we can exclude, include, and rearrange our page links at will, displaying a different menu for different pages, and with some code, even different users entirely.

How to Create a Custom WordPress Menu

Creating a custom menu is simple. Log into your WordPress Administrative Dashboard and select “Menus” under the appearance tab. From here, select the “Menu Name” input and give your new custom menu a title. Anything works, but let’s use “Main Menu” for the purposes of this tutorial. Once you’ve typed that in, hit the blue “Create Menu” button.

Alright, now we’ve got a new custom menu setup, but we need to add some links. There are three types of things we can add to our menu: Custom Links, Pages, and Categories. Custom Links let you link to external pages (great for incorporating network websites, related projects, and affiliate links). Pages lets you add WordPress pages to the menu. Categories lets you add links to a specific category archive.

To add a custom link, type in the destination URL then assign the menu item a label (the text that will appear in your navigation menu for that URL). Finally, click “Add to menu.”

To add a page or category, toggle the checkbox next to the item you want to add, then hit the “add to menu” button.

To modify a navigation item’s label, simply click on the item to expand its options, then change the “navigation label” input to whatever text you want to appear on your website. You can also assign each menu link a title attribute (text that appears when you hover over a link) for added SEO and usability benefit.

Tip: automatically include any new parent pages you make by checking the “automatically add top level pages” box next to the menu title.

How to Create Drop-Down Menus with WordPress

If your theme supports drop-down menus, you can easily arrange parents and children by simply clicking and dragging menu items into an indented position. Similar to moving widgets into a widget area or moving around boxes in the admin dashboard, gray rectangles will appear beneath each menu item, creating a position for you to drop the menu item into. From there, your theme will generate the necessary code for drop-down positioning between parent and child.

How to Use Custom WordPress Menus

Now that you’ve created your menu, you have to assign it to a location on your website. This is where the “theme locations” tab comes into play. Depending on the theme you’re using, there could be just one (twenty-eleven has just a main menu area) or multiple (headway themes gives you the ability to add as many navigation menus as you want on your website).

Choose the area you want to assign your menu to, and click the dropdown field. It will display all of the custom menus you’ve created. Select the menu you wish to assign (in our case, we only have Main Menu created, so we’ll use this one) and then hit the “save” button.

Theme locations that have no menu assigned will, by default, show all public pages that have been published.

How to Make Your Theme Custom Menu Compatible

When developing your own themes, developing your own theme locations could be important to the creation of your theme. The basics of integrating menu support involve defining menus (the name of our theme locations) and then calling them in our templates.

First, let’s define some menus. Add the following code to your theme’s functions.php file:

function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'Top Menu' ),
'footer-menu' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );

This function assumes that we’re going to be building two menus, one for the main navigation and one for the footer. Now if we were to call the menu in our header.php or footer.php files, they would look like this:

<?php wp_nav_menu( array( 'theme_location' => 'top-menu' )); ?>

or

<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' )); ?>

Creating your own menu locations for themes can be used in a variety of ways, especially if WordPress conditional tags are employed. For example, let’s say we wanted a user to see a menu only if they’re logged in. We could place the following code in the header.php file:

<?php
if ( is_user_logged_in() ) {
wp_nav_menu(array('theme_location'=>'user-menu'));
} else {
wp_nav_menu(array('theme_location'=>'main-menu'));
}
?>

Conditional tags offer us the ability to show different menus on all kinds of system pages like archives, categories, specific pages, etc. You can find a list of conditional tags on the WordPress Codex.

How are you using custom menus to enhance your WordPress theme? What questions do you have about developing with custom menus? Share your thoughts and experiences in the comments below.

Author: Corey Freeman
Corey Freeman is a WordPress Developer and Headway Themes Expert
  • http://twitter.com/JWChiwa Joseph Wachira

    Very very much helpful. The conditional tags seems to work so fine tried that.

  • http://www.paulund.co.uk/ Paul

    Nice tutorial this is such a powerful feature of WordPress.

  • tmill

    This helps with half the battle. Now I just need to know how to tie the menu in with my custm css. What normally takes me 5 minutes to code seems to take 5 days in wordpress just to figure out what wp wants. :/

    • Αποστόλης Ταξινταρίδης

      best comment

  • http://www.facebook.com/profile.php?id=1102729475 Dennis Veldhuizen

    Hi there, i works but i cant get the dropdown menu to work.. i re-arranged it the right way in the men settings.. but they show up as single links/pages anyway.. any idea?

  • Atlante Avila

    Thanks, this was great!

  • http://www.webdesignbizz.com/ Website Template

    Really an amazing post u have share with us.Thank you for sharing this knowledge.

  • Lali

    i manage to make the menu but can seem to get it on the page… help! :)
    thanks a lot..

  • http://www.poweroften.us/ Steve

    I would like the top level item (the one which appears in the menu bar) to not be a link or a page of any kind, but just a title so that when you mouse over the drop down appears. I have several pages of content on a particular subject, but i dont need a page for the titel, just a title. i cant find any way to add to the menu that is not a page or link of some kind. is this possible? what am i missing? I am using the ‘responsive’ theme from wordpress.org

  • http://www.facebook.com/moe.j.hammoud Moe J. Hammoud

    THANK YOU!

  • http://twitter.com/inembelas Nembelas.com

    nice article, but i need to custome menu for client or member by role users.

  • Rupak

    Thanks, this is really helpful.

  • Anish

    I want to add two different menus in the header in different pages in a wordpress site .. what should i do.. Plz help me to figure out this?

  • MARS

    What if you’re creating a custom sub-menu for certain internal types of pages like “Neighborhoods” and whenever on a neighborhood page say “Dupont Circle” you see a sub navigation that leads to other types of pages like “Places”, “Points of Interest”, “History”, and “Gallery”. Now what if you have 27 of those neighborhood pages and each one should have this same sub-navigation but lead to it’s own version of the page that has the content relevant to that neighborhood? How would you accomplish something like that? Would i have to create 27 custom sub-navigation menus? Is there a logical way or less bloated way to link what otherwise would be the same sub-navigation menu to the specific content relevant to the neighborhood page it’s on? Thanks.

  • sab

    hy i need to toggle my custom menu in the sidebar to decrease the length of the page .. can u suggest how to do it

  • Shahzad

    how i st menu by doing code ?

    where this code will be put ?
    reply