Adding a third menu to Genesis


If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

Genesis comes with two menus as standard in its configuration.  Additional menus are often added using custom menu widgets into sidebars, often the ‘Header Right’ sidebar.

However sometime it is desirable to add an extra menu (or more) into the template.

This is fairly simple to achieve using a combination of WordPress standard functions and Genesis hooks.

In this example  I am adding a menu after the footer, this would be added to the child theme’s functions.php

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

add_action( 'genesis_after_footer', 'add_third_nav_genesis' ); 
function add_third_nav_genesis() {
   genesis_nav_menu( array( 'theme_location' => 'third-menu') );
}

The code broken down

add_action( 'init', 'register_additional_menu' );

This calls the named function(it can be anything unique), register_additional-menu() on the WordPress hook ‘init’ -> see WordPress hook http://codex.wordpress.org/Plugin_API/Action_Reference

function register_additional_menu() {  
  register_nav_menu( 'third-menu' ,__( 'Third Navigation Menu', 'mytheme' ));    
}

The function calls the WordPress standard function to register a navigation menu, see http://codex.wordpress.org/Function_Reference/register_nav_menus

the double underscore function is to allow for translation files specific to the theme, see http://codex.wordpress.org/Function_Reference/_2  and generally is the way to deal with hardcoded display strings in WordPress code

add_action( 'genesis_after_footer', 'add_third_nav_genesis' );

This calls the named function (it can be anything unique), add_third_nav_genesis(), on the Genesis hook ‘genesis_after_footer’.  It can be hooked on any Genesis hook, its just I wanted it to be after the footer.  There a plenty of guides on Genesis hooks, the official one is a bit difficult to fathom, but I find the plugin Genesis Visual Hook Guide https://wordpress.org/plugins/genesis-visual-hook-guide/ really useful as you can see the hooks in context of your own designs

function add_third_nav_genesis() {
   genesis_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'genesis-nav-menu' ) );
}

And this function calls the Genesis function to output the nav menu. Using the Genesis function, rather than the WordPress equivalent, wp_nav_menu() will output the correct markup without having to work that out, including structural wraps. See the next bit.

If your theme is full width it is likely to have structural wraps, this stops some on the site going ‘full width’ and effectively contained, i.e. full with header & footer but content & nav menus constrained in width.  If so you will have something like the following in your functions.php

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	'site-inner',
	'footer-widgets',
	'footer',
) );

In which case, you may want to constrain your new menu so it needs to be added to the structural warp array as ‘menu-third-menu’  , not you have to prefix your menu name with menu- e.g.

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	'site-inner',
	'footer-widgets',
	'footer',
	'menu-third-menu',
) );

 

 

,

Leave a Reply

Your email address will not be published.