From the Blog

Tutorials · Freebies · Inspiration ·Themes

How to Add Custom Menus to your WordPress Theme

0
March 29, 2011 · by LeTune · No comments

Whether you’re a full blown theme developer or a rigorous theme tweaker, if you want to add menus, as available since the 3.0 upgrade, this tutorial will show you the two ways you can do this.

Adding Custom Menu with Widget

Since I primarily do the web design when building WordPress themes and let a friend of mine do the coding, the first theme I made since the upgrade did not support the fully integrated menus, but used the widget-based one. This worked like clockwork and simply a matter of creating a widget area where the menus should go.

1. Add the code below to functions.php.

if ( function_exists('register_sidebar') ) {

register_sidebar(array('name'=>'menu1',));

}


2. Add the code below where you want your menus, say in the header.php perhaps.

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('menu1')) : ?>

		<?php endif; ?>

Screenshots

To finish off, here’s a screenshot (click to enlarge) of where you add your widget-based custom menu. First of course, you’ll have to create the menu under Appearance » Menus:

Then you head over to the widgets area and drag the custom menu widget to your “menu1″ widget area, like such:

Adding Custom Menu(s) with wp_nav_menu

Then there’s the right and awesome way to integrate custom menus, they way God (Matt) intended, so that the user of your theme know that you made some effort in securing usability and user satisfaction. Since the new upgrade WordPress comes with it’s own custom menu snippet, wp_nav_menu. And here’s how you use it:

1. Add the code below to functions.php

add_action( 'init', 'register_my_menu' );

function register_my_menu() {
	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}

for more than one menu, add the following code:

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' ),
			'secondary-menu' => __( 'Secondary Menu' ),
			'tertiary-menu' => __( 'Tertiary Menu' )
		)
	);
}


2. Add the wp_nav_menu snipper where you want the menu(s):

<?php wp_nav_menu(); ?>

with more than one menu you’ll have to be a bit more specific:

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

Screenshots
As you’ll see in the screenshot the theme now supports three menus and in the box Theme Locations under Appearance » Menus where I can assign created menus to my Primary, Secondary Tertiary menu locations.

So there you have it. Hope it helps and if you get stuck let us know by commenting below. Cheers!/LeTune

2016 © Please don't copy · Made in WordPress