Navigation - ar-to/WordPress-Theme GitHub Wiki

A nav menu can normally be added using markup as below but to use the Wordpress menu functionality to customize what link we use we need to use template tags and functions. Follow the developer.wordpress, codex, and the wp_nav_menu() function.

<nav>
<ul>
<li></li>
</ul>
</nav>

Begin by adding the following code to the header.php

<?php wp_nav_menu(); ?>

It will add a unordered list of the pages in the admin area with bullet form and allined left and vertical. Now we need to add the menu option inside Appearances within the admin. Add

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

Now a new menu can be created but it will not change the menu pages from above. To add a menu to a template and customize it we add an array as the argument to wp_nav_menu().

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

To style follow wp_nav_menu(), wpbeginner. With wp_nav_menu() its possible to add custom classes and ids for the menu. Another option is to wrap the php code inside a <nav> tag. Then use developer tools inside the browser.

<nav class="site-nav">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>

Because I used Bootstrap it will look like this to make it responsive

<div class="container">
  <div class="row">
    <nav class="site-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    </nav>
  </div>
</div>