Creating a WordPress Theme from Static HTML: Adding Navigation

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:

1 2 3 4 5 6

<?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!

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.

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.

Add the code below to header.php:-

<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 -->