How to Add Footer Navigation in Genesis Framework (HTML5)

By default, Genesis Framework comes with 2 navigations, referred as primary navigation and secondary navigation.

In this tutorial we’ll show you how to add a footer navigation or menu to your Genesis child theme. Please note that since this is theme-specific feature, the code below should go into your child theme’s functions.php file. This code assumed that you’re using HTML5 version of Genesis Framework and therefore we’ve also included the schema.org markup to be consistent with other elements in Genesis Framework. If you’re new to Schema.org, we’d suggest to read the article on Yoast.com on the importance of Schema.org.

<?php

//* Register Footer Menu in Genesis Framework (HTML5)

function afn_add_footer_menu () {
    echo '<nav class="nav-footer" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">'; 
    wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_id' => 'nav-footer' , 'menu_class' => 'menu genesis-nav-menu      menu-footer', 'theme_location' => 'tertiary', 'depth' => '1' ) ); 
    echo '</nav>';
}
add_action('genesis_before_footer', 'afn_add_footer_menu');

//* Add support for footer menu
add_theme_support ( 'genesis-menus' , array ( 'primary' => 'Primary Navigation Menu' , 'secondary' => 'Secondary Navigation Menu' ,'nav-footer' => 'Footer Navigation Menu' ) );

The first part of the code registers the footer navigation. We intentionally set the depth parameter to 1 to make sure the navigation does not display any dropdown. Since we hook this in genesis_before_footer, the navigation will be displayed before footer credit and after widgetized footer section. Using Genesis Framework, you’re lucky since you can easily reposition it to any desired location using the right Genesis hook.

The second part of the code basically adds the footer nav to the array. Once you have successfully add the code, you may see this from your menu settings page.

The footer navigation should looks good by default. However, if you’d like to customize it even further, you may target it using .menu-footer class. Also, don’t forget to make use of great tool like Firebug to help you easily inspect any of element of your site.