in How to Add a Genesis Top Navigation System - WP Smith
post

How to Add a Genesis Top Navigation System

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.

1 2 3 4 5
<?php
/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );

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.

1 2 3 4 5 6 7 8 9
<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' )
'secondary' => __( 'Secondary Navigation Menu', 'child-domain' )
)
);

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

1 2 3 4 5
<?php
/** Reposition the secondary navigation */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );

Create Top Navigation

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

1 2 3 4 5 6 7 8 9 10
<?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' ),
)
);

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.

1 2 3 4 5 6 7 8 9
<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' ),
'top' => __( 'Top Navigation Menu', 'child-domain' ),
)
);

Output the Menu

Finally, you will need to output the menu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<?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.

About Travis Smith

As a WordPress Enthusiast, Travis writes about his journey in WordPress trying to help other WordPress travelers and enthusiasts with tutorials, explanations, & demonstrations of the things he learns.

Comments

  1. Thanks for the write-up! One question, though. Where does the code snippet in wps_do_top_nav.php, go?

Trackbacks

  1. […] has a great tutorial on How to Add a Genesis Top Navigation […]

Leave a Reply

%d bloggers like this: