In your theme’s functions.php add something like the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function mytheme_addmenus() {
	register_nav_menus(
		array(
			'main_nav' => 'The Main Menu',
		)
	);
}
add_action( 'init', 'mytheme_addmenus' );
 
function mytheme_nav() {
    if ( function_exists( 'wp_nav_menu' ) )
        wp_nav_menu( 'menu=main_nav&container_class=pagemenu&fallback_cb=mytheme_nav_fallback' );
    else
        mytheme_nav_fallback();
}
 
function mytheme_nav_fallback() {
    wp_page_menu( 'show_home=Start&menu_class=pagemenu' );
}

In line 1 we add support for the navigation menus. The mytheme_nav() function is what you will use in the theme to display the menu. Inside that function we check if wp_nav_menu() exists, that means if we’re running WordPress 3.0 (or later). If not we’ll use the fallback function mytheme_nav_fallback().

Notice that the fallback also gets called if no navigation menus have been created in the admin area. That’s what the fallback_cb parameter on line 4 does.

To keep the HTM markup and the CSS consistent you’ll have to use the container_class parameter on wp_nav_menu but the menu_class parameter for wp_page_menu.

In your template use the following code to use your new custom function:

<?php mytheme_nav(); ?>

Resources

• wp_nav_menu() reference
• wp_page_menu() reference
• Informative article on nav menus by Justin Tadlock

Ramblings

What’s good about the new menu system:

• Total control over what appears in the menu
• You can add posts, pages, categories and tags in the menu
• Very nice drag and drop interface

What’s bad:

• You will have to teach your users how to use the system properly.
• If you create new pages they won’t be added to your existing menu (except for top level pages).
• You can not control your page menus through the navigation menus interface. I think it is… very very odd that WordPress doesn’t have a simple drag-and-drop interface to arrange pages.
• The previous point means that the new menu system is useless unless you update your theme.
• The wp_nav_menu() call is inconsistent with the existing wp_page_menu() function.

   $my_query = new WP_Query( "cat=3" );
   if ( $my_query->have_posts() ) {
       while ( $my_query->have_posts() ) {
           $my_query->the_post();
           the_content();
       }
   }
   $GLOBALS['post'] =  $GLOBALS['wp_query']->post;

Restoring $post is necessary because $post->comment_status of the post in the outer loop can be wrong after running the inner loop. That was the only problem I found, by I prefer to restore $post completely just to be sure. WordPress 3.0 has a function wp_reset_postdata() that you can use to restore $post.

I use this technique to show an “excerpt cloud” in a post using a shortcode.

Another fine document that some developers seem to ignore is the list of plugin API hooks. Please, read that section, and include these hooks in your template! Some plugins need that API hook to work at all. My surprisingly popular snowstorm plugin for example certainly does.

While you’re at it, think about how you want to style, for example, the wp_footer() call. When I visit pages that give me a backlink through that call, sometimes the backlink is displayed in very odd places and with weird colors.

Finally, although it has already been said on the pages I linked to, get the theme unit tests and use them! It’s quite embarassing for a designer to release buggy WordPress templates.

tmp.templateFile = COA
tmp.templateFile {
	10 = COA
	10 {
		if.isFalse.numRows < styles.content.getRight
		10 = FILE
		10 {
			file = fileadmin/template/1col.html
		}
	}
	20 = COA
	20 {
		if.isTrue.numRows < styles.content.getRight
		10 = FILE
		10 {
			file = fileadmin/template/2col.html
		}
	}
}

The ifs check if there is or isn’t content in the right column and the COA returns the correct cObject, FILE in this case.

And then in your main typoscript something like:

page.10.template < tmp.templateFile

instead of the more usual

page {
	10 = TEMPLATE
	10 {
		template = FILE
		template {
			file = fileadmin/template/1col.html
		}
	}
}

That’s all.