Adding Navigation to Header

We’ve begun by creating an html template that we are going to turn into a simple theme. What we want to do is turn our html navigation into a wordpress navigation menu.

Our simple html theme has this code for the header:

<div class="container">       
<h1><a href="index.html">Advanced WordPress Theme</a>          <small>Another WordPress Theme</small>
<div class="h_right">          
<input type="text" placeholder="Search...">          
<nav class="nav main-nav">    
<div class="container">       
<li><a href="index.html">Home</a></li>          
<li><a href="about.html">About</a></li>          
<li><a href="#">Services</a></li>       

We want to remove the hardcoded navigation list and replace it with a wordpress menu. In order to do that, replace the list with this:


That block of code has two parts. The first establishes that section as the ‘primary’ location for a menu. The second actually inserts the assigned navigation menu.

The next thing we need to do is add the menus to the functions.php file, so that menus now appear under “appearance” in the admin, and can be built, administered, and assigned locations. To do that, add this code snippet to the theme’s functions.php file: