WP Menubar documentation
[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!
Hello Chodorowicz,
unfortunately the page ID is not currently available to templates. You can add an id to menu items via the Attributes field, but that doesn’t work with a PageTree type, so you have to build your page tree one page at a time with the Page type – feasible if you have not so many pages.
Anyway I’ve made a note of your suggestion for my to-do list – thank you!
Hi andrea, first of all thank you very much for your great plugin. I really think it should have been included in WP core instead of the Woothemes.com’s custom navigation framework. I have a few suggestions to wish-list:
1) Add a class to the current item being displayed. There is “selected” already but “current” would be nice for CSS – since li.selected:last-child does not work in all browsers.
2) A less important wish is to inlude a part of a menu, for example items no. 2,3,4 of a menu which has for example 7 items in total.
Thank you
Hi Radovan,
I’d like to know more about your suggested features and the way they could be used, could you please email me with further details? Thank you for your feedback!
@andrea Hi, I have just sent the e-mail.
Hi Andrea
I’ve nearly finished migrating an html website to http://evomed.pmcsa.org.nz and have used your wonderful menubar dropdown menu (v4.7) and it works fine on FF, IE8 and IE7, but the second level of dropdown isn’t displaying for me on IE6 for “the Book”. Is there any guidance you can provide to assist me to overcome this problem? I’m thinking that there may be some JS I can add somewhere to solve it, or maybe some margin and padding refinements that I need to make?
I hope someone can help.
Cheers
Stu
Hi Stu,
unfortunately that’ s a problem of the Suckerfish_45 template I haven’t been able to solve. If you switch back to the Suckerfish_41 template, that should work fine in IE6 too.
Thanks Andrea
Perfecto!
Hello Andrea,
For some reason I cannot get a multi-level menubar. I am using Suckerfish_45 so that is okay. I made the page a subpage of a parent page inside the pages function. In the menubar area I selected the Parent page as a Pagetree with subpages, but didn’t mess with the Exclude functions etc. because I didn’t think I needed to. I selected the code and placed where I should and the drop-down menu simply won’t work.
Any suggestions as to what I may be doing wrong?
Thanks!
Hi Andrea…
I love these menu bars, but I have done everything as stated and I still cannot get my menu bar to appear…
I get this message:
No Menubar templates were detected in wp-content/plugins/menubar-templates.
To complete your installation, please upload at least one Menubar template (see instructions).
Yet…here is what I’ve uploaded into wp-content/plugins/menubar-templates:
b-blue.css
b-green.css
b-red.css
green.gif
wpm3.php
that is in the folder. So, why doesn’t it detect it?
If you can, I would love some help as I would really like to install one of these.
Thanks in advance for your time and trouble,
Kathy
Hi Kathy,
the menubar-templates folder should contain the template folder (e.g. Basic, or Basic_46, according to the template you downloaded) and the template folder in turn should contain the individual template files you mentioned. Try that and your Menubar should work fine!
@Stacey
Hello Stacey,
I can see your subpages under ‘Sister Sites’ in Firefox, buy not in IE. So I think that’s another IE issue – try moving the grass image elsewhere, maybe IE places the menu items behind the image… Please let me know if that helps!
Hi Andrea,
The subpage is for the About Us page and is not showing up at all in any browsers. I was unclear as to the grass image. I think you thought I was having trouble with the Sister Sites dropdowns but those are working fine. It’s the subpage under the About Us page, which is not showing up at all. I have no idea why not. Does it have anything to do with Suckerfish_45? I read that it does have multi-level functioning.
Thanks for your responses!
Stacey
Hi Stacey,
sorry I didn’t notice the About Us subpage! That’s a z-index problem, please locate the line:
z-index: 9;in sf-grey.css, and change it to:
z-index: 99;That should do the trick!
Hi Andrea,
I am using menubar plugin successfully since I installed it and like it, but my problem is as follows:
I am copying my test site from localhost to www live site. After I copy my database to there, everything works fine but the menubar: my menu did not come along!
What else should I do?
Thanks!
Hi Josef,
the Menubar data are in the wp_options table. To copy them from the old database to the new, you can use phpMyAdmin. Open the table wp_options in the old database, and locate the record with the value menubar in the option_name column. Open that record, and copy the value of the option_value field to the same location in the new database.
If that doesn’t work for you, the only way is to manually rebuild the menu in the new site.
Hi Andrea,
the issue is not that simple.
1. I copy the old database to the new one.
2. With phpmyadmin I check the wp_options table / record menubar in the new database – everything OK, all menu data is there.
3. As soon as I enter the new site I immediately see no menubar displayed. I log-in to the administration of the new site and enter into appearance/menubar – no menubar present.
4. I check the table with phpmyadmin in database again – really! no menubar data!
Cheers!
Josef
@Stu
Hi Andrea
Following your recommended switch back from Suckerfish_45 to _41 everything is working fine on http://www.evomedicine.org except that in IE7 when I click on a “static” page like “Projects” or “1 Fundamentals” (a drop down from “Book”), the menus that drop down stay stuck in their dropped down position (rather than retracting as they do on all other browsers).
If you know of a fix for this I would welcome it.
Cheers
Stu
Hello to every one, I use menubar, cool plugin.
In my chrome browser it apears as I want, but when I try to check my webpage in IE7 or ie8 when I hover on menu and the should be some submenuse they are not there.
They stay on left side of the window, several screens left from the right place.
which part should I change to correct this thing.
http://www.labtools.co.il
Can this plugin allow rollover effects with each link? In an HTML page, I tend to use one image that has a row of “up” states, and a bottom row for the over/hover effect. Each item gets assigned an ID or class and calls up the background image in one “window” for the default state, and then locates different coordinates in that same image for the over/hover state.
How can they be managed, if at all, using your plugin?
Hello WebmistressM,
you can add an id to a menu item using the Attributes field, then you have to code the CSS rules by hand. If you need some special HTML generated, please send me a sample so I can look into it.
@Stu
Hi Stu,
that’s another IE bug, I’ve already uploaded a workaround. Please try the new version of Suckerfish_41, and let me know if that helps!
@Sash
Hi Sash,
I’ll need a few days to look into this problem, thank you for your patience!
@Josef
Hi Josef,
that’s really strange, because Menubar never deletes its data if not requested explicitly with the Reset Menubar command. Could you try your DB move again, without Menubar on the destination site? Are the data still there when you go live? And what happens if you later activate Menubar? Thank you for your feedback!
@andrea
Brilliant thanks Andrea,
We’ll give it a thorough testing tomorrow, but it looks to me that it is now working perfectly.
You’re a genius!
I am having issues with my menubar floating under my flash Gallery on the site I am developing, I love the plugin and it works well but does anyone know of a fix I can use on my site to prevent content from being hidden by the gallery
http://jordanskatingclub.com/carnival-2010 is one of the pages the issue is occuring on
Hi andrea,
I have installed your menubar theme and Suckerfish_41 on my site using the Atahualpa theme. I am not using the logo area just the header graphic area but have moved the existing menubar to appear below the graphic area using this configuration (%bar1 %image %bar2 %pages) in the Configure Header Area section of Atahualpa’s theme options. When I activate your menubar it appears above the graphic area and the existing menubar remains below??? Is there a specific place in the header.php that I need to replace the old menubar with yours? Sorry, this may appear dumb but I am very new to all this.
hope you can help
Amy, Scott,
I’m going to test your configuration, and I’ll need a few days. Thank you for your patience!
Hi there! I’ve downloaded and installed Suckerfish_41 and it looks great on Mozilla and Chrome, and totally different and really bad in IE. How can I fix the problem in order to let people with Explorer see it?
Many thanks!
Francesca
really like your menuBar
I’m using the theme hybrid and wishlist member pligin. I am creating a membership blog and would like to hide the menuBar or certain parts of the menuBar on the front page so that these links are not visible until the user has logged in, how can I do that?
thanks
Lee
Hi Lee,
you can hide the whole menubar to non-logged-in users if you replace the standard call to menubar:
<?php do_action('wp_menubar','mymenu'); ?>with
<?php if (is_user_logged_in()) do_action('wp_menubar','mymenu'); ?>@Francesca
Hi Francesca,
do you have the same problem with the Menubar demo site? Please send me your URL so I can have a look.
Thank you Andrea, did the trick for me.
Lee
I’m using suckerfish_46 with css, on the NavBar I would like to have 2 menus to the left and 2 to the right and nothing in between, at least for the time being, how can I accomplish this
thanks
Lee
Hi Lee,
if you enter the class name right in the CSS class field for a menu item, that menu item will be right aligned instead of being left aligned.
Hi Andrea
I’m using your wonderful drop-down menu on another site (currently at http://coco.prohibitionbigband.co.nz ) which is displaying as I am wanting on all browsers, except that on ie6 and ie7, the copy behind the drop-downs is showing through behind the submenus. I tried replacing the Suckerfish_41 template with the most recent one, but the problem continued to be there. I also tried replacing the css with the css of another of my sites that works perfectly, but again no joy. I’ve also looked through dozens of pages of your site’s posts, but didn’t find the problem or the solution. I would welcome your advice (or a steer to previous advice you have given on my dilema).
Thanks
Stu
I would like to link multiple sub-menu items to external url’s (all different). I can’t seem to figure out how to do that. Any help?
Hi Andrea,
First off, thanks for the terrific plugin
We have a pretty big site (around 250 pages), and the plugin appears to list each page in the HTML output. This has become a problem since we’re using a Google Custom Search Engine (CSE) and it’s finding all the HTML associated with these links and muddying up the search results.
Is there any way to prevent every URL from being included in the HTML output of every page?
Thanks!
@TCBigPants
You could create a parent item with type “Heading”, then add more menu items with type “External” under the former one (select “Child of” in the “Order” field).
@Tom
Hi Tom,
if you need to control what goes into a “PageTree” type item, you could use the “Exclude” field.
Hi, I just installed the Menubar plugin. Created a basic46 menu to try out and I’m getting the Error: WP Menubar error: Function wpm_display_Basic46() not found!
This is a brand new blog that my boss hasn’t decided on a theme for yet so right now it’s just the WordPress Default 1.6 Theme. I’ve checked and it does call wp_head().
I’ve tried moving the Menubar code around and sometimes the Error disappears but I still don’t see a menubar. What’s wrong??
Thanks,
-Jess-
Hi Andrea,
Been working on this menu bar all night and have it so close to what I am wanting but can’t quite tweak it right.
I want to have the rollover be an image instead of a background color and everytime I try to replace the color line with the image line the whole thing breaks and I have to revert to my original again.
I am using Suckerfish 41 with the grey-css files. I modified the sf-grey.png file to be the colors that I want and cut the length in half to make it fit the buttons better. That being said the rollover image is exactly the same image just with the graduated fading reversed. So it does need to repeat like the grey-css.
Rollover image is titled grey-css2.png
The other thing that I can’t figure out (and it may be in my theme’s formatting) is how to get rid of the strip of green immediately under the menubar. I have already removed all the margins I could find in your code…? This is my first blog so any info on where that may be in the code (yours or theme’s) would be great.
Thanks so much for such an amazing piece of work you have done for us!
Dani
Side note:
Just realized it displays as the “broken” version in internet explorer version 6….but is fine in FF and Google Chrome….that would be great if we could fix too…..grr.
“i love my blog, i love my blog, i love my blog”
thanks so much!
@Jess
Hi Jess,
I need to look at your site to understand the problem, could you send me the site URL?
@Dani
Hi Dani,
modifying the Suckerfish CSS, and without disturbing old browsers, is not simple as you found out. Unfortunately I don’t have a solution ready for your problem, but I can help you to get rid of the green strip under the menubar. It’s an empty
<ul></ul>present in your theme (or generated by another plugin), right after your call to Menubar.
@andrea
Where is the “exclude” field located? Is that a function of the plugin, or of WordPress itself?
Any specifics would be appreciated…thanks!
Hi Tom,
when you select CategoryTree or PageTree in the Type field, you’ll see a little spinner image on the field side, and then the specific CategoryTree or PageTree fields, including the Exclude field, will appear under the Type field.
FYI
In the Atahualpa theme the theme styling controls the colors of the text and will give different colors to “unclicked” hyperlinks i.e. all your page names when a new visitor comes to the site.
I only caught this because I added a new page and it was in the hyper link color.
To fix:
Add:
A:link {color: #FFFFFF; text-decoration: none;}
A:visited {color: #FFFFFF; text-decoration: none;}
A:hover {color: #FFFFFF; text-decoration: none;}
to the HTML inserts for the header area under Add HTML/CSS button
Also you don’t need to modify the header.php file to get it in there, just go to
Style Edit Header Area
and add to the configure header area
Mine looks like this:
%image
(This calls the header image and then the menubar)
If you get a space between your header image and the menubar go into Header Image and align the image to Bottom Center.
Thanks for all the help!
Dani
Should have specified that a little more…..and it killed the formatting:
In order to get the menubar into the Atahualpa theme you don’t need to modify the header.php file as previously suggested. Just add the
” ”
without the parentheses around it
to the configure header area
Lol. so much for trying to help…..you need to insert the code that says “php do action” that is customized for your menubar when you create it.
This is the code that you would insert into the header.php file
You can just put it into the editor instead of messing with the file! ok!
I’m done. Message me off my site at http://www.theadventurebite.com if you need more clarification on this.
Peace!
Dani,
thank you for your feedback. I’m sorry WordPress eats the code in comments, and you had to retype!