WordPress Menubar Plugin
![[WP Menubar Plugin]](/images/wpm-plugin.jpg "WP Menubar Plugin")
In an older post (WordPress navigation bar howto) I tried to explain how to build a simple horizontal menu in WordPress. While that little tutorial is reasonably easy to follow, it requires modifications to the theme you are using, and this way the menu becomes part of the theme. If you switch themes, you have to start all over again and rebuild your menus.
So I started writing this plugin. Since a plugin can be activated independently of themes, using a plugin you can change themes without losing your work on the menus. And now, after many trials and errors, the WordPress Menubar Plugin is ready. It builds one or more menus for you and has additional features like dynamic highlighting (the currently selected menu entry is highlighted).
I hope you like this plugin (Download). If you have suggestions for improvements, if you need some help, or if something is not working for you as expected, you can drop me a comment (please be patient if I can’t answer immediately).
Happy menus, with the WordPress Menubar Plugin!
Hello Frank,
I’m not aware of this problem, could you please point me to a page displaying the bug, so I can investigate? Thank you for your cooperation!
fsmuscara.org
it works fine in firefox 3 beta, but not earlier versions.
thanks for looking into this.
Hi Frank,
I have found the fix to your problem, and I’ll add this fix to the next plugin release.
In the meantime, you can open wpm3.css in the wp-content/plugins/menubar/Suckerfish folder, find the first CSS rule
#wpmnav {
margin: 10px 10px 0 10px;
…
}
and add this line
#wpmnav {
margin: 10px 10px 0 10px;
…
text-align: left;
}
By the way, you could also play with the first line (margin: …) in order to adjust the width of your menubar. Thank you for reporting this problem!
Hi Andrea,
Once more thanks for plugin and templates, and for your programming style ! Good code for breakfast reading…
I’m using 3.05 beta and i’m wondering wether LC1 template works with that version ?
In fact, I uploaded the LC1 folder (wich contains wpm.xxx while Suckerfish contains wpm3.xxx) under the menubar folder but LC1 doesn’t appear in Edit Menu Template List.
As said earlier, active menu item is not highlighted. Is it easy to fix ? If so could you give an hint please ?
Thanks
Hi Georges,
unfortunately templates for Menubar version 2 and version 3 are not compatible – sorry!
I noticed you are using a page as your main page (as opposed to the usual blog home page), so you should use the ‘FrontPage’ menu type instead of the usual ‘Home’ menu type. That should fix the highlighting problem, please let me know if it works!
Hi Andrea,
In fact I use FrontPage type (I use wp mainly to structure a web site, with a blog).
Then i tried to find out what could be wrong.
I first modified active bgcolor to black in wpm3.css
-> nothing changed…
So I took a look at wpm3.php (under Suckerfish) :
you get an item with readnode then you test the value of item->cssclass…
I then looked at the sql table… The cssclass attribute is always empty…
So, if i understand, $item->cssclass is always set to “” and then $selected is always set to “active” (from wpm3.php:149)
In fact, if i land to the site by its url, everything is active
If I click first level menu item, everything is active (I mean visible first level items)
If I click one submenu item nothing is active…
After several tests, i think that something somewhere went wrong… with javascript…
— for example, I can’t manage to change colors from the wpm3.css file.
Same result with firefox and konqueror…
Any hint ?
Thank you Andrea
cybervirem==Georges
just to avoid pollution by posting directly
Hi Andrea,
This morning, when i connected, all color changes were ok… So opening a window and reload from the same window is different… This is clearly my nav tool…
Active item still doesn’t appear so… I will wait for tomorow morning…
Hi Georges,
sorry for this late answer, I’ve been without Internet access for a few days. Your analysis of wpm3.php is correct, $selected is normally set to “active”, then we examine $item->type and set
$class = $selected;
only if certain conditions are met. This logic works in simple cases, but not always, so I’m trying to find something better, hopefully for a future release. Thanks for your feedback!
Hello, Im trying to make the menu bar extend to the end of my page. Right now, it stops in the middle of page. Ive seen previous post of how to do it in menubar 3.0, but how do it for menubar 2.3? thanks
Hi
I have downloaded it, unzipped it, uploaded it, put it in the right place and activated it but I don’t get any new menubar panel opening up below the activated plug in.
What did I miss?
Hi Lisa,
you did everything right, the new Menubar panel is under the ‘Manage’ tab in your WordPress administration (not under the ‘Plugins’ tab).
Hope you’ll like Menubar!
got it!
you are a clever bunny, it’s fab, thank you!
Interesting plugin but… why do not change the theme path in order to allow to insert the wpm.css file in the current stylesheet directory?
It would be really useful for theme designer.
Hi Davide,
nice idea .. I’ll try to add this in the next plugin release. Thank you for your interest in Menubar!
Hi can you create a drop down menu from a direct link?
or can you create one from a static link that doesn’t link, then goes into a drop down where each item can link off to separate url?
thanks
mark
Hi Mark,
the answer is yes to both questions. When you add a new menu item, you can specify its parent item without limitations.
i worked that out,sorry really stupid of me,thanks for replying.how would i center the menu bar?
thanks
Hello Mark,
the simplest way is to adjust it manually in wp-content/plugins/menubar/Suckerfish/wpm3.css setting the second and fourth #wpmnav margin values, e.g.
#wpmnav {
…
margin: 10px 50px 0 50px;
…
}
If you need to split the menu in two rows, you could build two different menus instead, one for the first and one for the second row.
Hello Andrea,
I am trying to set up the menubar at the site mentioned (www.findingbangladesh.com) and I make the necessary changes in the header.php file but the menu does not appear. =(
I am using the Chaoticsoul theme (v1.3) and maybe the code has to be placed somewhere else? Could you please look into this. Thank you so much! =D
Sincerely,
Adnan
Hello Adnan,
if I add the do_action() line at the end of the header.php file of the ChaoticSoul 1.3 theme, it does work fine for me.
Could you please activate the plugin in your site, so I can look at the problem? It doesn’t seem to be activated right now.
I have added the menu bar to a black buttons template and selected “clear” as the menu style. No matter what I do I cannot change the text buttons from times font or the colours from blue with red rollover. I have changed the clear style sheet and uploaded and nothing happens ..please please help thanks David
Hi David,
I see you found the way to change the style, probably there was an initial cache problem to delay the effect of your changes.
To other interested readers: if you modify the stylesheet of a menu template (that is the .css file inside a menu template folder) and nothing changes, just clear your browser’s cache and try again. That could solve the problem!
Firstly , thank you very very much for this plugin. i am an idiot but i have managed to get the menu up at least.
The trouble is i cannot alter the text size or the positioning even after a refresh of the browser. I am updating the clear css file.
I would say that without doing any changes i did not have the red colour for selected or hover from the start.
would my overall css theme be overriding anything that i amend.
hope you can help , cheers
aaaaah , ok ……Your theme must include a call to the wp_head() function
what kind of syntax do i need to add this piece of code, cut and paste doesnt seem to work.
ok , worked it out , thx
Hello Richard,
I’m glad you have already solved your problem, thanks for using WP Menubar!
Hi there.
I am using 2.3, and the site is http://www.pathsatlanta.org.
I’ve used this plug in to create a vertical dropdown menu. Thus far, everything is working fine in Firefox & Chrome, however in IE I am having issues.
When you mouseover items, I want them to obviously cover the underlying content. I use a transparent background on the main ul/li and when a dropdown happens, I changed it to white color.
It works in Firefox, but in IE, it is still transparent and the text is jumbly-wumbly.
If you (or anyone reading this) has any suggestions, please let me know.
Hello Craig,
I noticed you are now using Menubar 3.0 beta 7, and are customizing the sf-vertical CSS file; I think that’s the right path to follow. If you still need some help, please let me know!
Hi Andrea,
Yes, you are correct – that’s exactly what I am doing. I still need help unfortunately, as it’s still not working properly in IE
I have a series of WordPress-based pages, http://techinhiding.com/ It’s currently on 3.0beta 7. Do you know if there is any way to have a common menubar referenced to the same menu list instead of having to set it up for each separate install?
I really like the menubar, it really helps my navigation through my site. Thanks for your great work!
Hello Tony,
if your WordPress installs are on the same database, with different prefixes, then you can force Menubar to always use the same database table without a prefix.
You need to go through three files, wpm-admin.php, wpm-main.php and wpm-tree.php, and replace each line like:
$table_name = $wpdb->prefix . $wpm_options->table_name;
with:
$table_name = $wpm_options->table_name;
Please let me know if that works for you!
Andrea, Do you think you can help me with this or no? I can’t see the problem in the css at all.
Hello Craig,
I’ve not found the source of the problem yet. I’m going to do some more testing on Sunday, I’ll let you know the outcome!
Update:
unfortunately I’ve not been able to find and fix the Menubar problem with the Blue Mini Theme I think you are using. I am keeping this in my to-do list, and I’ll keep you informed!
Andrea, Thanks for your reply.
My databases are labeled like this: tcardone_wrdp10 for one blog and tcardone_wrdp11 for another. So they aren’t on the same database, but on the same server.
Hi Tony,
with your current settings it’s not possible to share a Menubar, but you could manually copy the Menubar table from the first database to the second.
Should you prefer to actually share a single Menubar, you’ll need to install both blogs on the same database (changing $table_prefix in wp-config.php for the second blog) and then apply the changes detailed in the previous comment.
Hi Andrea,
Thank you for the plug in. It is very useful and intuitive. Could you please help me resolve one issue. Is it possible to exclude certain categories from automatically displaying the title tags? I understand that the title tags are derived by the description field in the categories. Keep up the good work.
Alexandra
Hi Alexandra,
currently it’s not possible, but I can suggest a workaround.
You could use Menubar version 3.0 beta 7 instead of version 2.3, use the Category menu type and build your menu tree manually (adding the main category menu item first and then the sub-category menu items one at a time). This way you can have full control over the menu title tags.
FEATURE REQUEST:
Could you please add a way to create self-explanatory or “speaking” menus?
For example: “About – a few words about who we are”
you can see more examples in this article http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
Maybe you could add an extra field in admin for the extra line of content that details the section. And that could be styled separately (most certainly smaller font).
thank you very much for a lovely plugin!
Keep up the good work!
Hello Mimi,
thank you for your suggestion, the “speaking menu” feature is very interesting and I’ll try to implement it.
The current version does allow something similar: if you insert title=”whatever you like” in the Attributes field of a menu item configuration, you’ll get a tooltip saying whatever you like when your mouse hovers over the menu item. Maybe that helps?
aah, good to know that “title=” attrib. is taken care of. ty
also, could you please add a “subscribe to comments” plugin to this blog? so it would be easier for us to keep track of the discussions?
anyway, your menubar plugin is a must for any serious site based on wordpress. ty for your efforts. keep it up, one day who knows what…
Hi Andrea,
I just installed your plugin about an hour ago, it’s exactly what I imagined a menu should look like, thank you!
So the functionality works great, but the CSS is really messed up (not because it came that way, because I haven’t been able to customize it yet!)
It’s almost as if the CSS for the menubar is clashing with the CSS for the WordPress template, but the instructions for installation don’t say I have to edit any WordPress template CSS.
Could you look at my site? My menubar CSS is here:
http://nwucase.net76.net/wp-content/plugins/menubar/Suckerfish/wpm.css
And the template CSS is here:
http://nwucase.net76.net/wp-content/themes/corporate-theme-v2/style.css
Thank you!!
Hi Curt,
you are right, the two CSS were probably clashing, but I see you have already solved this conflict.
My best suggestion is to use Menubar version 3.0 anyway, it’s still in beta but it’s usable and it solves a few problems of version 2.3.
Hey, thanks for the plug-in
We’re trying to move all the tabs / buttons closer to the side, any suggestions on how to move them without moving the background?
Hi Mungo,
you can alter the margin and/or padding property values in the CSS of your menu template, to get the result you like. If you need more specific suggestions, please send me a link to the page you are building.
Andrea, here is the subscribe to comments plugin. Maybe you’ll consider adding it to your blog.
http://wordpress.org/extend/plugins/subscribe-to-comments/
Mimi,
thank you for the suggestion and the link!
Subscribe to comments is now active, I’m waiting for the first subscribers!
Andrea,
Thanks so much for sharing your work. I was able to walk through your code so easily and now I understand how to utilize menus in WP.
I’m adding myself to your subscriber list, looking forward to seeing what else you do.
Cheers from Indiana,
John
Hello John,
thank you for your interest, I appreciate your subscription!