The next step involves inserting a line of code into your header.php
file.
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-->
<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-->
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.'theme_location' => 'header-menu'
. This tells WordPress which menu to display – the header-menu
we defined in functions.php
earlier.'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:
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.
To finish our menu, we need to do three things:
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!