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.

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.

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

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

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)

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.

Thank you, Ankita! This worked well on my site. But I do have one question – even after adding css code, my menu still is showing vertically, not horizontally. Could you please help? my site is http://www.thekeyponderer.com.

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!

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!