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.
14 Responses
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?
Hi Jeff,
Try adding this:
This should work for you.
great@ankita
Thanks 🙂
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.
Thanks, again!
Arun
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!
Hi Arun,
Thanks for letting me know. Glad it worked!
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
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.
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.
Hi dody,
Try adding this code in functions.php of the theme.
Ankita, after putting the code on functions.php theextra menu doesn’t show on my Menu. #help
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:
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?