2 Ways To Add New Navigation Menus In Any WordPress Theme

In this tutorial, we’ll llook at adding an extra nav menu using 2 methods.

1. From your child themes functions.php file
2. And also adding some of the code directly to a template file. In this case, the footer.php file.

Adding New Menus in Your Functions File

Simply copy this PHP code from the view raw link and paste it at the end of your child themes functions.php using a text editor like Notepad++

Here’s what it looks like in the Twenty Thirteen default theme.

The above code uses the wp_footer hook which you can change to any other WordPress hook or use a theme specific hook.

Change the container class to match your themes class.

To use the same styling as one of your themes existing menus, wrap the function in the existing class or classes it already uses:

add_action( 'wp_footer', 'add_third_nav' ); 
function add_third_nav() {
echo'

<nav id="site-navigation" class="navigation main-navigation" role="navigation">';
wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'nav-menu' ) );
echo'</nav>

';
}

Otherwise, use a unique class and style differently.

All the code in this post has been tested on the Twenty Thirteen default theme for WordPress.

Adding New Menus in Template Files

Add this code to your child themes functions.php file:

function register_additional_menu() {

register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu' ));
}
add_action( 'init', 'register_additional_menu' );

To hard code your nav menu into a template, simply copy and paste this code into your header.php, footer.php or any other template file.

<?php wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'nav-menu' ) ); ?>

If you want to style your extra menu using the same classes as an existing menu in your theme, you can:

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

<!-- #site-navigation -->

And here’s the result:

You can also add more nav menus in Genesis.

Related Tutorials

• Add 3rd Nav Menu To Genesis & Combine With Mobile Menu
• Add Nav Menu Shortcode In Content Area