Second Navigation inside header

Best is always subjective, however, I’d put it in the following manner to have better control and better arrangement of my templates:

A structure to have granular control:

First, I’d create a new folder, e.g. template-parts in my theme and then inside that, another folder e.g. navigation (to have separate template parts in different folders).

Then, in <my-theme>/template-parts/navigation/ folder I’ll create three files, e.g.

  1. nav.php: this will act as the main navigation template file. It’ll contain conditionals and common HTML wrapper markup for both the menus.

  2. nav-one.php: this will contain the markup & CODE specific to the primary navigation menu (menu-one).

  3. nav-two.php: this will contain the markup and CODE specific to the secondary nav menu (menu-two).

These files will have content like the following:

nav.php file:

<?php if ( has_nav_menu( 'one' ) ) : ?>
    <div class="navigation-one">
        <div class="wrap">
            <?php get_template_part( 'template-parts/navigation/nav', 'one' ); ?>
        </div><!-- .wrap -->
    </div><!-- .navigation-one -->
<?php endif; ?>

<?php if ( has_nav_menu( 'two' ) && is_home() ) : ?>
    <div class="navigation-two">
        <div class="wrap">
            <?php get_template_part( 'template-parts/navigation/nav', 'two' ); ?>
        </div><!-- .wrap -->
    </div><!-- .navigation-two -->
<?php endif; ?>

nav-one.php file:

<nav id="site-navigation" class="main-navigation" role="navigation">
    <?php wp_nav_menu(array('theme_location' => 'one', 'menu_id' => 'menu-one')); ?>
</nav><!-- #site-navigation -->

nav-two.php file:

<nav>
<?php 
    wp_nav_menu(array('theme_location' => 'two', 'menu_id' => 'menu-two'));
?>
</nav><!-- #secondary-navigation -->

Finally, I’d simply put this in my header.php file:

get_template_part( 'template-parts/navigation/nav' );

Why?

  1. You’ll have a simple one line template call from header.php file & you won’t need to make future changes twice in two different header.php files only for having different menus.

  2. From nav.php, you’ll be able to control all different conditions and general HTML wrapper markups for all different top menus. For a different secondary top menu for another page, you won’t need to change header.php file any longer.

  3. From nav-one.php, nav-two.php (add as many as you need), you’ll control CODE and markup for that Manu only. You don’t have to worry about other menus or their markups or conditions. If you need a new menu just add it in e.g. nav-three.php file and then add necessary condition for it in nav.php if you want to add it in the top menu.

  4. This way you’ll also be able to use the same file (menu) in another location. For example, you want nav menu one to be in footer as well. Then in footer, you’ll only have to call: get_template_part( 'template-parts/navigation/nav', 'one' );

    That’s it, you’ll not need to write the same CODE twice.

Once you have this setup, you’ll have far better granular control over your menu system.

Note: WordPress default Twenty Seventeen theme uses a similar structure.

tech