Add New Menu to Custom Page Template in Genesis

This tutorial shows you how to add an additional nav menu you can use in a custom page template in any Genesis child theme.

There’s 3 steps involved.

1. Add theme support for your additional menu
2. Hook the new menu in your template
3. Style the new menu

You’ll also want to remove any existing menus from the template which can do easily using 1 or 2 lines of code in the template.

Step 1

Add the following PHP code to the end of your child themes functions file using a code editor:

add_theme_support ( 'genesis-menus' , array ( 'primary' => 'Primary Navigation Menu', 'secondary' => 'Secondary Navigation Menu', 'custom-template' => 'Custom Template Menu' ) );

The above code creates a new menu named Custom Template Menu and uses the custom-template menu location.

Here’s what it looks like when you go to Menu’s in your Dashboard:

Step 2

Next step is to hook the new menu into your template which you can do simply by pasting the following PHP code into your template using a code editor:

//* Remove navigation
remove_action( 'genesis_header', 'genesis_do_nav', 12 );
remove_action( 'genesis_header', 'genesis_do_subnav', 5 );

//* Hook menu in header
add_action( 'genesis_header', 'custom_menu', 7 );
function custom_menu() {
printf( '<nav %s>', genesis_attr( 'custom-menu' ) );
wp_nav_menu( array(
'theme_location' => 'custom-template',
'container'      => false,
'depth'          => 1,
'fallback_cb'    => false,
'menu_class'     => 'genesis-nav-menu',	
) );
	
echo '</nav>';
}

The above PHP adds the custom-menu class which you can use in your style.css file to style your menu if needed.

The code also included 2 remove action functions to remove the existing primary and secondary menus from the template.

You can also change the position your new menu outputs in your template by changing the hook in the above code from genesis_header to any other hook position.

Step 3

Add the following sample CSS to the end of your child themes style.css file, before the Media Queries and modify to your own styling preferences:

.custom-menu .genesis-nav-menu {
	padding: 20px 0;
}

.custom-menu .genesis-nav-menu a {
	border: none;
	font-weight: 800;
	letter-spacing: 3px;
	margin: 0 20px;
	padding: 0;
}

Related Tutorials

• Add Nav Menu To WooCommerce Pages
• Adding More Nav Menu’s in Genesis