Add Third or Footer Navigation Menu to Genesis Child Theme

Most Genesis child themes come with two menu locations – Primary Navigation Menu and Secondary Navigation Menu. They also have a Header Right widget area for a custom menu widget. In some child themes, the Secondary Navigation Menu has been moved to the footer area.

If you would like a new third menu location, it’s easy to add. Let’s assume you need both your Primary and Secondary Navigation Menus at the top of your website pages, and that you want to add the third menu, as a footer menu. This WordPress tutorial shows you how to add a footer menu to your Genesis child theme just above the footer widget area.

Add Theme Support for New Footer Menu

All the code for this tutorial is in the GitHub Gist.

The first thing that you need to do is to decide on a name for the footer menu location, and the name you want to appear in WordPress Admin under Appearance > Menus.

You can call your menu – ‘footer’ with a location of ‘Footer Naviagation Menu’.
It will look like this, once you add all the code below.

First you need to add theme support for the new menu. But you can’t just add the new menu; you will need to list all the menus you want to have available for your child theme.

So open a text editor to edit your child theme functions.php file. You can add this code at the end of the file.

<?php 
// Remove the line above when adding to functions.php

// Add theme support for new menu
// Add Footer Menu; Keep Primary and Secondary Menus
add_theme_support ( 'genesis-menus' , array ( 
	'primary'   => __( 'Primary Navigation Menu', 'genesis' ),
	'secondary' => __( 'Secondary Navigation Menu', 'genesis' ),
        'footer'    => __( 'Footer Navigation Menu', 'genesis' )
	) );

The code keeps the primary and secondary menus, and adds the footer menu.

This line adds the text ‘Footer Navigation Menu’ to a textdomain file to be translated.
__( 'Footer Navigation Menu', 'genesis' )
You can add your child theme textdomain, if there is one, instead of ‘genesis’.

Add Footer Menu to Theme Location

Next you want to add the new menu location just above the footer-widget area. You also want to add the markup that Genesis uses in the other menus, so there can be consistent HTML and styling. Add the following to your functions.php just below the first code section.

<?php 
// Remove the line above when adding to functions.php

// Add attributes to markup
// Add footer menu just above footer widget area
add_action( 'genesis_before_footer', 'amethyst_footer_menu', 9 );
function amethyst_footer_menu() {

	genesis_nav_menu( array(
		'theme_location' => 'footer',
		'container'       => 'div',
		'container_class' => 'wrap',
		'menu_class'     => 'menu genesis-nav-menu menu-footer',
		'depth'           => 1
	) );

}

Explanation of the Code

First you’re adding the new menu with the ‘genesis_before_footer’ hook. The priority code of 9 adds it before the footer widgets.

• theme location adds the < nav class="footer" > to the theme
• container and container_class of ‘div’ and ‘wrap’ add a wrap container of < div class="wrap" >
• menu_class adds genesis-nav-menu and other classes to be consistent with other menus
• depth of 1 allows the menu to have only one level; use 0, if you want a drop down

So there you have your new menu, ready to add specific styles. You can make the footer menu dark, like the primary menu for the Genesis Sample theme, with the following CSS. Add the CSS to your styles.css or a custom CSS editor.

.nav-footer {
     background-color: #333;
}

.nav-footer .genesis-nav-menu a {
     color: #fff;
}

.nav-footer .genesis-nav-menu a:hover {
	color: #e5554e;
}

If you want to add a responsive menu icon for small screen sizes, like the menus at the top, you’ll need to edit the responsive menu file.

And for bonus points, you can also add the following to your functions.php to add attributes to your new footer navigation markup. You can read more about genesis markup here.

<?php 
// Remove the line above when adding to functions.php

// Add custom attributes to footer navigation
add_filter( 'genesis_attr_nav-footer', 'custom_add_nav_footer_attr' );
function custom_add_nav_footer_attr( $attributes ){

    $attributes['role'] = 'navigation';
    $attributes['itemscope'] = 'itemscope';
    $attributes['itemtype'] = 'http://schema.org/SiteNavigationElement';
    
    return $attributes;
        
}

You can see that the markup is the same nav-footer as for nav-primary.