Multiple Navigation Menu in WordPress Theme Twenty Thirteen

Twenty Thirteen has only one default navigation menu and it is located at the bottom of header section. This is a standard position for navigation menu. Some of the designer require multiple navigation menu in the website so that different menus can be placed at different sections .For example, some users require top header menu and some require footer menu. So such requirements can be met in theme Twenty Thirteen also.

Multiple Navigation Menu in Twenty Thirteen

Starting multiple navigation menu is not a difficult task. We divide the task into two part.

  1. Register particular navigation menu in functions.php and call same at some theme section
  2. Assign css style to particular menu for design and looks

First we create a menu in header in addition to default menu, then we will proceed for creating a similar menu at footer.

Register a menu location to use with navigation menus – Navigation menus are created in the WordPress so we need to register our new menu location so that it can use the navigation menus. WordPress uses register_nav_menu function to register menu location.

register_nav_menu( ‘your-menu-handle’, ‘Your Menu Label’ )

The default navigation menu in Twenty Thirteen is registered in functions.php file. Open the functions.php file in Twenty Thirteen folder and look for the following code.

// This theme uses wp_nav_menu() in one location.
    register_nav_menu( ‘primary’, __( ‘Navigation Menu’, ‘twentythirteen’ ) );    
Now we need to register one more navigation menu.We select variables as

  • your-menu-handle : secondary-header
  • Your Menu Label : Top Header Menu

So we put one more register function in addition to old function.

// This theme uses wp_nav_menu() in one location.
    register_nav_menu( ‘primary’, __( ‘Navigation Menu’, ‘twentythirteen’ ) );
    register_nav_menu( ‘secondary-header’, __( ‘Top Header Menu’, ‘twentythirteen’ ) );
  1. Now call this new navigation menu in theme. We want to place this menu at top header position so open header.php file.

Look at the following code section in header.php file

<header id=”masthead” class=”site-header” role=”banner”>
            <a class=”home-link” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
                <h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
                <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

            </a>

 

            <div id=”navbar” class=”navbar”>

                <nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>

                    <h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>

                    <a class=”screen-reader-text skip-link” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentythirteen’ ); ?>”><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?></a>

                    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

                    <?php get_search_form(); ?>

                </nav><!– #site-navigation –>

            </div><!– #navbar –>

        </header><!– #masthead –>

This header section has one main navigation menu which changes in design for smaller display. Now we call another navigation menu which we have registered in functions.php

How to call navigation menu in header

wp_nav_menu is the function for calling a particular navigation menu. You can refer this function at WordPress codex page. This function has several variable but we will define only three necessary variable.

  • theme_location : secondary-header
  • menu_class : nav-menu-header
  • depth :1

This will call secondary-header which is registered in functions.php. menu_class is the class that is applied to the ul element in nav and depth is the levels of the hierarchy required in the navigation menu. We have opted to keep single level in navigation, no sub levels, that’s why depth is 1.

Menu class for single level – We just placed simple style for header menu. Users can customize css according to requirement. This css class need to be included in style.css

ul.nav-menu-header,
div.nav-menu-header > ul {
    padding: 0 10px 0 0;
    clear: both;

    margin: 0 auto;

    max-width: 1080px;

    min-height: 35px;

    position: relative;

    float: right;

}

 

.nav-menu-header li {

    display: inline-block;

    position: relative;

}

 

.nav-menu-header li a {

    color: #141412;

    display: block;

    font-size: 15px;

    line-height: 1;

    padding: 10px 10px;

    text-decoration: none;

}

 

.nav-menu-header li:hover > a,

.nav-menu-header li a:hover {

    background-color: #FFFFFF;

    color: #F00;

}

Now we need to place the navigation function at the right place of theme. Here as we planned, the navigation call function will be placed at top of header. The function will look like this.
<div >
    <nav>
        <?php wp_nav_menu( array( ‘theme_location’ => ‘secondary-header’,’depth’ =>’1′,’menu_class’ => ‘nav-menu-header’ ) ); ?>    </nav><!– #site-navigation –>

</div><!– #navbar –>

Place the navigation call function as shown above at the top of header section in header.php.Take care that necessary css class is included in style.css.Look at the header section code.
<header id=”masthead” class=”site-header” role=”banner”>
    <div >
    <nav>        <?php wp_nav_menu( array( ‘theme_location’ => ‘secondary-header’,’depth’ =>’1′,’menu_class’ => ‘nav-menu-header’ ) ); ?>

    </nav><!– #top header navigation –>

</div><!– #top header navigation –>

<a class=”home-link” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>

                <h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>

                <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

            </a>

            <div id=”navbar” class=”navbar”>

                <nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>

                    <h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>

                    <a class=”screen-reader-text skip-link” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentythirteen’ ); ?>”><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?></a>

                    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

                    <?php get_search_form(); ?>

                </nav><!– #site-navigation –>

            </div><!– #navbar –>

        </header><!– #masthead –>

So we can conclude here.

  • Register the navigation menu in functions.php
  • Call the navigation menu in theme
  • Create proper css style for navigation menu and place that in style.css

As we discussed here for creating a header menu, same can be applied for footer menu. It’s just like adding one more menu.

I hope, the discussion will help to create something better.

7 thoughts on “Multiple Navigation Menu in WordPress Theme Twenty Thirteen”

  1. Thanks for this tutorial and code. One little problem: users need to first paste the code into a text editor like Notepad to convert the back ticks to single quotation marks. I got some malformed DIVs and server errors because I pasted the code straight into a PHP editor.

  2. your post is helpfull but need to know how does the top menu will display only the particular pages that i added to top menu? It is displaying all the pages that i made.

  3. Hello!

    Thank you for the guide. I followed placed all the code in the editor, but I just don’t see the secondary menu. Is there any extra-step?

    Thanks!

Comments are closed.