• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials Navigation Menus

Add Third or Footer Navigation Menu to Genesis Child Theme

April 28, 2015 Updated on November 29, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

Most Genesis child themes come with two menu locations – Primary Navigation Menu and Secondary Navigation Menu. They also have a Header Right widget area for a custom menu widget. In some child themes, the Secondary Navigation Menu has been moved to the footer area.

third footer menu added to genesis child theme

If you would like a new third menu location, it’s easy to add. Let’s assume you need both your Primary and Secondary Navigation Menus at the top of your website pages, and that you want to add the third menu, as a footer menu. This WordPress tutorial shows you how to add a footer menu to your Genesis child theme just above the footer widget area.

Add Theme Support for New Footer Menu

All the code for this tutorial is in the GitHub Gist.

The first thing that you need to do is to decide on a name for the footer menu location, and the name you want to appear in WordPress Admin under Appearance > Menus.

You can call your menu – ‘footer’ with a location of ‘Footer Naviagation Menu’.
It will look like this, once you add all the code below.

third footer menu added to genesis child theme

First you need to add theme support for the new menu. But you can’t just add the new menu; you will need to list all the menus you want to have available for your child theme.

So open a text editor to edit your child theme functions.php file. You can add this code at the end of the file.

<?php 
// Remove the line above when adding to functions.php

// Add theme support for new menu
// Add Footer Menu; Keep Primary and Secondary Menus
add_theme_support ( 'genesis-menus' , array ( 
	'primary'   => __( 'Primary Navigation Menu', 'genesis' ),
	'secondary' => __( 'Secondary Navigation Menu', 'genesis' ),
        'footer'    => __( 'Footer Navigation Menu', 'genesis' )
	) );

The code keeps the primary and secondary menus, and adds the footer menu.

This line adds the text ‘Footer Navigation Menu’ to a textdomain file to be translated.
__( 'Footer Navigation Menu', 'genesis' )
You can add your child theme textdomain, if there is one, instead of ‘genesis’.

Add Footer Menu to Theme Location

Next you want to add the new menu location just above the footer-widget area. You also want to add the markup that Genesis uses in the other menus, so there can be consistent HTML and styling. Add the following to your functions.php just below the first code section.

<?php 
// Remove the line above when adding to functions.php

// Add attributes to markup
// Add footer menu just above footer widget area
add_action( 'genesis_before_footer', 'amethyst_footer_menu', 9 );
function amethyst_footer_menu() {

	genesis_nav_menu( array(
		'theme_location' => 'footer',
		'container'       => 'div',
		'container_class' => 'wrap',
		'menu_class'     => 'menu genesis-nav-menu menu-footer',
		'depth'           => 1
	) );

}

Explanation of the Code

First you’re adding the new menu with the ‘genesis_before_footer’ hook. The priority code of 9 adds it before the footer widgets.

  • theme location adds the < nav class="footer" > to the theme
  • container and container_class of ‘div’ and ‘wrap’ add a wrap container of < div class="wrap" >
  • menu_class adds genesis-nav-menu and other classes to be consistent with other menus
  • depth of 1 allows the menu to have only one level; use 0, if you want a drop down

So there you have your new menu, ready to add specific styles. You can make the footer menu dark, like the primary menu for the Genesis Sample theme, with the following CSS. Add the CSS to your styles.css or a custom CSS editor.

.nav-footer {
     background-color: #333;
}

.nav-footer .genesis-nav-menu a {
     color: #fff;
}

.nav-footer .genesis-nav-menu a:hover {
	color: #e5554e;
}

If you want to add a responsive menu icon for small screen sizes, like the menus at the top, you’ll need to edit the responsive menu file.

And for bonus points, you can also add the following to your functions.php to add attributes to your new footer navigation markup. You can read more about genesis markup here.

<?php 
// Remove the line above when adding to functions.php

// Add custom attributes to footer navigation
add_filter( 'genesis_attr_nav-footer', 'custom_add_nav_footer_attr' );
function custom_add_nav_footer_attr( $attributes ){

    $attributes['role'] = 'navigation';
    $attributes['itemscope'] = 'itemscope';
    $attributes['itemtype'] = 'http://schema.org/SiteNavigationElement';
    
    return $attributes;
        
}
genesis footer menu markup with attributes

You can see that the markup is the same nav-footer as for nav-primary.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marissa says

    Hi there, how would I make this horizontal instead of vertical?

    Thanks!

    Reply
    • Marcy Diaz says

      This added menu is horizontal, just like all the other Genesis menus.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework