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.

30-menu

  • Shawn says:

    Thanks for the great website and Artisteer tips. I will be trying this out with a 2.9.2 WP Single User and BuddyPress. Right now when using my artisteer template none of the BuddyPress items show up… Hopefully this will help me out, even though I am not using 3.0! I will be coming back here more often for sure. I found your site from you helping another artisteer user out, here — http://premium.wpmudev.org/forums/topic/artisteer-theme-and-changing-headerjpg

  • Joshua says:

    You just saved me a couple of hours of figuring out that code. Thank you so much for this. I tried someone else’s solution but it didn’t work so well.

  • rian says:

    hello,
    thank for this, but it doesn’t seem to work. just tried it with the new wordpress 3.0 and it always says that my template does not support menues…
    any idea?

    regards
    rian

  • Hunter Gatherer says:

    Bud’s a hero.

  • admin says:

    Thanks, It’s crude but effective.

  • Jeff says:

    Thanks a ton! This saved me a bunch of time trying to figure this out…

  • BatchHeader says:

    This is great. Things like this should be as standard on Artisteer…Well just wait for delopment to catch up.

    Thanks for your work

    BatchHeader

  • paulo says:

    Very good! I liked it.

    I removed the following line

    ‘Menu_class’ => ‘art-menu’,

    and i do not need to be modified the functions, I do it’s own wp-admin.

    i take its cue from the: add_theme_support (‘post-thumbnails’);

    I’ll post one here too:

    //Add default posts and comments RSS feed links to head
    add_theme_support (‘automatic-feed-links’);

    thanks again. hug!

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“Nearly all men can stand adversity, but if you want to test a man's character, give him power.”

by Abraham Lincoln