Custom Navigation Theme Location in Genesis

In the Genesis Facebook group, a user asked:

This is a question for the Genesis devs here: I’ve noticed that when I create a custom menu location and a custom menu using the wp_nav_menu() function, submenu support isn’t available for those menus. How can I create a custom menu in genesis that has support for submenus?

This members-only tutorial provides the steps to register a custom Custom Menu navigation theme location and display the menu assigned to it in the site header with proper markup and the corresponding skip link in Genesis.

Step 1

Add custom menu theme location.

Edit config/theme-supports.php.

Change

'genesis-after-entry-widget-area' => '',
'genesis-footer-widgets'          => 3,
'genesis-menus'                   => [
	'primary'   => __( 'Header Menu', 'genesis-sample' ),
	'secondary' => __( 'Footer Menu', 'genesis-sample' ),
],

to

'genesis-after-entry-widget-area' => '',
'genesis-footer-widgets'          => 3,
'genesis-menus'                   => [
	'primary'   => __( 'Header Menu', 'genesis-sample' ),
	'secondary' => __( 'Footer Menu', 'genesis-sample' ),
	'custom' => __( 'Custom Menu', 'genesis-sample' ),
],

Step 2

Add the following at the end of functions.php.

add_action( 'genesis_header', 'sk_custom_do_nav', 12 );
/**
 * Echoes the "Custom Navigation" menu.
 */
function sk_custom_do_nav() {

    // Do nothing if menu not supported.
    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
    ) );

}

// Add typical attributes for navigation elements.
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'sk_skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function sk_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}

add_filter( 'genesis_skip_links_output', 'sk_skip_links_output' );
/**
 * Adds skip link for custom navigation.
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */
function sk_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}

Step 3

Let’s add Custom Menu to the list of menus to be combined (having the Primary menu by default) in the mobile menu.

In config/responsive-menus.php change

return [
	'script' => [
		'menuClasses' => [
			'others' => [ '.nav-primary' ],
		],
	],
	'extras' => [
		'media_query_width' => '960px',
	],
];

to

return [
	'script' => [
		'menuClasses' => [
			'combine' => [
				'.nav-primary',
				'.nav-custom',
			],
			'others' => [ '.nav-primary' ],
		],
	],
	'extras' => [
		'media_query_width' => '960px',
	],
];

Step 4

Add the following in child theme’s style.css:

@media only screen and (min-width: 960px) {
    .nav-custom .genesis-nav-menu a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

Step 5

At Appearance > Menus > Manage Locations, assign your desired menu in the Custom Menu location.