Yann "Bug" Dubois

Développeur WordPress freelance à Paris
Flux RSS

Adding a dynamic administrable menu to an existing WordPress theme

20 July 2011 Par : Yann Dubois Catégorie : WordPress

Ever since WordPress 3.0 was released, the TwentyTen theme bundled with the distribution has included a feature do dynamically manage the content and organization of menu items from inside the WordPress administration interface. Here’s a step-by-step guide to integrate that feature to any existing WP theme.

Activate the menu feature in functions.php

You first need to declare dynamic menus in the theme’s function.php file. You can add as many different menus as you like. Each one will have distinct features.

Edit /wp-content/themes/<your_theme>/functions.php

Here is an example:

// This theme uses wp_nav_menu() in 3 locations.
function register_additional_nav_menus() {
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
		'secondary' => __( 'Navigation bas de page', 'twentyten' ),
		'tertiary' => __( 'Liens partenaires', 'twentyten' ),
	) );
}
add_action( 'after_setup_theme', 'register_additional_nav_menus' );

Add the menu code to your templates

Edit your theme’s template file to insert the menus in the appropriate positions (usually in /wp-content/themes/<your_theme>/header.php and /wp-content/themes/<your_theme>/footer.php).

Code examples:

<div id="menu_yd">
  <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'depth' => 1 ) ); ?>
</div>
<div id="bottom-nav-menu" class="bottom-menu">
  <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'secondary', 'depth' => 1 ) ); ?>
</div>
<div id="partner-links" class="bottom-menu">
  <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'tertiary', 'depth' => 1 ) ); ?>
</div>

Go to your administration interface and setup the menus

Go to Appearance > Menus in the administration panel’s left menu.

In the upper right corner of the menu administration panel, create a new menu by typing in a name and saving the menu. You can now add a bunch of menu items by dragging them with the mouse from the left side of the panel (you can pick menu items from the existing pages and categories of the site). You can even manually add menu items that point to other fixed pages or external ressources outside WordPress.

To create a submenu hierarchy, slide an item slightly to the right by dragging it with the mouse; you can create as many sub-levels as you need. WordPress will automatically output HTML appropriate to displaying drop-down menus.

Once the menu is setup, record it, and assign it to an existing dynamic menu spot in the upper-left setup box.

Save your changes once the menus are setup and assigned to their respective positions.

WordPress will use default menus until you setup your actual custom items.

Add or modify styling

All that is left to do is to update your style.css stylesheet to give appropriate looks to your new dynamic menus.

You will usually need to convert vertical-styled bullet lists into horizontal menus. Here’s a quick CSS code example:

#menu_yd ul {
	list-style: none;
}
#menu_yd li {
	margin: 0;
	padding: 2px 10px;
	display: inline;
	background-image: none;
}

Just add-up some background colors and your own font styling and you’re all set.

Tip: if you’re using hierarchical drop-downs, start by copying CSS styles from the default TwentyTen or TwentyEleven WordPress theme.

A lire également...

WordPress › Error

There has been a critical error on your website.

Learn more about debugging in WordPress.