2

As a noob my target is to provide a secondary menu for my blog-page (I do have a static home-page) and I wonder what is the best way to place the second navigation in the template files.

With my beginner PHP skills and after investigation of tutorials, two solutions seem to be working for me:

A) Add a conditional tag in the one and only main header.php:

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

<!-- my Secondary Menu solution one -->
<?php if (is_home()) { ?>
<nav>
    <?php wp_nav_menu(array('theme_location' => 'menu-2', 'menu_id' => 'menu-2')); ?>
</nav>
<?php } ?>

B) Make a new file which is called e.g. header-home.php which is a copy of the main header.php and integrate it into the blog template.

header-home.php:

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

<!-- my Secondary Menu Solution 2 -->
<nav>
<?php 
    wp_nav_menu(array('theme_location' => 'menu-2', 'menu_id' => 'menu-2'));
?>
</nav>

Than I would have to change the template file (in my case index.php) and start it with this condition:

if( is_home() ) {
    get_header('home'); 

} else {
    get_header();
}

Here are my questions:

  1. Are there better solutions to achive my target than the two approaches above?

  2. If not, then which of the two solutions would you prefer and why?

1

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.

  • Dear Fayaz, thank you very much for your wonderful and educational reply. I will follow your way. Special thanks for the clear and understandable way you are explaining, which gives me the possibility to follow and don't only copy paste code. GREAT!!! – Friedrich Siever Mar 2 '17 at 16:29
  • I'm glad it helped you :) – Fayaz Mar 2 '17 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.