HowTo: Add New Menus to Genesis Themes

Adding additional navigation menus to Genesis themes is easy. This method creates custom navigation menus that you can customize as you would any other WordPress custom menu by visiting Appearance > Menus.

We use a two-step method:

  1. Create a custom nav file
  2. Register the custom nav file in your child theme’s functions.php file

By repeating the method you can create as many custom menu navbars to Genesis child themes as you want.

Step One: Create a Custom Nav File

This creates a menu called customnavone with the unique ID of customnavone and unique class of customnavone in the theme location customnavone. Remember that pattern. Additional custom menus will need to use labels other than customnavone.

  1. Open your web host’s file manager or use an FTP client to navigate to your Genesis child theme’s root folder under /wp-content/themes/.
  2. Create a file called customnavone.php in your child theme’s root directory.
  3. Copy and paste this code into customnavone.php
  4. Save customnavone.php

For example, if you are using the Landscape theme:

  1. Navigate to /wp-content/themes/landscape/
  2. Create a file called customnavone.php in /wp-content/themes/landscape/customnavone.php
  3. Copy the code into customnavone.php.

Note that if you create more custom navbars you will need to create a new custom nav file for each additional menu. for each additional menu, change the number “one” in both the file name and the code to another successive number e.g two.

For example,

If you create a second custom menu, call the file customnavtwo.php, use the PHP code

That’s step one done.

Additional array elements for WordPress custom nav menus are listed in the WordPress Codex.

Step Two: Add the Custom Nav Menu with the Theme

This is a two part process:

  1. Remove and replace Genesis support for custom menus
  2. Add/Register your new menu

Part One: Remove and Replace Genesis Menus

In the Genesis child theme’s root directory, open the child theme’s functions.php file and put this code at the bottom of it:

That code removes the theme’s already registered menus then registers the menus again but this time registers the new custom menu too. Failure to unregister the existing menus can cause the theme to not load.

If your child theme already has more than the Genesis default of two menus, look through the child theme’s functions.php file for the line that begins add_theme_support ( ‘genesis-menus’…) and register your own additional custom menu through that line. No need to de-register the menus in this case.

Part Two: Add/Register the New Custom Menu

There are lots of places in the Genesis theme where additional menus can be easily added, for example:

  • Before the header
  • After the header
  • Before the content
  • After the content
  • Before the footer
  • After the footer

Each custom menu can only be added to the site once. If you need the same menu to display in multiple locations within your site you will need to create another custom navbar and duplicate the menu in the WordPress settings under Appearance > Menus. That means you would need to repeat Step One but call the file, classes and ID something like customnavtwo.

Here is how to add the customnavone menu to any one of the above locations (before or after the header, content or footer).

Save functions.php once any of the following code snippets has been added to the bottom of functions.php then clear your site cache (if any) and reload the page. You might need to clear your browser cache too.

When adding additional custom menus, remember to change every occurrence of customnavone in the below code snippets to whatever label you gave your menu e.g customnavtwo or customnavthree.

Add a new menu before the header

Put this code at the bottom of the child theme’s functions.php file:

Add a new menu after the header

Put this code at the bottom of the child theme’s functions.php file:

Add a new menu before the content

This places a menu before the post or page content. It will only show when a post or page is visible.

Put this code at the bottom of the child theme’s functions.php file:

Add a new menu after the content

Put this code at the bottom of the child theme’s functions.php file:

Add a new menu before the footer

Put this code at the bottom of the child theme’s functions.php file:

Add a new menu after the footer

Put this code at the bottom of the child theme’s functions.php file:

Style the New Menu

The menu will already have most of the style associated with your theme’s default menus. However, you can add additional styling attributes by using CSS with the menu’s unique class and ID attributes. In the case of customnavone the class is customnavone and the ID is customnavone.

Additional CSS can be added to the theme in the theme settings panel  where it says “Enter scripts or code you would like output to wp_header():”. For example:

What Next?

Share this guide on Facebook and Twitter then go play with your new menu.

Comments

  1. says

    Thank you, this was helpful. I used it on this site here: http://cnysextremecouponing.com/ and I modified the names in the simple menus plugin so that it only appears under the sub-pages of ‘find your store’. Very helpful, thanks again.

  2. Peter Luit says

    I have a landing page with only a full featured image. Is there a way to display the menu just above the bottom of the featured image?

  3. Tulio K. Cardozo says

    Thanks for this tutorial! Perfectly timed for a project that I was just about to wrap up. I really appreciate what you’ve shared with us.

  4. ClearScope says

    This is so great, exactly what I needed. Thank you! One thing I still need to do, however – is it possible to hide the original menus only for specific templates? I was able to add the third menu to the custom template by doing:

    add_action(‘genesis_after_header’, ‘customnavone’);
    function customnavone() {
    if (is_page_template(‘template-test.php’))
    require(CHILD_DIR.’/customnavone.php’);
    }

    And I’ve tried removing the original 2 menus from the custom template by doing:

    if (is_page_template(‘template-test.php’))
    remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    remove_action( ‘genesis_before_header’, ‘genesis_do_subnav’ );

    But it’s not working. Any tips you can give for this would be so greatly appreciated. Basically, I need to have a set of pages that have this new 3rd navigation menu on them, without having the original 2 navigation menus. I know I could hide them with CSS, but it would be so much better to get this working properly.

    Thank you again!!!

    • says

      For the second question, try genesis_after_header instead of genesis_before_header. You need to target the right hook.

      For the first question, we can use PHP conditionals to determine when a page element displays e.g to display it on page with ID 1 you would use if ( is_page(1) ) { your menu code here }. Depending on how many pages you need to specify, using conditionals could affect page load speed detrimentally. Instead, you might use CSS to hide the menu when page one is in view e.g

      .postid-1 .customnavone {
      display:none;
      }

  5. says

    Interesting way to add more nav menus.

    But why not simply register a new one and hook it into place from your functions file without the need to create a new file?

    • says

      I probably didn’t consider that when I wrote the guide. Nowadays I just create a new widget area and give it a menu class/ID then stick a regular WordPress custom menu widget into it.

Leave a Reply