How to Add a Footer Navigation Menu in Genesis

Just because Google tells you to give a lot of importance to what is above the fold, doesn’t mean you should just ignore the rest of your webpage. As a web developer, I know that a site’s footer is an important area of real estate that you should leverage. You see, for many visitors, the footer is the go to place for quick links to ‘About Us’ page, ‘Contact Us’ page, etc.  By adding a navigation menu in the footer, you can improve a user’s experience on your site.

Wondering how to add the menu now? Not to worry. This article will explain to you just that :D.

Create a Footer Navigation Menu in Genesis

The Genesis framework by default has two navigation menus: the primary navigation, and the secondary navigation. A navigation menu in the footer, will be an additional (tertiary) navigation option your theme will need to support.

Add Support for Footer Navigation

You need to start by declaring theme support for a menu in the footer. This can be done by adding the following code in our theme’s functions.php file.

// add theme support for a tertiary navigation menu
add_theme_support ( 'genesis-­menus' , array (
'primary' => 'Primary Navigation Menu' ,
'secondary' => 'Secondary Navigation Menu' ,
'footer' => 'Footer Navigation Menu'
) );

Once you do this, you will notice an extra option in your menu settings.

Create a Menu for the Footer

This step should be simple. As usual, you will need to create a new menu from the Menu options, and set it as the ‘Footer Navigation Menu’.

But wait. We are not done yet. To display the footer navigation above the rest of the content in the Genesis footer, add a function which displays the navigation menu on the ‘genesis_before_footer’ hook. Add the below code, in functions.php, to achieve the same.

// display the Footer Navigation
add_action('genesis_before_footer', 'wdm_add_footer_menu');
function wdm_add_footer_menu()
{
    wp_nav_menu(array(
     'sort_column' => 'menu_order',
     'container_id' => 'footer' ,
     'menu_class' => 'menu-tertiary',
     'theme_location' => 'footer',
     'depth' => 1,
     'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>'
      ) );
}

The items will be displayed in a vertical list. To display it as a horizontal menu, you can use the below CSS (add it to style.css), and add additional styling, according to your preference. (If you wanted to add icons, you’ll want to read: How to Add Images or Icons to Menu Items)

.menu-tertiary {
    padding: 10px;
    text-align: center;
}

.menu-tertiary > li {
   display: inline-block;
   padding: 0 15px;
}

So, go ahead and try this out. Since the primary navigation has links to the most important pages on your website, use the footer to link to content deeper within the site. And yes, do let me know if this article helped you, or if you have any suggestions for me, using the comment section below.

Worried your Footer Navigation will upstage your Primary Menu? Try adding a Mega-Menu in your primary navigation.