Site icon WP Smith

How to Add a Genesis Top Navigation System

Travis Smith

Adding a top navigationn menu to a Genesis child theme is quite easy. There are a couple of approaches. First, one can simply move the primary navigation to the top.

<?php
/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );
view raw reposition_primary.php hosted with ❤ by GitHub

Howevever, if you are already using the primary navigation, this may not work for you and a different approach may be necessary.

The approach depends on what menus you are currently using (e.g., using both primary and secondary or just primary with secondary not registered, etc). You would need to first, register the menu and second, then, output the menu.

Register the Menu

First locate something like the following in your functions.php file.
https://gist.github.com/4496105

If you don't then, you have the default Genesis setup. This is the same as having the following in your functions.php file.

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' )
'secondary' => __( 'Secondary Navigation Menu', 'child-domain' )
)
);
view raw genesis-menus-default.php hosted with ❤ by GitHub

So you have two options:

  1. If not using the secondary navigation, you can use secondary navigation as the top menu
  2. Create a new top menu navigation system

Use Secondary Navigation as Top Menu

<?php
/** Reposition the secondary navigation */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );
view raw reposition_secondary.php hosted with ❤ by GitHub

Create Top Navigation

To create a new navigation system, you need to do the following in your functions.php:

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' ),
'secondary' => __( 'Secondary Navigation Menu', 'child-domain' ),
'top' => __( 'Top Navigation Menu', 'child-domain' ),
)
);
view raw genesis-menus-top.php hosted with ❤ by GitHub

This will add a menu system of Top that you can find in Appearance > Menus. If you just want primary and top, remove the secondary menu from the middle.

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' ),
'top' => __( 'Top Navigation Menu', 'child-domain' ),
)
);
view raw genesis-menus-top-2.php hosted with ❤ by GitHub

Output the Menu

Finally, you will need to output the menu.

<?php
add_action( 'genesis_before', 'wps_do_top_nav' );
/**
* Output Top Navigation
*/
function wps_do_top_nav() {
/** Do nothing if menu not supported */
if ( ! genesis_nav_menu_supported( 'top' ) )
return;
/** If menu is assigned to theme location, output */
if ( has_nav_menu( 'top' ) ) {
$args = array(
'theme_location' => 'top',
'container' => '',
'menu_class' => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
'echo' => 0,
);
$nav = wp_nav_menu( $args );
/** Wrap nav menu with div and .wrap div if applied to #nav */
$nav_output = sprintf( '<div id="top-nav">%2$s%1$s%3$s</div>', $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );
echo $nav_output;
}
}
view raw wps_do_top_nav.php hosted with ❤ by GitHub

This will output your top navigation the same as you output your primary navigation with all references to nav changed to top-nav.