Provided by developerdrive.com
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.
