Time for action – adding menus to our theme's header.php file

The next step involves inserting a line of code into your header.php file.

  1. Open the header.php file and find the following code:
    <nav id="mainNav" class="grd-vt-tertiary shdw-centered">
  <h2 class="screen-reader-text">Main Navigation:</h2>
    <ul class="sfTab">
      <li class="current_page_item"><a href="#">The Zine</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</nav><!--//top_navlist-->
  2. Replace that code with the following:
    <nav id="mainNav" class="grd-vt-tertiary shdw-centered">
  <h2 class="screen-reader-text">Main Navigation:</h2>
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'sfTab' ) ); ?>
</nav><!--//top_navlist-->
  3. Save the file and view the site in your browser to see what happens.

What just happened?

We added the wp_nav_menu tag to our header file to display the menu we'd registered in the correct place. Let's have a closer look:

  • wp_nav_menu is the tag which calls and displays a navigation menu.
  • The first parameter we set is 'theme_location' => 'header-menu'. This tells WordPress which menu to display – the header-menu we defined in functions.php earlier.
  • The second parameter we set is 'container_class' => 'sfTab'. This adds a containing <div> with the class .sfTab to the menu, which replaces the <ul class="sfTab"> code we had originally.

Now let's have a look at our site with its new menu:

What just happened?

The menu is there but it isn't displaying what we want it to. If you don't set up your own menu, WordPress just displays all the pages on the site in the order they were added (much as it used to with the wp_page_menu tag before Version 3.0). Our site just includes an About page which we set up in Chapter 3, Coding it Up. So we need to add some more pages and set up our menu.

Setting up our menu

To finish our menu, we need to do three things:

  • Create some new pages, a custom link, and a category which the menu will link to
  • Define our Reading settings so WordPress knows which page our blog listings are on
  • Add a menu linking to the pages in the WordPress Menus screen

Setting up the new pages and category is simple so we won't show you how to do that (if you're stuck, look at http://codex.wordpress.org/Pages and http://codex.wordpress.org/Posts_Categories_Screen). We'll move straight on to configuring our Reading settings and then creating our menu. So let's do it!

Defining our Reading settings

The first step is to ensure the site's Reading settings are set up correctly so that we can add the content we need to our menu.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset