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!
Hi everybody,
I don’t understand why my menu items come under the page content.
Here is my site : http://www.coupsde.com
I have Menubar 4.6 and wpm-Superfish on WordPress 2.9.1
I have think that it was the z-index that was not good, but i’ve tried different ways and nothing was OK.
I need help because I don’t have enough knowledge in CSS.
Thank you.
Hi Coups,
that’s an IE bug, your page works fine in Firefox, Opera and Chrome. Anyway I’ve just updated the Superfish template with a workaround, you can download it again and try the new version. Please let me know if that helps!
Thanks for the speed of response. In my stats i saw different browsers with the same I.P. address and I was thinking it was somebody looking for the solution. I try the new version right now.
Andrea, you are the best.
Maybe you are the Lucky Luke of JS and CSS … ?
con grande piacere (I wish Google is Italian)
THANK YOU !
Very glad the problem is solved! By the way, you can align your searchbox to the right entering the class name right in the CSS class field. Ciao!
Hi. First thx for this plugin.
My question: I wanted to insert something like “<a href="”>Se déconnecter” in a Custom HTML Field but it doesn’t work because PHP is not recognized… Have you a solution for that ?
Thx !
That was an option that i wanted to have because i prefer the menu and the search box each one at each side.
i’ve entered “float: right;” under the “.ssf-yellow form {” line in “ssf-yellow.css”, do I have done it correctly ?
If I can give you an idea for future version : would it be possible to have a radio button for the search box on the left and the menu on the right or the contrary ? I like the menu on the right and you can have a look at it on another site of mine : http://www.sportscenter.pro wich is powered by Spip.
Thank you for your availability and your kindness.
To Yiannis:
Sorry, the Custom HTML field doesn’t accept PHP (yet), I’m adding that to my to-do list. If you wish to add a Logout button to your menu, try using an External type item, putting in the URL field the logout URL of you site, e.g.
http://www.example.com/wp-login.php?action=logout
To Coups:
I’m afraid I wasn’t clear, you don’t need to change the CSS file, but the CSS class field (in your Menubar admin page, in the Add Item or Edit Item form). So you can already get the searchbox on the left and menu on the right, just enter the class name right in the CSS class field of each menu item you wish to align right.
I’m sorry, i begin with Menubar and i didn’t understood corectly.
That’s all right now, it’s wondeful, i have the search box on the left and my menu on the right.
I was right when i was saying you are the Lucky Luke of JS and CSS. For Superman, we will wait a while
Something i had problem to get used with it : is it possible to have the Menubar admin page opened with the active menu selected. I was trying to enter “right” for 10mn before i’ve realised i was modifying an inactive menu ! Maybe sometimes i need glasses …
Hi Coups,
I’m a long time fan of Lucky Luke, so thank you for that! And I agree with you, the menu should be selected in a more clever way – I’ve added your suggestion to the Menubar to-do list.
@andrea
Sorry Andrea but I have the same problem, I downloaded the new version of Superfish, installed on WP 2.9.1 with menu 4.6 and it doesn´t work in FF, Chrome, Opera and others.
http://www.test.ivirtual.la
Hope you can help me.
Hello Rich,
that’s because the menu is inside the
<div id="cabezal">and in style.css that div has the property
overflow: hidden;Try deleting the overflow property, and it should work OK.
Amazing! Thank you so much!
Hi Andrea,
I’m trying to colour code my menubar. I’ve set the various styles in the control panel and begun replacing the default styles of ssf-red.css (superfish dropdown) with my own: red, orange, green etc. To do this i’ve commented out the original background properties and made another set for red, orange, green etc.
It works ok with the li and hover classes but the page hi-lighting is broken and none of the dropdowns are changing. Is there a proper way to use these styles to override the defaults?
Hi Nick,
another reader has made a color coded menubar using different id attributes for each menu item, so I think it’s possible to achieve that result. To help you out on your menu, may I have a link to your testing page?
@andrea
Thanks for the quick reply! I would send a link but i’m building the site locally in MAMP at the moment. I put a copy of the stylesheet here http://www.nickweekes.co.uk/test/ssf-red.css if that helps. There are comments in the Demo Skin area where i’ve been changing stuff.
Hello!
Despite my theme (vina 1.2.1, http://wordpress.org/extend/themes/vina) includes a call to the wp_head() function in the header.php, I do receive the error message (WP Menubar error: Function wpm_display_Suckerfish() not found!)
I don’t get how to solve it
Hi andrea, i have a problem: i want to change the order by which categories trees are shown, with the previous version i managed to do the trick by customizing calls to wp_list_categories in wpm-menu.php (as suggested in a previous comment) but after the update to v. 4.7 it do not work any more, any idea?
thanks in advance! and thank you for the wonderful plugin ^_^
@Antonio
Hello Antonio,
I need a link to your site to debug the issue, please let me know!
@pier
Hi Pier,
Menubar 4.7 no longer calls wp_list_categories, so to customize the category order you need to modify the ORDER BY clause in the wpm_get_cats function (file wpm-db.php). I plan to add the order option to the admin panel in a future version – thank you for your feedback!
cool
thank you very much now i know where to hack ^_-
I’m having the same problem as Antonio. Here is the URL: http://ericksonian.com/wordpress/
@nick
Hello Nick,
I’m not sure if you wish to simply change the Superfish colors, or if you wish
to have a different color for each menu item. The first option is explained in the comment #655, while the second option is probably more difficult, and I should experiment with it to find a solution. Please let me know!
@Antonio
Hi Antonio,
the reason for the error was the name of the template folder, that should not be renamed. I’m reporting it here because it could be useful for new readers. Thank you for your interest in Menubar!
I’m working on a new site, and on my test-site I’m trying out the menubar-version 4.7. But I got an error: Function wpm_display_Suckerfish() not found. I checked the file wpm3.php, and found the line 75: function wpm_display_Suckerfish_41 ($menu, $css)
I took away _41 and now it’s working!
Hello Richard,
the original folder name was Suckerfish_41, but it probably got renamed in the unzip – upload process. Since the template folder name and the last part of the wpm_display_ function must be the same, you got it right anyway!
Hi Andrea!
Have used Menubar for a good while on theroundriver.com, but am unable to access the admin menu under appearance for wildsideassociates.com. Files are loaded in the right places, downloaded & installed newest version, have Superfish templates installed. No joy.
Any ideas about where I erred?
Thanks again for a nice, (usually) simple plugin!!
Brian
Hi Brian,
I have a few suggestions to try and find the reason of that strange issue.
1) Deactivate all the other plugins and activate the default theme. Does Menubar work? If yes, reactivate your usual plugins and theme, one at a time, and note which one is not compatible with Menubar.
2) If step 1 didn’t find anything, put the following line in wp-config.php:
define('WP_DEBUG', true);then deactivate and reactivate Menubar, noting any error printouts produced.
Please let me know your findings!
The theme is called “Motion” and had a navigation menu that I wanted to replace with Menubar. Think the theme nav code entries could be in the way?
I’ll play with it later tonight!
Thanks!
Andrea,
Alright! I tried everything you suggested in 1) above, nothin’.
I don’t have a file “wp-config.php” Must I create one and simply insert the code you specify, or am I missing something (happens alla time!)?
Thanks for your kind help!
Brian
Andrea,
Okay, I keep forgetting that the Codex is my friend! :^)
Here are error messages occurring when I reactivated Menubar:
Notice: __ngettext is deprecated since version 2.8! Use _n() instead. in /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php on line 2970
Notice: __ngettext is deprecated since version 2.8! Use _n() instead. in /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php on line 2970
Notice: __ngettext is deprecated since version 2.8! Use _n() instead. in /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php on line 2970
Notice: __ngettext is deprecated since version 2.8! Use _n() instead. in /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php on line 2970
Warning: Cannot modify header information – headers already sent by (output started at /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php:2970) in /home/theroun1/public_html/wildsideassociates.com/wp-includes/pluggable.php on line 868
Warning: Cannot modify header information – headers already sent by (output started at /home/theroun1/public_html/wildsideassociates.com/wp-includes/functions.php:2970) in /home/theroun1/public_html/wildsideassociates.com/wp-includes/pluggable.php on line 868
No clue what that means!
Best regards,
Brian
@andrea
Thanks, man!!! Worked like a charm!!!
@Brian
Hi Brian,
are theroundriver.com (where Menubar works) and wildsideassociates.com (where Menubar doesn’t work) on the same server? The errors you got seem related to your server or to your theme. If you activate the Kubrick default WP theme on wildsideassociates.com, does Menubar work?
Andrea,
Nope, no Kubrick menubar either.
Yes, both are on same server, but Wildsideassociates is an “add-on Domain” within my hosting account. All other features and plugins work fine, but I’m unable to get menubar or WPML menu to work yet.
Crazy, huh?
brian
Andrea,
There was a bunch of space and some code from the theme’s navigation menu I missed in Header.php.
I think I have it now. My problem is I’m not sure what needs to remain and what I can delete and still keep what I want. Need to start making local copies of the files so if I mess up I can get back to where I started, I suppose.
Thanks for your suggestion that it must be in theserver (knew that wasn’t it) or theme somewhere!
Ciao!
Ciao Brian,
I see Superfish green on your site, so you succeeded in integrating Menubar. I’m glad you solved the issue, and I wish you good luck with your projects!
I am using your plugin and have found it very good.
However, why do private static pages appear in the menu? Is it possible to change the code to ensure that they are excluded.
Hello Steve,
that’s a half-baked feature, it was intended to show private pages, but only to authorized users. Currently it doesn’t work neatly, because unauthorized users are shown the menu item, but get a 404 error if they click it. I plan to fix it soon, in the meantime you could just “Exclude” those pages from your PageTree menu items. If you wish to edit the code, look for the function wpm_get_pages() in wpm-db.php, the change is very easy.
Ciao Andrea,
Congratulations for the plugin… beautiful and useful. But I have a problem. I use the theme Suckerfish_41, and I notice that the text lenght in the menu is limited, I have some long page-titles that I want to show entirely in the menu voices. How can I resolve this problem?
Grazie per l’attenzione,
Ciao
Ciao Andrea,
if you have long menu names, you could find the Superfish template useful. It wraps long names, and the item width can be tailored (see Superfish Questions & Answers).
Hello Andrea,
I tried to replace menu in my new project http://www.stirkl.ic.cz with your useful Menubar , but I only got message: “WP Menubar error: Function wpm_display_Basic_46() not found!”
Header.php includes a call for wp_head, I also checked template folder names. Can you help me to solve this problem?
Many thanks in advance.
Hello Petr,
the theme “I still do” doesn’t have a correct wp_head() call, so I just sent you a patch. Replace your theme header.php file with the modified version I sent you, and Menubar should work fine.
thank you for quick response, but suddenly I didn´t recieve any patch. Please try again:
sirkl@seznam.cz
@andrea
Hi Andrea,
Any chance I can get that modified SF template?
Cheers.
Hi Cobbles,
I sent you that template, it’s still in beta testing so please let me know if it works for you!
@petr
I’ve resent the email to you, please let me know if you receive it this time!
using ssf-yellow.css.. installed typical nav bar with home, 5 (Pagetree) pages, and external URL individual menu items. The first three buttons in the menu (Home, page 1, page 2) display properly. The next three (page 3, page 4, and page 5) have a bright red (#cc0000?) color without hovering then take on the appropriate color when hovering. You can view the URL using the domain name of my email and then adding a conical insider. in front of the domain (http://insider.neXXXXX.com).
Bug? IE8? Me?
TKU
Hello Jake,
I think there was a missing detail (the a:link selector) in the Superfish CSS. I have updated the template, so please try downloading and using the new version. Thank you for your feedback!
@andrea
sorry, got any email from you… another emails: kangoo@mybox.cz or info@naturvia.cz
many thanks for your kind help.
Hello Petr,
I sent you a few emails again. Should you not receive any of them, you can patch the I still do theme yourself. Locate in header.php the line:
add_action('wp_head', 'your_function');and replace it with:
wp_head();If you wish you could also inform the I still do theme author of this patch.
Hey Andrea!
I was wondering if there’s a way to modify menubar-template in such a way that it automatically includes page’s IDs in class attribute or some other. I’ve tried the %id but it seems to be some other, internal id than the WP page id. I need it to for targeting with JavaScript.
Thanks in advance