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 Wayne,
I’m glad your Menubar is working now. At the moment I don’t have a donation link in place, but thank you very much for your offer!
@andrea
andrea,
thanks again
wayne
Problem: I have downloaded two templates and uploaded resulting folders to wp-content/plugins/menubar-templates but when I click on menubar backend option I see message “No Menubar templates were detected in wp-content/plugins/menubar-templates.” What to do?
Sorry, my bad, – it was permissions issue
@yury
Good, I’m glad you found the solution!
Hi – I really like Menubar but having an issue I hope is easy to resolve. I’m attempting to clone my site, and can not figure out how to copy menubar from site 1 to site 2
please advise.
@Todd
I did find Andrea advice on wordpress.org forum — just need to copy menubar option_value from wp_options table in the database. fortunately I am using identical category/page/ ID’s so it worked fine…
Hi Todd,
Yes, that’s the way of doing things at the moment, because an export – import feature is not available yet.
Hi
I am trying to get the menu bar to appear directly below the header image in Twenty ten but it only works correctly when placed right at the bottom of the Header.php template. If I try to place it any higher up it messes up. Any ideas?
Hi Andy,
A good way to add Menubar to your Twenty Ten theme is as follows.
Open header.php, locate line 86:
</div><!-- #access -->and insert these two lines:
</div><!-- #access --><div style="clear:both;"></div>
<?php do_action('wp_menubar','name-of-your-menu'); ?>
If you wish to remove the original Twenty Ten menu, you have to delete line 85:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>@andrea
I love you!!!!
Thank you so much
Andy
@andrea
Andrea, a second question. How easy is it to “tweek” the code so the menu bar is the same width (190) as the default header width in twenty ten? I have tried changing the values in the relevant .css file but to no avail.
@andy
The current CSS uses a left and right margin of 10px. If you search for that in the CSS file and make it 0px, you should get what you are looking for.
Thanks Andrea – I’ll give that a go
Love MenuBar (4.10) – it does just what I want – but not in Android. Using built-in browser, Opera or Skyfire – behaving as Desktop or Android.
I can see, but not select, the menu entries.
Any thoughts?
Hello David,
Thank you for your feedback. I’ll look into that problem, but since I’m not very familiar with Android, I’ll welcome any help from you readers.
Not sure what might be causing this, I have a site, (arpca.com) where the menubar is not displaying correctly in ie 7– for starters the menu only shows up on mouse over, and the drop down does not overlap the stuff under it. Do you have any idea what might be causing that?
Hi Dan,
The standard Menubar CSS is carefully crafted to work around a number of IE bugs, but you are using a custom CSS, so probably one of the many IE bugs is affecting you. You could try to compare your CSS with the standard Menubar CSS, to find a possible solution.
Hello, Im using the Twordder 1.4.3 theme and want to add my http://www.cssmenubuilder.com/build-horizontal-menu-step-4 MENU BAR to my theme DIRECTLY below my header image….having a hard time. Any help is appreciated.
my website is http://www.floppingout.com
Hi Andrea,
I’m using the Atahualpa 3.6.7 theme and can’t get the menu bar to expand the whole width of the header. Ideally I’d like it to sit just underneath. I’ve looked in the CSS and tried the various suggestions above…any ideas?
Thanks
Hallo..i have a twenty ten template and i use Menubar.
How can use a sub-page? is it possibile only with another tamplate ( no twenty ten ) ?
The error is:
“* Children items of CategoryTree, PageTree and TagList types are ignored”
@Nick Spano
Hi Nick,
I need to see the menubar on your site, or on a test site of yours, so I can give you some suggestions. Otherwise I’ll have to set up a site exactly like yours, and that’s a bit impractical. Please let me know!
@Emma
Hi Emma,
I think you put the menubar in the central column area, you should put it in the header section instead. Please let me know if that fixes your problem!
@Roberto
Hello Roberto,
The error you get means that a CategoryTree item automatically generates its sub-items, so you don’t need to add them explicitly. If you need more details, you could have a look at the Menubar documentation, in English or in Italian.
@andrea
Hi Andrea,
I’d put it under the header.php section in my css but placed it under the ‘main body’ tag which is maybe where why I see it in the central column. However, I’ve tried moving the code up but it only serves to put the menubar right at the top of the page – where my History
@andrea
Hi Andrea,
Thanks for the reply and sorry for the above unfinished comment!
I’d put the code under the header.php section in my css but placed it under the ‘main body’ tag which is maybe where why I see it in the central column. However, I’ve tried moving the code up under the ‘header’ tag in my header.php but it only serves to put the menubar right at the top of the page – where my “History” and “Contact Us” tab is on the site…do you know where exactly I’d need to place the code to get the menubar literally just underneath the header image?
Thanks!
I am using Superfish with SSF green. On the theme I am using there is a border above the menu of about 10 pixels. Is there a way to get rid of this in the CSS?
Hmmm. just noticed something.
The categories menu dropdown works in the root directory, but as soon as I choose and click on a category, the individual categories no longer show up in the menu when I hover over it, only the button name.
Hi Nicolai,
Yes, you can change the CSS to remove the extra border. Re your second question, I think there is a JavaScript conflict with your theme.
Sorry I don’t have a more detailed answer, because that would require a careful study of your theme.
Hi Andrea!
Congratulations for your MenuBar. I’m using it, and I had a question: How can I display only categories with posts? I mean, I have certain categories that still haven’t posts, and I’d like to hide from the menu.
Thanx!
Any way to convert the menu php code as a shortcode to insert into a page or post? I know of WP plug-ins that allow php execution but concerned about security. Thanks
Hi Enaut,
At the moment you can only exclude them manually in the menu item edit page.
Hi Todd,
Sorry but that feature is not available yet, I’ll add it to my to-do list.
Great SW.. thx. Have a couple of minor issues that I would appreciate your insight and if possible help on:
1. In some cases, I use the dropdown to go to external URL’s (which is easy with menubar). Question/issue is on the presentation layer:
a. In the dropdown, width is only a couple of words wide, so that if your Title for the URL is multiple words long, it becomes vertically large, and limits the visible number of selectable items visually. Is there a way to widen the frame of the drop down menu items?
b. The next question is not really your issue, but I would be interested in your insight. When my webpage links to an external url, it leave my website with no way back like a “HOME” page button.. (use back arrow). I tried iFrame (am using WordPress with PlatformPro), but can’t seem to make it work. Ideas?
Hi Chuck,
I guess you are using the Superfish template. If so, you could see Question 2 in Superfish Questions & Answers.
A way to facilitate coming back home from an external site could be to open the external site in a new window, so when the new window is closed your old window will be there.
@yury
How do you fix that?
Hi, Nice addon. However i have a question. How do i exclude the top page from showing. I exclude it from exclude drop down list but it does not work. Here’s what i m trying to do. I have Home page under which i have “About Us” page which in turn has two child pages. There’s another FAQ page under Home page. I want to show only “About Us” and “FAQ” in my vertical menu. Is this possible? I exclude Home from the list but it always start from Home. Please help.
Hi Arvind,
Try using the ‘Page’ menu item type instead of the ‘PageTree’ type to build your menu, and use the ‘Child of…’ option when adding children pages. That should do the trick!
@andrea – Thank you andrea. I think i just needed to learn more about ‘how to use’ this plugin. I learned that i could add multiple pageTree for a single Menu, that’s what i wanted. It is working smooth right now. Great plugin!
Hi Andrea, I just want to leave a statement to thank you for getting back to me so quick with answer to the question I posted. Steven
@Steven Dowell
Thank you for your feedback!