Creating a WordPress Navigation for your Theme

<nav class="nav-wrapper">
    <ul id="site-navigation">
        <li class="menu-item"><a href="/">Home</a></li>
        <li class="menu-item"><a href="/about.html">About</a></li>
        <li class="menu-item"><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

add_action( 'init', 'theme_prefix_register_menus' );

function theme_prefix_register_menus() {
    register_nav_menus(
        array(
            'primary_menu' => __( 'Primary Menu', 'theme_prefix' ),
        )
    );
}

function theme_prefix_register_menus() {
register_nav_menus(
array(
'primary_menu' => __( 'Primary Menu', 'theme_prefix' ),
)
);
}
add_action( 'init', 'theme_prefix_register_menus' );

wp_nav_menu( array ( 'theme_location' => 'primary_menu ) );

container_class - This allows you to set a class to be applied to your container element. For example, if we wanted to wrap our nav in <div class="nav-wrapper"></div> we’d set this to nav-wrapper.

fallback_cb - This fires a function if the menu doesn’t exist. It defaults to display all pages using wp_page_menu. If you wanted nothing to return you would set this to false. Alternatively, you could wrap your wp_nav_menu call in a has_nav_menu conditional statement.

For a full list check out the Codex for wp_nav_menu.

So, let’s put that all together and generate the markup for our original HTML menu.

wp_nav_menu( array(
'theme_location' => 'primary_menu',
'menu_id' => 'site-navigation',
'container' => 'nav',
'container_class' => 'nav-wrapper',
'fallback_cb' => false
) );

Now we should be getting HTML markup like our original HTML menu.

Styling your WordPress Menu

Now that you’ve got the markup output for your WordPress menu you’ll want to style it.

Links, Active States, Hovers, and Focus. Oh, my!

One of the wonderful things about using WordPress’s built-in menu functionality is that it applies various classes to your items for tracking which menus items are active or have active child menu items. These can be used to adjust the styles of items to show users where they are on the site.

Here are a few of the more useful items for figuring out where a user is currently located on the site.

.current-menu-item - This class is added to the menu item that corresponds to the page that is currently being displayed.

.current-menu-parent - This class is applied to the hierarchical parent of the currently rendered page. For example, if your About page had a child page of Contact Us, then when you’re on the Contact Us page your Contact Us menu item would have the class .current-menu-item and your About menu item would have .current-menu-parent.

.current-menu-ancestor - This class works similar to .current-menu-parent except it goes multiple levels up the page hierarchy. In our About example, if we added a child page to Contact Us we’d then have the following classes on our menu items.

About - .current-menu-ancestor
Contact Us - .current-menu-ancestor .current-menu-parent
Third Level Page - .current-menu-item

These classes provide you great power in creating accessible and easy to use navigation menus that keep your user informed on where they are on your site.

For a list of all classes added to menu items see the Codex.

As you build navigation menus as well, you should keep in mind that some users may be navigating your menu with only a keyboard. That means you should include :focus states alongside your :hover states so keyboard-centric users know which menu item they’re currently on.

Sub Menus and Dropdowns

Another nice element of the WordPress menu markup is that any nested menus are added within their parent <li> element as a <ul class="sub-menu"> element.

This makes it very easy to create drop-down navigations with your WordPress menus.

Here’s a quick example of how a drop-down navigation could be built using CSS and the classes added by the wp_nav_menu function.

.sub-menu {
left: -999em;
position: absolute;
background: #fff;
}

li:hover > .sub-menu {
left: auto;
}

Essentially we’re hiding the .sub-menu way off the side of the screen and out of view. Then when a user hovers the <li> it moves the .sub-menu that is a direct child onto the screen.

Gotchyas!

Sub-menu inception

WordPress menus give the user a lot of power, not to go all Uncle Ben on your, but that gives you the developer a lot of responsibility to make sure your menus work for many use cases.One important item to consider is nested sub-menus multiple levels down. The example above works great if your user is only using a single parent and child menu structure. But if they get into 3rd, 4th, and 5th level menus it starts to break down.

My preferred method of handling this is to have the first sub-menu open in a drop-down. Then 3rd, 4th, and 5th levels indent under the 2nd level items. You could also have a 3rd level open to the side to give an extra window.

Using the wp_page_menu fallback

If you decide to go with wp_page_menu as the fallback, you’ll need to make sure to style things appropriately as the markup generated can be slightly different. The best way is to test.

Where to go from here

Going Mobile

Now that you’ve mastered the art of using wp_nav_menu to implement WordPress menus into your themes, you may want to go deeper.

Maybe you’ll want to consider a custom menu for mobile navigations. I like to use the jQuery mmenu plugin for easy slide out navigations.

Custom Markup

If you need to create custom markup for your menu, you can do so by creating a custom menu Walker using the WordPress Walker class.

Be careful; this can be an advanced technique.

Some Navigation Inspiration

If you’re looking for some inspiration on what you can do with WordPress navigation menus, check out some of these examples.

Monstroid

Monstroid2 handles 2nd, 3rd, and 4th level dropdown by having each added level expand out from the side of the previous level. They also do an excellent job of repositioning the side. The navigation comes out of to prevent your menu from going off the screen.

Houston

Houston does an excellent job of animating the dropdown navigation in and out with a nice fade and motion animation. This creates a smoother visual transition for the user.

Bhanti

Bhanti does a wonderful job with an underline on the main navigation to show which page a user is on. They also have a pleasant animation and multi-level menu structure.

A Gift from me to you

Before you go, I’ve got one last thing. I’ve created an easy to integrate custom WordPress navigation using menu and all the practices listed above and released it on Github.

Feel free to grab it and use it in your projects.

If you’ve got any questions, feel free to drop in the comments or shoot me a message over on jasonyingling.me.

Related Posts

Creative and Innovative Eye Catchy Website Navigation Design

What Your Audience Wants From Your Site’s Navigation

20 Strategies to Max Results from Filtered Navigation on Your Site

How to Add More Navigation Menus to Your WordPress Theme

Color-Coded Dropdown Navigation with Submenus