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

nav menu

You can also add more nav menus in Genesis.

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or loaded questions. Members get answers to unlimited questions.