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.

footer menu

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' ) );

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:

nav menu

You can also add more nav menus in Genesis.

Related Tutorials

Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More