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.

Win the battle. Social Warfare Dynamik Website Builder Author Pro

Leave a Reply

15 Comments on "HowTo: Add New Menus to Genesis Themes"

Notify of
Sort by:   newest | oldest | most voted
wpDiscuz

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!