Search

How to Add a Footer Navigation Menu in Genesis

Listen to this article
Genesis-Footer-Menu
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.

Navigation-Menu-Footer
Navigation Menu in the Footer

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.

Footer-Menu-Locations-Genesis
Navigation Menu Option for Footer

 

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’.

Create-Footer-Menu-Genesis
Create a New Menu for the Footer

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.

 

Ankita Raikundalia

Ankita Raikundalia

14 Responses

  1. Hi there Ankita, just tried this in my Education theme, the extra option doesn’t show (did all kinds of refreshing) might this be theme specific code somewhere?

    1. Hi Jeff,

      Try adding this:

      add_action( 'after_setup_theme', 'register_footer_menu' );
      function register_footer_menu() {
        register_nav_menu( 'footer', 'Footer Navigation Menu' );
      }
      

      This should work for you.

    1. Hello there, Ankita! The footer menu shows up horizontally now on my blog! This is crazy and amazing at the same time because I didn’t make any change after i left my previous comment. Anyway glad it worked out now!

      Thanks for this great post!

  2. Do I skip the display option if I want the footer to show after the footer widgets and background css? I have a four area widgetized footer (foodie pro), and am looking to put the nav bar above the credits. Also, everytime I add any type of php to my theme I get a white screen, even eith copy and paste. Is there something I need to change in the code?
    Thanks!

    http://marilynstreats.com

    1. Hi Marilyn,
      I’ve tried out the code and it works well. Are you using the code as is, or have you made some changes.

  3. Hi Ankita, just tried this in my Prose theme, the extra option doesn’t show. I tried in functions.php file and Prose’s Custom Code.

    1. Hi dody,

      Try adding this code in functions.php of the theme.

      function register_additional_genesis_menus() {
      register_nav_menu( 'footer' ,
      __( 'Footer Navigation Menu' ));
      }
      add_action( 'after_setup_theme', 'register_additional_genesis_menus' );
      
    1. Hi Rambo,

      Make sure when you’re adding theme support for the tertiary menu, you’ve added ‘genesis-­menus’ and not ‘genesis–­menus’. This could be a problem when you’re copying the code directly.

      Also try adding the below code in functions.php of your theme:

      function register_additional_genesis_menus() {
      register_nav_menu( 'footer' ,
      __( 'Footer Navigation Menu' ));
      }
      add_action( 'after_setup_theme', 'register_additional_genesis_menus' );
      
  4. Hi Ankita,

    Thanks for the this, helps alot. I am however still seeing the menu vertically after I have put the style CSS you have detailed. Any ideas why this is the case?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

How to Make Responsive Tables using CSS without Tag
WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads