First we need to put together a simple menu as an unordered list:

<ul id="main-navigation">
   <li class="first><a href="http://themes.bavotasan.com">Home</a></li>
   <li><a href="http://themes.bavotasan.com/category/our-themes">Themes</a></li>
   <li><a href="http://demos.bavotasan.com/">Demos</a></li>
   <li><a href="http://bavotasan.com/">Blog</a></li>
</ul>

We’ll give our unordered list the ID main-navigation and our first list items the class first. You’ll see why in a second.

Next comes the CSS:

#main-navigation {
   width: 100%;
   -moz-border-radius: 8px;
   -khtml-border-radius: 8px;
   -webkit-border-radius: 8px;
   background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
   background: -moz-linear-gradient(top,  #444444,  #666666);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
   border: 1px solid #444;
   list-style: none;
   padding: 0;
   margin: 0;
   float: left;
   }
 
#main-navigation li {
   float: left;
   border-right: 1px solid #777;
   }
 
#main-navigation li a {
   font: 13px Georgia, "Times New Roman", Times, serif;
   letter-spacing: 1px;
   padding: 12px 20px;
   border-right: 1px solid #333;
   display: block;
   color: #fff;
   }

The above CSS will give us a menu that looks like this:

• Home
• Themes
• Demos
• Blog

A simple underline for the hover doesn’t quite cut it, so let’s add a cool hover effect:

#main-navigation li a:hover {
   background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
   background: -moz-linear-gradient(top,  #666666,  #444444);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');
   text-decoration: none;
}

Hover over a link below to see it in action.

• Home
• Themes
• Demos
• Blog

All we did was reverse the gradient and it adds a cool effect. The only problem is that hovering over the first item gives us some strange squared corners. Fixing that requires some CSS styles for the list item with the classname first.

#main-navigation li.first a {
   -moz-border-radius: 8px 0 0 8px;
   -khtml-border-radius: 8px 0 0 8px;
   -webkit-border-radius: 8px 0 0 8px;
}

Now our final menu looks and functions exactly how we want it to.

• Home
• Themes
• Demos
• Blog

Here are a few of the new features:

• WordPress 3.0 menu system
• WordPress 3.0 background editor
• Arturo Theme Engine v2.0
• Ajax save function
• Cleaner code

Here are a couple of screen shots to show you what it looks like:

WordPress 3.0's new menu system.

This is what you will see once you have created a menu.

Taking a look behind the scenes of TwentyTen, the new default theme for WP 3.0, gives a little insight as to how it all works and what needs to be in place to make sure that the theme you are using will take advantage of this new feature.

First, you need to include the following in your functions.php file:

add_theme_support( 'nav-menus' );

Make sure it is placed within the PHP tags. That is all you really need to activate the menu system. A link to the Menus admin page will appear in the Appearance panel. If you really want your theme to stand out, you can even register menu locations so that the user can assign menus to specific areas of your theme templates. This is similar to the sidebar functionality.

register_nav_menu('main', 'Main Navigation Menu');

This will register a menu with the ID “main” and the description “Main Navigation Menu”. Including this snippet will make a new panel appear on the Menus admin page (see the second image above). Now users can select which of their menus will appear in that registered location.

Next comes the function to actually display these menus in your theme. This is how TwentyTen uses the function in header.php:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

The above code displays the first menu you created, ordered how you have set it, within a div container with the classname “menu-header”.

Here is a list of all the arguments that the function can take (so far):

• menu – The menu that is desired. Accepts (matching in order) id, slug, name. Defaults to blank.
• menu_class – CSS class to use for the ul container of the menu list. Defaults to ‘menu’.
• container – Whether to wrap the ul, and what to wrap it with. Defaults to ‘div’.
• container_class – the class that is applied to the container. Defaults to blank.
• fallback_cb – If the menu doesn’t exists, a callback function will fire. Defaults to ‘wp_page_menu’.
• before – Text before the link text.
• after – Text after the link text.
• link_before – Text before the link.
• link_after – Text after the link.
• echo – Whether to echo the menu or return it. Defaults to echo.
• depth – how many levels of the hierarchy are to be included. 0 means all. Defaults to 0.
• walker – allows a custom walker to be specified.
• context – the context the menu is used in.
• theme_location – the location in the theme to be used. Must be registered with register_nav_menu() in order to be selectable by the user.

You need to use the theme_location argument to call a registered menu:

<?php wp_nav_menu( array( 'theme_location' => 'main', 'sort_column' => 'menu_order', 'fallback_cb' => 'display_home' ) ); ?>

I have also added the fallback_cb argument to show how to control the default callback if no menu is created. If you don’t include a callback it will default to wp_page_menu() which will just list your pages. I have assigned a function called display_home() as my callback.

function display_home() {
	echo '<div class="navigation"><ul><li><a href="'.get_bloginfo('url').'">Home</a></li>';
	wp_list_categories('title_li=&depth=1&number=5');
	echo '</ul></div>';
}

By default, that will display a home link and 5 categories.

There still seem to be a few bugs in the new menu system, but that is to be expected in a beta version. All in all, it is a great addition to WordPress, and theme developers should rejoice that they can now easily offer more control to their users by taking advantage of one of the many core features that will be included in WP 3.0.

Add the following to your plugin file, within a <php> tag:

// Add settings link on plugin page
function your_plugin_settings_link($links) { 
  $settings_link = '<a href="options-general.php?page=your_plugin.php">Settings</a>'; 
  array_unshift($links, $settings_link); 
  return $links; 
}
 
$plugin = plugin_basename(__FILE__); 
add_filter("plugin_action_links_$plugin", 'your_plugin_settings_link' );

Be sure to change the your_plugin.php to the actual filename of your plugin.

What gives?

Well, what you need to first understand about Illustrator is that is works with vector shapes whereas Photoshop works with bitmaps.

What does that all mean?

Quite a bit, but all you really need to know is that if you want to use and/or abuse Photoshop filters in Illustrator, you need to change your vector shapes into bitmaps.

How do you do that?

Very easily. Select your shape, go to Object => Rasterize.

A panel will open up where you can select different options. Choose and select OK. Now you vector shape will probably look pretty crappy, but at least all those amazing Photoshop filters are now available to help make it look better.

Whenever I work with WordPress, there are a few things I do immediately after a new install. They help with search engine optimization and making things work a little better.

1. Activate pretty-permalinks

When you first install WordPress, the permalinks default to something that looks like this,
http://bavotasan.com/?p=123
But we want it to look like this
http://bavotasan.com/tutorials/things-you-should-do-after-installing-wordpress
Why? Because that is the first step to optimization your new WordPress install for search engine ranking.

How do you do it?

2. Make sure thumbnails do not crop to exact dimensions.

When you upload an image to WordPress, the default setting crops the thumbnail to be exactly 150px by 150px. Not too good if the images you are uploading are not perfectly square. (If by chance you do want your images to be cropped to these exact dimensions then you can ignore this one.)

How do you do it?

Even though these are two little things, I find that they are both very important to start things off on the right foot with a new WordPress install.