BlogsWeek.com

Menubar 4.3 fixes a serious bug affecting the Add Menu Item and Edit Menu Item forms in Internet Explorer (IE6 and IE7).

Thanks to Fabrizio for the bug report!

As you know, Menubar adds configurable menus to your WordPress site.

But, what if your theme already features a native menu?

Don’t worry, you can use Menubar to enhance the native menu of a WordPress theme, adding the Menubar configurability to the existing menu.

All you need is a special Menubar template and instructions. The procedure is slightly different for each theme, so in this post we’ll add Menubar configurability to a well known WordPress theme, iNove 1.4.6 by mg12 (see picture), in six easy steps.

1) Install and activate the iNove theme.
2) Install and activate the Menubar plugin.
3) Download and install the ‘inove’ Menubar template.
4) Create a new menu with Name: my-inove and Template: inove without CSS.
5) Open the file wp-content/themes/inove/templates/header.php, locate the lines

<!-- menus START -->

and

<!-- menus END -->

delete the eleven lines in between, and replace them with the call to Menubar.
The final result should be:

<!-- menus START -->
<?php do_action ('wp_menubar', 'my-inove'); ?>
<!-- menus END -->

6) Add a few menu items to your menu, and enjoy your iNove menu with the configurability of Menubar! The first menu item should be a FrontPage type, if you wish to see the little house icon on it. The actual name of the menu my-inove is not important, as long as you use the same menu name in steps 4) and 5).

If you wish to enhance the native menu of your favorite theme with Menubar, please let me know and I’ll try my best to write the special template and instructions for you.

Q #1: How do I change the overall width of the Superfish Menubar template?

A: You have to edit the Superfish CSS file you are using. For instance if you are using ssf-green.css, open that file, locate the following rule and change the margin property as shown:

.ssf-green-wrap {
margin: 10px 0 0 0;
margin: 10px 10px 0 10px;
...
}

Then locate the following rule and change the margin property again:

.ssf-green-after {
...
margin: 0;
margin: 0 10px 0 10px;
...
}

Save your CSS file, ssf-green.css in this case, and reload your page to see the change in the menubar width.

Q #2: How do I change the width of the Superfish sub-menus?

A: You have to edit the Superfish CSS file you are using. For instance if you are using ssf-green.css, open that file, locate the following rule and change the width property as shown:

.ssf-green ul {
...
width: 10em; /* left offset of submenus need to match (see below) */
width: 15em; /* left offset of submenus need to match (see below) */
}

Then locate the following two rules and change the left property in both of them:

ul.ssf-green li li.wpm-hover ul {
left: 10em; /* match ul width */
left: 15em; /* match ul width */
...
}

ul.ssf-green li li li.wpm-hover ul {
left: 10em; /* match ul width */
left: 15em; /* match ul width */
...
}

Save your CSS file, ssf-green.css in this case, and reload your page to see the change in the sub-menus width.

WordPress Menubar 4.2 adds support for the FORCE_SSL_ADMIN mode (defining FORCE_SSL_ADMIN in wp-config.php makes WordPress require HTTPS for the backend). Thanks to David for the bug report and the beta testing!

The 4.2 version also supports the new Superfish template. Superfish is a jQuery menu plugin, written by Joel Birch, that improves a Suckerfish menu in many ways.

The Superfish template for Menubar 4.2 integrates Superfish to offer a dropdown menu with two much requested enhancements: first, adds a delay on mouseout before hiding the sub-menus, to be more forgiving of mouse movement errors, and second, indicates the presence of sub-menus by adding arrow images to the relevant menu items.

Superfish also adds animation of sub-menu reveal, and drop shadows for sub-menus in capable browsers (not IE6).

Other improvements: long menu names are not truncated, menu items can be right aligned specifying the class name right in the CSS class field, and four different color variations are available (red, yellow, green, blue); and, as usual, you can customize the template CSS according to your needs.

Menubar 4.2 is available in the WordPress Plugin Directory. To preview the new Superfish template you can visit the WP Menubar demo site, and to download it you can visit the template Download page.

Menubar 4.1 is here! With this version I think that the new template structure introduced with version 4.0 is 99% completed. The new structure was necessary to allow an easier customization of templates, and to allow the deployment of new features.

The new template structure deserves a full documentation, and I’ll post it as soon as it’s ready, but if you are really curious you can take a look at the new Suckerfish_41 template code.

What else is new in Menubar 4.1? First, the new Custom item type, which allows you to build a menu item with any custom HTML you need.

And second, the generation of default item names if you leave the Name field blank. As you already guessed, the default name is the post title for posts, the category name for categories, and the page title for pages. So if you choose the default option and you change, say, a category name, the corresponding menu item name will be automatically updated.

Both these new features are only available with new templates. Today I’m releasing the Suckerfish_41 template, and I plan to release new versions of all the existing templates soon, so they can benefit from the new features.

The old template structure and the old templates are supported as well, so you can update Menubar and be confident that your old menus will work as usual.