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 Mattz,
you can already select pages or categories, by ID, and yes, I’m planning to add a selection by name.
I also like your second suggestion, but I have to study it a bit.
Thank you for your interest, your suggestions, and for pointing me to another nice menu plugin!
Hi Andrea,
Nice to hear, I look forward to it.
I think my “order suggestion” is not very difficult, it’s done by a simple query that you can see in the plugin I pointed to you.
Thanks !
Hi Andrea,
Maybe I got you wrong, but I’m not able to select pages or categories by ID, I have to enter the ID’s always manually.
Did you mean that by “selecting” ?
Hi Mattz,
yes, I meant enter manually the ID. A true selection by name is coming with the next WP Menubar release.
Hi Andrea,
I’m really waiting for it, hope to see it soon.
Let’s hope you have some time… it’s really a great plugin !
Thanks again.
Hey Andrea,
Trying to use your plugin on my site http://mswhs.com and all is fine apart that the background behind the menu labels does not reach to the sides of the site. Can you help?
Sorry gave you the wrong link to my test site it is http://67.228.102.93/ and NOT http://mswhs.com
Hello Philip,
I don’t see any problem in your site, probably you did the right thing changing the margin property in the wpm.css file. Thank you for reporting the problem, I’ll try to write a guideline to CSS customization for WP Menubar templates!
I have added the code but seem to be not working with my theme ( I am using, Almost Spring Theme). I attached below my header code:
(… code removed, doesn’t display correctly …)
Hello Hamdani,
could you please activate the plugin in your site, so I can take a look? Otherwise I can’t tell what is possibly wrong, thanks!
Hi and thank you for making this great plugin available to us. I have (sort of) got it working on our new community site but have disabled it until I figure out how to correct the problem I have.
I’m using the ’1 Blog’ theme V1.2.1 (http://1blogtheme.com/features-and-download) that has 2 right sidebars and if I place the code at the end of the header.php file the menu appears at the top of the left panel page content rather than below the header as a bar along the whole page width. The effect is that the menu looks like a ‘page content’ menu rather than a site menu. Do you have any idea where I could place the code? I’ve tried a few places to no avail, but honestly, I’m not php-savvy at all!
Many thanks again, Andy
Hello Andy,
go to the end of header.php and move up two lines, between the line that begins with “include” and the one that begins with “echo”. Now insert the line:
do_action("wp_menubar","menu-name");
without the <?php and the ?> parts.
Please let me know if that works for you!
Hello andrea!
I just used your wordpress menu bar plugin ver.2, and do as your instruction, but it is not appear the menu, I use the bloggingpro theme, could use mind to check for me.
You are so kind!
Hello ZuZi,
the BloggingPro theme doesn’t call the wp_head function, so you should insert the line:
<?php wp_head(); ?>
in your header.php file, right before the </head> line.
Then you can insert the line:
<?php do_action(“wp_menubar”,”your-menu-name”); ?>
at the end of your header.php file, or one or two lines before the end, just try and see how you like it best.
Let me know if this helps!
Andrea,
Do you need some help on the new version or are you already making progres.
Please let us know.
Hi Mattz,
I’d appreciate some help with beta testing, and possibly with translations in more languages (currently only English and Italian are available).
The beta version is almost ready, I’ll keep you informed!
OK great ! We can test if you want
First off, great plugin!
Now, my issue…My menu works fine for Firefox, but not for Internet Explorer…
When I mouse off of the menu item, the sub menu does not disappear in Internet Explorer. I personally do not use Internet Explorer, but many of my users will.
I am using the Suckerfish template.
Please, Help!
Hi Jarred,
probably the JavaScript of the Suckerfish template conflicts with another plugin you are using. Could you please deactivate all plugins, then activate them one at a time to determine the conflicting plugin?
Please let me know!
Hi Andrea,
I’m not sure if it is because of the latest version of IE or what, but in the stylesheet i added
display:none;
to the left:-999em declaration.
and it worked fine. So I’m not sure if its a problem (enhancement) of the latest version of Internet Exploder or not, but this did work for me.
Hi Jarred,
I’m glad you solved that IE problem. Thank you for posting your solution!
Thanks for the menubar plugin. It saved me, a non-programmer, a lot of time.
Thanks for the great plugin..your menu plugin is the only one I found on Google.
I have a couple of questions:
How do I remove the shadow under the menu on http://www.articlerewards.com/ ? I tried removing then changing the shadow.png image but I’d prefer not to see the shadow.
What CSS code do I edit to get a hover effect with a different color to blue as shown in the menu on this page.
Thanks
Hello Herman,
to remove the shadow, find the #wpmnavclear rule in wpm.css and delete the line
height:6px;
In the same rule, you could also remove the border, or modify the margin (10px -> 0px) to extend the border to full width.
To change the hover color, find the rule
#wpmnav li:hover,
#wpmnav li.wpmhover {
background: #1C86EE;
}
and change the background color code.
Hope it helps!
Note to readers: Herman is using Menubar 3 beta, Menubar 2.2 is a little different.
Hi Andrea:
How can i made to have horizontal or vertical layout?
Tnks!
Hi Jaime,
I am working to a vertical layout, but it’s not ready yet, so only horizontal layouts are currently available. I’ll let you know when a vertical template is ready!
Hi Andrea,
seems like my wordpress installation does not save the menus and menu items (when I add a menu, it does not appear in the drop down). Any idea what went wrong? Permlinks also don’t work, though I made .htaccess writable. Maybe that’s due to the same problem?
I’m using version 2.2 on wordpress 2.5.
Thanks and keep on with the good work,
Ellen
Hi Ellen,
I’m sorry, Menubar 2.2 doesn’t work well with WP 2.5, I’m going to release 2.3 in a few days.
If you are brave enough
you could try Menubar 3.0 beta, but please be advised that version 3.0 is still under test.
Regarding the permalink problem, I think that’s unrelated to Menubar. Thank you for your report!
Now it works, great!
Thanks a lot, Andrea. It looks great and is easy to use
I’m really reliefed about your plugin .. it’s all I need for horizontal menus
The only problem I have now is, that the mainmenu “news” (the blog-section) is not highlighted as “active” (current) at single posts, archives and so on.
I’m using WP 2.5 und your version 3.04 beta
Hello Tom,
sorry I didn’t notice your comment earlier. I’m looking into your request, to add it into a future release. I’ll let you know!
Thanks for the plugin! It was nice to find just what I was looking for so quickly.
I’m using 3.05 beta. I’m not sure if you’re planning to implement something like drag and drop capability for changing the order of the menu items, but if you did it would be sweet. Even a less fancy method for changing their order without having to delete and re-add items would be super helpful. I do see an Order column, so perhaps you are working on just such a thing.
Hello Lewis,
actually in the Order column you should see two arrows (up and down) and clicking one of those arrows you should be able to move the selected menu item up or down in the list.
Perhaps something is preventing the display of the arrow images? Please let me know!
Hi Andrea,
In Firefox 2.0.0.14 I see no arrows, unfortunately. In Safari 3.1.1 I see question mark icons instead of arrows, but they are functional.
I forgot to mention that I’m using WP 2.5.1.
I love your plugin! Thank you for creating it for us WP users
I have ran into a bit of an error however. I am trying to find out how to have it link to a category and not the category archive like it currently does.
I am trying to get one link in the menu to point to one blog category and another link to point to another, but nothing is working. And “blog” doen’t even show up on the menu bar unless I include a “news” link on the menu.
Any help would be greatly appreciated
Oh, I forgot to add that I am using the 3.0 menubar version with 2.5.1 wordpress
Lewis,
could you please check whether your folder wp-content/plugins/menubar contains the two arrow images up.gif and down.gif?
Hi Erica,
a link to your blog would be helpful to better understand your problem.
Please let me know!
Hi, and thanks for this wonderful plug-in. I look forward to the upcoming addition of vertical menus. Can you please tell me, now that I have created a menu with your plug-in that acts that way I want it to, how do I get rid of the existing vertical list of pages on the sidebar without deleting or deactivating the pages themselves? I imagine there must be a line of code somewhere that I remove in order to have them cease displaying. The template I am using is called jewelbox1. Thank you for any help you can provide. What a wonderful gift to the world!
Well, I figured out that deactivating the Pages plugin does not deactivate the pages themselves, only their display on the toolbar. So nevermind, and thanks again for all the great info here.
Hi Dana,
thank you for your kind words! A vertical menu template, suitable for a left or right sidebar, is almost ready, and I’ll let you know when it’s available.
Hi
Updated Tarski and also your latest release both today
Have been dropping that line of code all around to no avail
Hope you can look at Tarski at some point?
Your my only hope Obiwankanobi
Hi Howard,
looks like you are using in your line of code the name of a menu you haven’t created yet.
You should first create your menu (let’s call it mymenu), and then place the line
<?php do_action(‘wp_menubar’,’mymenu‘); ?>
in your theme.
Let me know if this fixes your problem, and … may the Force be with you!
…a Jedi feels the force flow….
fixed!
with my title recreated and a re- upload to the menu bar-folder, menu-bar bliss!
thank you Obiwan
[I 'feel' the good in you]
Hi Howard,
that’s great, now I can see Menubar working on your site!
Don’t underestimate the Force …
Hi Andrea.
I love your plug in but am having a problem. All of my menu items appear on the home page but when I select one of them, the some of the items disappear. I’m hosting this locally until it’s ready to launch but was hoping you could maybe help anyway… PLEASE!?!
Hi Arielle,
if you deactivate all plugins, except Menubar, and switch back to the default theme, does the problem stay the same? Please let me know!
how did you do the dropdown menu in the menubar item MENUBAR on this page??? Is that a category tree or something?
Hi Jordan,
with Menubar 3, when you add a new menu item you can specify, in the Parent field, whether the new menu item will be a top level item (selecting Top Level) or a sub-item of an existing one (selecting the item name from the list).
This way you can build any hierarchical menu, mixing posts, pages, categories. In the instance you noted, WP Menubar is a category, parent of WP Menubar 3.0 beta, WP Menubar 2.3 (two posts) and Download (a page); WP Menubar 2.3 , in turn, is parent of three more posts.
the menubar looks great in safari, but in firefox, only half of the titles appear. do you know how to fix this? thanks