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:
- Create a custom nav file
- 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.
- 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/.
- Create a file called customnavone.php in your child theme’s root directory.
- Copy and paste this code into customnavone.php
<?php echo '<div id="nav"><div class="wrap">'; wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_id' => 'customnavone' , 'menu_class' => 'menu customnavone superfish sf-js-enabled', 'theme_location' => 'customnavone') ); echo '</div></div>'; ?>
- Save customnavone.php
For example, if you are using the Landscape theme:
- Navigate to /wp-content/themes/landscape/
- Create a file called customnavone.php in /wp-content/themes/landscape/customnavone.php
- 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
<?php echo '<div id="nav"><div class="wrap">'; wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_id' => 'customnavtwo' , 'menu_class' => 'menu customnavtwo superfish sf-js-enabled', 'theme_location' => 'customnavtwo') ); echo '</div></div>'; ?>
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:
- Remove and replace Genesis support for custom menus
- 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:
// Remove Custom Menu support remove_theme_support ( 'genesis-menus' ); // Default Menus: registers menus add_theme_support ( 'genesis-menus' , array ( 'primary' => 'Primary Navigation Menu' , 'secondary' => 'Secondary Navigation Menu' ,'customnavone' => 'Third Navigation Menu' ) );
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 new navbar
add_action('genesis_before_header', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}
//remove nav - uncomment these to remove the original menu (if needed)
# remove_action( 'genesis_before_header', 'genesis_do_nav' );
# remove_action( 'genesis_before_header', 'genesis_do_subnav' );Add a new menu after the header
Put this code at the bottom of the child theme’s functions.php file:
// Add new navbar
add_action('genesis_after_header', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}
//remove nav - uncomment these to remove the original menu (if needed)
# remove_action( 'genesis_after_header', 'genesis_do_nav' );
# remove_action( 'genesis_after_header', 'genesis_do_subnav' );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 new navbar
add_action('genesis_before_content', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}Add a new menu after the content
Put this code at the bottom of the child theme’s functions.php file:
// Add new navbar
add_action('genesis_after_content', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}Add a new menu before the footer
Put this code at the bottom of the child theme’s functions.php file:
// Add new navbar
add_action('genesis_before_footer', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}Add a new menu after the footer
Put this code at the bottom of the child theme’s functions.php file:
// Add new navbar
add_action('genesis_after_footer', 'customnavone');
function customnavone() {
require(CHILD_DIR.'/customnavone.php');
}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:
<style type="text/css">
.customnavone {background-color: white}
</style>What Next?
Share this guide on Facebook and Twitter then go play with your new menu.
wpDiscuz