If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.

What You'll Need

To complete this tutorial, you will need the following:

• your code editor of choice
• a browser for testing your work
• a WordPress installation, either local or remote
• If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
• If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.

1. Registering a Navigation Menu

To register a navigation menu, you use the register_nav_menu() function, which you will need to add to your theme's functions.php file.

As your theme doesn't have this file yet, you start by creating one.

In your theme folder, create a new blank file called functions.php.

Open the new file and add the following to it:

<?php
function wptutsplus_register_theme_menu() {
    register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'wptutsplus_register_theme_menu' );
?>

You've just created your theme's first function, pat yourself on the back!

The function you've created is called wptutsplus_register_theme_menu(), and I've added a wptutsplus prefix at the beginning of its name to ensure the name is unique and doesn't clash with any other functions registered by the plugins you might run on your site.

The function includes the register_nav_menu() WordPress function which creates a menu. Your function is then activated via the init action hook, which means WordPress will run your function when it initializes.

Note: that you must activate functions like this via the correct hook or they will not work.

The register_nav_menu() function has two parameters:

• One of these parameters include the location of the menu. In this case, we have called the location 'primary'. You will add this to your header.php file later so that WordPress displays the correct menu.
• The second parameters is the menu's description. In this case, 'Main Navigation Menu'. This will be visible in the 'Menus' admin screen.

2. Setting Up Your Navigation Menu

You'll now have access to the 'Menus' dashboard screen, which wasn't available before as your theme didn't have a menu registered. Right now, its contents aren't perfect but we'll soon change that:

As you create pages, posts and other content, you can add these to your navigation menu via this screen. I'm going to add a two new pages called 'Blog' and 'About'. I'll specify the 'Blog' page as the page where my posts are displayed via the Settings screen. You can create whatever pages you like.

Having done this, return to the 'Menus' screen to edit the menu, adding the new pages. Once you've dragged the new pages across to the menu, click on 'Create Menu' to create the new menu.

Finally, check 'Main Navigation Menu' under Theme Locations to ensure that this menu will be displayed as the main menu you've just registered and save the menu.

Note: Always remember to save your menu after you make any changes to it—unlike widgets, Menus aren't auto-saved by WordPress.

3. Adding the Menu to Your Theme

Right now, this menu still won't be visible on your website; you need to add the menu to your header file to make this happen.

Open your theme's header.php file and find this code:

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Latest news</a>
        </li>
        <li>
            <a href="#">Featured articles</a>
        </li>
    </ul>
</nav><!-- .main -->

And replace it with this:

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav><!-- .main -->

This adds the navigation menu you've registered at this place in the theme, using the wp_nav_menu() function and specifying 'primary' (the location you specified for your menu when you registered it) as the 'theme-location'.

This is now reflected in my site's navigation menu:

Summary: Menus Aren't Just for the Site Header!

In this tutorial, you've learnt how to register a navigation menu, add items to it and add it to the site header.

It's important to note that menus don't just have to be in the site header. You could add menus in a variety of places, including:

• The sidebar—maybe a section menu for a section of the site or a list of subpages of the current page
• The footer—a menu of your 'small print' pages or the most commonly accessed pages.
• Below the main navigation—maybe a section menu immediately below the main navigation.

You can add menus in more places in your theme in one of three ways.

I've listed them in ascending order of difficulty:

• create extra menus via the 'Menus' admin screen and then use the 'Custom Menu' widget to display them anywhere in your theme where you have a widget area
• create extra menus via the 'Menus' admin screen and then add them to your theme's code as you've done above. In this case you add an additional parameter to the array called by the wp_nav_menu() function, specifying the 'menu' parameter as the name you give each menu you create.
• register multiple menus using the register_nav_menus() function and add them to the relevant place in your theme as above

Why not give it a try?

Resources

• Guide to navigation menus
• The register_nav_menu() function
• The wp_nav_menu() function