BlogsWeek.com

[Updated October 15, 2010]

Menubar is a WordPress menu plugin that adds one or more configurable menus to your WordPress site. With Menubar you can create both single and multi-level menus, and you can style them with customizable menu templates.

This page contains the updated documentation for Menubar 4.9.

Contents

• Requirements
• Features
• Upgrading procedure
• First installation procedure
• Create your menus
• Configure your menus
• Menubar templates

Requirements

1) Menubar requires WordPress 2.6 or higher.

2) Your theme must include a call to the wp_head() function. Usually this call is made in the header.php file, right before the </head> line. If your theme doesn’t include a call to wp_head(), you should add it yourself, otherwise you’ll get an error like this:

WP Menubar error: Function wpm_display_Suckerfish() not found!

[back to Contents]

Features

With WordPress Menubar:

* you can build fully customized single or multi-level menus with the homepage, the frontpage, categories, category trees, static pages, page trees, tag archives, single posts, a search box, and any static or PHP generated URLs; the currently selected menu item is dynamically highlighted, but you can disable this feature if you don’t like it;

* you can add, edit and delete menus and menu items in an easy to use administration panel, which blends nicely with the existing WordPress administration panels;

* you can specify where to place each menu by inserting in your theme a short line of PHP code; you can also use the included Menubar widget to place a menu in a sidebar or widget-ready area of your theme (only with WordPress 2.8 or higher);

* you can choose one of the available menu templates to style each menu, and you can modify or rewrite the menu templates as you like; the automatic plugin upgrades won’t overwrite your customizations;

* if you deactivate the plugin your menus will disappear, and if you reactivate the plugin your menus will reappear unchanged.

[back to Contents]

Upgrading procedure

Case 1

If you are upgrading to the current version from Menubar 3.1 or higher:

a) From the Plugins administration panel, deactivate the old Menubar version;

b) Delete the menubar folder in wp-content/plugins;

c) Download the plugin archive from the WordPress Plugin Directory and unzip it, then upload the resulting menubar folder with all its contents to wp-content/plugins;

d) From the Plugins administration panel, activate the new Menubar version.

These are the same steps performed by the automatic upgrade procedure, so you can safely run the automatic upgrade. In both cases, all your template customizations won’t be affected.

Case 2

If you are upgrading to the current version from Menubar 3.0:

a) Create a new folder named menubar-templates under wp-content/plugins;

b) Move the Basic and Suckerfish folders with all their contents from wp-content/plugins/menubar to wp-content/plugins/menubar-templates; do the same for all the other Menubar templates you have installed;

c) From the Plugins administration panel, deactivate the old Menubar version;

d) Delete the menubar folder in wp-content/plugins;

e) Download the plugin archive from the WordPress Plugin Directory and unzip it, then upload the resulting menubar folder with all its contents to wp-content/plugins;

f) From the Plugins administration panel, activate the new Menubar version.

Steps c) through f) are the same steps performed by the automatic upgrade procedure, so you could manually perform the steps a) and b), and then run the automatic upgrade.

Case 3

If you are upgrading from Menubar version 1.x or 2.x, just delete the menubar folder in wp-content/plugins, and perform a first installation procedure of the current Menubar version. Please note that menus built with Menubar version 1.x or 2.x will be lost in the upgrade to newer Menubar versions.

[back to Contents]

First installation procedure

To install the current Menubar version for the first time:

a) Download the plugin archive from the WordPress Plugin Directory and unzip it, then upload the resulting menubar folder with all its contents to wp-content/plugins;

b) From the Plugins administration panel, activate the current Menubar version;

c) From the Appearance administration panel you can now access the new Menubar sub-panel.

Steps a) and b) are the same steps performed by the automatic install procedure, so you can safely run the automatic install. In both cases, before using Menubar, you’ll have to:

d) Create a new folder named menubar-templates under wp-content/plugins;

e) Install one or more Menubar templates, at least Suckerfish (see Menubar templates).

Now you can create your first menu (see next section).

[back to Contents]

Create your menus

From the Appearance – Menubar administration panel you can create, edit, and delete menus. Menus are specified with the following fields:

* Name: the name of your menu; will be used to insert the menu in your theme.

* Template: the Menubar template and the stylesheet you wish to apply to this menu. You can also choose to apply a template without a stylesheet, and in this case you’ll have to provide your own CSS rules, e.g. in your theme style.css file. Please note that not all Menubar templates support multi-level menus.

Important: edit your theme inserting the following line of code where you wish to display your menu. If your menu name is mymenu, the line of code to insert in your theme is:

<?php do_action('wp_menubar','mymenu'); ?>

A good starting place to insert the above line of code could be at the end of the header.php file.

Another way to integrate your menu in your theme is to use the included Menubar widget, which allows you to add a menu in a sidebar or widget-ready area of your theme (only with WordPress 2.8 or higher).

Before looking at your new menu, please add at least one menu item (see next section).

[back to Contents]

Configure your menus

From the Appearance – Menubar administration panel you can add, edit, and delete menu items for each of your menus. Menu items are specified with the following fields:

* Order: indicates where this menu item will be placed. Choices are:

- Before…: this item will be placed right before the item you select.

- Child of…: this item will be placed as a sub-item of the item you select; please note that to display a multi-level menu you’ll need a multi-level Menubar template like Suckerfish.

- After…: this item will be placed right after the item you select.

You can later modify the ordering of your menu items using the Edit command or the up and down arrows in the menu items list.

* Name: specifies the name of this menu item as shown in the menu; for instance Home, About, News, Gallery, and so on.

* Type: specifies the menu item type. Each type may require additional fields, as shown below:

- type Home: this menu item points to your main blog page (the latest posts list).

- type FrontPage: this menu item points to your static front page, if configured in WordPress Settings – Reading, otherwise it’s the same as Home.

- type Heading: this menu item is non clickable, and could be used in a multi-level menu as the parent of a set of sub-items.

- type Tag: this menu item points to the tag archive specified in the Tag field.

- type TagList: this menu item generates a menu sub-item for each tag archive, excluding the tags specified in the Exclude field. Please note that, if you add sub-items to a TagList item, they will be ignored and won’t be displayed in your live menu.

- type Category: this menu item points to the category archive specified in the Category field.

- type CategoryTree: this menu item points to the category archive specified in the Category field, and automatically generates a menu sub-item for each sub-category, excluding the categories specified in the Exclude field, and up to the level specified in the Depth field. Any categories selected in the Headings field will be made non clickable. Please note that, if you add sub-items to a CategoryTree item, they will be ignored and won’t be displayed in your live menu.

- type Page: this menu item points to the static page specified in the Page field.

- type PageTree: this menu item points to the static page specified in the Page field, and automatically generates a menu sub-item for each sub-page, excluding the pages specified in the Exclude field, and up to the level specified in the Depth field. Any pages selected in the Headings field will be made non clickable. Please note that, if you add sub-items to a PageTree item, they will be ignored and won’t be displayed in your live menu.

- type Post: this menu item points to the single post page whose post ID is specified in the Post ID field.

- type SearchBox: this menu item displays a search box with an optional submit button whose text is specified in the Button field.

- type External: this menu item points to the static URL specified in the URL field.

- type PHP: this menu item points to the URL returned by the PHP code specified in the PHP code field (see Meta links with Menubar 4.9 for examples).

- type Custom: this menu item is custom built with the HTML specified in the HTML field – for experts only!

For each menu item you can also specify two optional fields:

* CSS class: the optional CSS class you wish to apply to this menu item (useful for customizations, see later); multiple classes can be entered, separated by spaces.

* Attributes: the optional HTML attributes you wish to apply to your menu item (e.g. target=”_blank”, or title=”click me!”); multiple attributes can be entered, separated by spaces.

[back to Contents]

Menubar templates

Menus built with Menubar are styled using Menubar templates.

A Menubar template is a folder inside the wp-content/plugins/menubar-templates folder. Each template folder contains a PHP script named wpm3.php, one or more stylesheets, and possibly a few images.

To install a Menubar template:

a) Download the template archive from the Download page and unzip it;

b) Upload the resulting folder, without renaming it, to wp-content/plugins/menubar-templates.

To apply a Menubar template to one of your Menubar menus:

1) From the Appearance – Menubar administration panel select the menu to be styled, and click Edit Menu;

2) Select the template and the stylesheet to apply, and click Update Menu. Done!

To customize a Menubar template you can edit the CSS rules contained in one of the stylesheets of that template. As already mentioned, you can also apply different CSS classes to individual menu items in order to better control the presentation of your menus.

[back to Contents]

Conclusions

I hope you like Menubar. If you have suggestions for improvement, if you need some help, or if something is not working for you as expected, just write me a comment (please be patient if I can’t answer immediately).

Happy menus, with the WordPress Menubar Plugin!