WordPress custom menu name

The most talked about features of WordPress 3.0 and also the creation of WooThemes – Custom Menu

WP custom menu

Some are still not sure how to use it, and ended up only having one custom menu and still doing some manually adding menu for another menu. You don’t need an accredited online degree to know how to make your life easier with the custom menu feature.

Footer navigation

Many website nowadays wants to have 2 menu list, one for the visitors, one for partners/business investor and etc. The common idea is to place another small navigation on the footer, the most bottom of the page.

Here I will register menu with name in functions.php:

if ( function_exists('register_nav_menu') ) {
register_nav_menu( 'top_menu', 'Top Menu' );
register_nav_menu( 'bottom_menu', 'Bottom Menu' );
}

So I can call out on my template

<?php if (function_exists('wp_nav_menu') ) { wp_nav_menu('menu=Top Menu'); } else {?>
<ul><?php wp_list_pages('title_li='); ?></ul>
<?php } ?>

<?php if (function_exists('wp_nav_menu') ) { wp_nav_menu('menu='Bottom Menu'); } else {?>
<ul><?php wp_list_pages('title_li='); ?></ul>
<?php } ?>

After that, only styling I need :) However, the downside is that you’ll need to create a menu name that is exactly the same as in functions.php.

How WordPress 3.0 menu helps

WordPress 3.0 “Thelonious” has just hit the Internet few days ago. I did not upgrade yet, because it seems unnecessary for me at the moment. But somehow, I made the upgrade on all localhost, to test and to built better framework for myself.

There are, a few features that saved my time to work on and to explain. Here are them…

Menu ordering

WordPress 3.0 menu

I’m sure one of the most talked about features in WordPress 3.0 is the menu. I’ve just made some learning on it. Though it may give me headache (multi-multilevel dropdown menu for some newbie) on how many level to do with.

Page redirection

WordPress 3.0 custom linkThis is related to the menu function. Previously, if you notice, many theme comes with an instruction telling you how to use custom field to do re-direction. Key in “redirect” for name then key in the address in value, change the page template. Well, no biggy now, just a link and name of the link it can be up in your menu by your order.

Now I know why woothemes become so huge with just a WordPress theme :)

Page attributes

WordPress page attributesSince you can actually order your menu and place any page as parent and child page. You don’t really need the page attribute.

Unless you want to make it easier for you to not use “search” and go straight to clicking the page, you now don’t need to even care about the “Parent” or “Order”, they are just unnecessary in WordPress 3.0. The only thing I can think of using them is… Neatness.

If each major release can help so much, I think it worth the upgrade time. Beside, it only takes about 3 to 6 months for a minor upgrade :)

Tiny mistake on dropdown menu

Recently I hop around quite a bit of website. Some nicely designed, some great functional, some… Mistake.

Multilevel dropdown menu, one term that may not be too unfamiliar for most of us, be it a web designer or not. However, the problem lies on the way it coded. Back in 1999, this is not that easy to create a multilevel dropdown, and I always refer to Dynamic Drive for all the fancy thing.

Nowadays, to make a web more accessible, we use unordered list <ul> … </ul> to create menu, hence, it is a little tricking than using <table> … </table> like what I did back in 1999.

Bascially,

Dropdown menu

The first level is covered with one <ul> … </ul> then another list inside the first level <li> … </li>. Take attention to the gap between the first level <li> … </li> and second level <ul> … </ul>. They are closed.

Dropdown menu gap

The gap will, however, disallow a mouse cursor to point on it when moving down from the first level.

To understand the whole second level work, the appearance of second level is all depend on the selection of first level link. So, wherever the cursor be, it should be within a clickable area.

Dropdown menu link

Most of the time, we would want to have some space in between each link. The correct way of doing it is to set padding on the link itself and not the list. The mistake one may make is to set padding on the list…

Dropdown menu not link

Take a look at the demo I created to find out what I mean by, not linking and doesn’t allow a cursor to go through the second level menu.

Demo