• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Related Tutorials

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

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.