Taking Old WordPress Menus to School

cc licensed ( BY NC ND ) flickr photo shared by ailatan

With a relaxing day of nothing definite to do, I decided to poke around the corners of the blog house and clean up some dust gathered in the corners of my theme. Themes that predate WordPress 3, like mine, do not take advantage of the newer menu editing options.

Old school themes were typically set up to turn Pages into menus, for example mine is wedged inside the header.php template:

<ul class="menu">
	<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>">Da Blog</a></li>
	<?php wp_list_pages('depth=1&title_li=&include=1358,887,2929,1620'); ?>
</ul>

<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>">Da Blog</a></li>

<?php wp_list_pages('depth=1&title_li=&include=1358,887,2929,1620'); ?>

</ul>

where I have picked the pages listed by their id numbers to appear. This is rather tedious to edit and manage, and I also ran into issues because I have a few custom php pages that draw in the wordpress theme, and thus I end up with about three variations of header.php that would need edits.

The first logical step is to pull out the navigation elements into its own php file (the bits above) that I call nav.php. This way, in any header file, I pull that in via a simple replacement of above with

<?php include "nav.php"?>

1	<?php include "nav.php"?>

Now I use the WordPress Menus editor (under Appearance on the dashboard). The great thing abut the menu editor is you can have more than just pages- you can use categories, and you can also mix in custom (e.g. outside URLs) all in one menu.

I created one i called, for lack of better terms, “doggie”

(click for full size)

I have the blog main URL as a custom one, a few of my pages, and a few external sites. In the menu pane on the right, you can slide the items around to get the order you like. It is very “widgety” and most current themes likely use widgets to do this.

To use this in my theme, I followed the options for inserting a menu listed in the codex for wp_nav_menu() function, so my nav.php file now reads:

<?php wp_nav_menu( array('menu' => 'doggie', 'container' => false)); ?>

1	<?php wp_nav_menu( array('menu' => 'doggie', 'container' => false)); ?>

which simply tells my theme to use the doggie menu. The value for container tells it not to wrap it in a dv as it is already in your theme. It even seems to take care of theming the menu as “selected” if you are on the page that matches the menu item (e.g. my custom page that lists my 100 last posts)

Your own integration depends on how your themes menus are set up in the template. Being able to edit the menu in the wordpress dashboard is not only easier, but much more flexible than the old school pages approach.

This turned out to be a useful exercise for another project, where the codex page for the menu function includes sample code that can have different menus for logged in and not logged in users:

<?php
if ( is_user_logged_in() ) {
     wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
}
?>

<?php

if ( is_user_logged_in() ) {

wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );

} else {

wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );

}

Loving the WP hacking…