One of the best all-around additions to WordPress 3.0 is custom Menu management. So how do you implement custom menus into your WordPress site? Simply add a few lines of code in your theme’s functions.php file, then add the menus where desired in your theme. Yes, it requires adding php code to your theme’s files, but it’s simple and easy to understand.
First we register the ability for your theme to use custom menus using the add_theme_support() WordPress function.
1 | add_theme_support('menus'); |
Next we define the custom menus. For this example we’ll create two menus: menu-1 and menu-2, and name them “Main Navigation’ and ‘Footer Navigation’ respectively. We accomplish this in a new function ‘register_site_menus’, using the register_nav_menus() WordPress function.
1 2 3 4 5 6 7 8 | function register_site_menus() { register_nav_menus( array( 'menu-1' => __( 'Main Navigation' ), 'menu-2' => __( 'Footer Navigation' ) ) ); } |
We then initiate the new register_site_menus() function using the add_actions() WordPress function as shown below.
1 | add_action( 'init', 'register_site_menus' ); |
Putting it all together yields the following code to be placed in your theme’s functions.php file:
1 2 3 4 5 6 7 8 9 10 11 12 | add_theme_support('menus'); function register_site_menus() { register_nav_menus( array( 'menu-1' => __( 'Main Navigation' ), 'menu-2' => __( 'Footer Navigation' ) ) ); } add_action( 'init', 'register_site_menus' ); |
Next we add ‘menu-1′ our ‘Main Navigation’ menu, using the wp_nav_menu() WordPress function where we want that menu to appear in your theme (header, sidebar, etc.). We also chose to not have a container automatically added to our menu for this example below.
1 2 3 4 | wp_nav_menu( array( 'theme_location' => 'menu-1', 'container' => '' ) ); |
We’ll add ‘menu-2′ our ‘Footer Navigation’ menu, using the same function but, we also give the menu a custom CSS id of ‘footer-nav’. You can read all about the parameters of the wp_nav_menu() function yourself rather than bore you with the details here.
1 2 3 4 5 | wp_nav_menu( array( 'theme_location' => 'menu-2', 'container' => '', 'menu_id' => 'footer-nav' ) ); |
