Custom Menu Code Samples

Do you find yourself taking older themes and adding support for Custom Menus? Here are code samples that you can use for just that.

To be clear, this isn’t a full-blown tutorial for Custom Menus. See Justin Tadlock’s excellent post, Goodbye, headaches. Hello, menus! or the wp_nav_menu Codex page for all the juicy details.

First, implement the following in functions.php and header.php.

In header.php:

<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary', 'fallback_cb' => 'mytheme_page_menu' ) ); ?>

This command replaces the previous navigation—usually a list of pages—which moves to the fallback function in functions.php.

In functions.php:

// Enable navigation menu
register_nav_menus( array(
	'primary' => __( 'Primary Navigation', 'mytheme' )
) );

// Add fallback for navigation
function mytheme_page_menu() { ?>
<ul class="menu">
	<li<?php if ( is_home() ) echo ' class="selected"'; ?>><a href="<?php home_url(); ?>">Home</a></li>
	<?php wp_list_pages( 'depth=1&title_li=' ); ?>
</ul>
<?php } ?>

Don’t forget to change “mytheme” in the examples above to the name or slug of your theme.

Next, add the CSS rules for submenu items.

#nav li {
	position: relative;
}
#nav li a {
	display: block;
}
#nav .children .children,
#nav .sub-menu .sub-menu {
	margin-left: 12px;
}
#nav ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 32px;
	left: 0;
	width: 85px;
	z-index: 9999;
}
#nav ul ul li {
	min-width: 105px;
}
#nav ul ul a {
	width: 105px;
}
#nav ul li:hover > ul {
	display: block;
}
/* you-are-here styles */
#nav ul li a:hover,
#nav ul li:hover > a,
#nav ul li.current_page_item > a,
#nav ul li.current_page_parent > a,
#nav ul li.current_page_ancestor > a,
#nav ul li.current-cat > a,
#nav ul li.current-menu-ancestor > a,
#nav ul li.current-menu-item > a,
#nav ul li.current-menu-parent a {
	/* background, color, etc */
}

Next, test your shiny new menu. Test with no Custom Menu (normal page navigation), with a Custom Menu enabled, and test the drop-down menus by adding submenu items.

Finally, add the custom-menu tag to your style.css file to proudly tell the world you know support a Custom Menu in your theme.

Author: Lance Willett

My name is Lance, I am a blogger, product manager, software developer, and business executive creating high-quality, engaging, and customer-centered experiences for people online. México-born. Chief Product and Technology Officer at Tumblr (Automattic). View all posts by Lance Willett