Bud's Tech Shed

Archive for April, 2010

I’ve been playing around with the beta release of WordPress 3.0 lately and really like the new navigation menu. It’s very slick. Anyway, I wanted to make see if I could make the new nav menu work with the styling of my Artisteer menu.

After fooling around for a couple of hours I got it working and it turned out to be easier than I thought. I now have a cool menu that can have any combination of pages, categories and even external links.

The first thing that needs to be done is to make the theme aware of the nav-menu. Open the functions.php file in your favorite editor.

Right after the opening php tag add this…

if ( function_exists('add_theme_support') )

	// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu()
	add_theme_support( 'nav-menus' );

I figured we may as well add post-thumbnail support too

That’s it for the functions.php file. Now open the header.php file and locate your art-menu code. It should look something like this…

<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
</div>

We’re going to replace the unordered list with the new wp_nav_menu so that it will now look like this…

<div class="art-nav" >
	<div class="l"></div>
	<div class="r"></div>
	<?php wp_nav_menu( array(
		'sort_column' => 'menu_order',
		'menu_class' => 'art-menu',
		'title_li' => '<div class="l"></div><div class="r"></div>',
		'menu' => 'pages', // this is the name of your menu you created in the menu admin
		'link_before' => '<span class="l"></span><span class="r"></span><span class="t">',
		'link_after' => '</span>'
	) ); ?>
</div>

The new wp_nav_menu has a number of options that allows us to wrap the menu and duplicate exactly the styling of the Artisteer menu, almost. The only thing we can’t do (or at least I haven’t figured it out yet) is that Artisteer adds a class .active to the active link of a menu item. The wp_nav_menu function adds a class for the active item but since there is no CSS style for it the active menu is not set. But all is not lost, we just have to add a little CSS to our style.css file.

Find the following code in your style.css file…

.art-menu a.active .l, .art-menu a.active .r
{
  top: -66px; /* this will unique to each theme */
}

.art-menu a.active .t
{
  color: #070807; /* this will unique to each theme */
}

Right after the last css item add the following…

.art-menu li.current-menu-item a .l, .art-menu li.current-menu-item a .r ,
.art-menu li.menu-item-parent a .l,.art-menu li.menu-item-parent a .r	{
top:-66px; /* make this value the same as the one above */
}

.art-menu li.current-menu-item a .t, .art-menu li.menu-item-parent a .t {
color:#070807; /* make this value the same as the one above */
}

Substitute the values indicated by the comments in the above code with the values from your theme. This CSS will now properly show the menu item as active.

That’s it. You should now have a WP 3.0 compatible menu for your theme.

Since WP 3.0 is in beta some things may change. One of the things missing from the beta is to create a class to indicate when there is an active parent item for a child menu that is active. This functionality will be included in the final release of WP3.0 and I’ve added the CSS to take advantage of it when it becomes functional.

Here’s a shot of my test site with a normal Artisteer menu on the to and a custom WP3.0 menu on the bottom of the header.

I’ve modified a lot of themes made with Artisteer. It took awhile to figure out how all of the pieces of the theme worked together. Along the way I started documenting my discoveries.

So here it is. The anatomy of an Artisteer theme in PDF format.