By Bernice Knight,2014-05-24 12:24
17 views 0


JQuery Plugin for Wordpress

    Blog comments not functioning at present ? New wordpress plugin for creating a drop down

    navigation menu using JQuery The wp_jquery_dropdownmenu plugin at a glance:

    ? Create a navigation menu with drop down menus for you Wordpress blog

    ? Slick JQuery animated sliding down for menus and fading out.

    ? Works with javascript turned off.

    ? Auto highlight of the current page you are are on.

    ? New features in v.02

    ? Add a link to your blog to the navigation menu.

    ? Arrange the order of the page to suit your needs.

    ? Parents pages can can be either links to pages or not if required.

    I wrote this plugin to provide my wordpress blog with a navigation or menu that

    provides drop down menus or sub navigation menus where you need them.

    This plugin uses the cross browser JQuery javascript framework for the sliding down

    menus and JQuery is installed with the plugin.

    Each „Page‟ of your wordpress blog becomes a link in the new navigation bar. Pages that are „children‟ populate the drop menu of the parent „Page‟.

    For example. You might have a page titled About. You can then set or create pages such

    as contact us, team, location or whatever and set the parent of each of these pages to


    In your new navigation menu hover over the „About‟ link and a dropdown menu

    containing contact us, team, location appears.

    I‟ve tested this on Wordpress version 2.31 and above. It will not work on version 2.0.x

    as these version does not support the concept of parent and child pages.

Try out the Demo


    Download wp_jquery_dropdownmenu plugin here Simply unzip the and copy the

    wp_jquery_dropdownmenu directory into your ./wp-content/plugins directory.

Login to the WordPress Admin Interface and enable the PlugIn in the PlugIn section.

    Next put the tag below somewhere inside one of your wordpress template files.

    That‟s it.



    Insert this somewhere into one of your templates, eg header.php


    echo wp_jquery_dropdownmenu(2, “Blog”,1, 0); ?>

    This is the default dropdown menu configuration. If you would like to learn about how

    you can alter your dropmenu further please read the following:

    There are four settings to consider.

    The first value(2 in the above example):

    0 - does not put a link to you blog into the dropdown menu.

    1 - Put a lnk to your blog on the left hand side of the dropdown menu.

    2 - put a link to your blog in the right hand side of the navigation menu.

    Second value (”blog” in the above example): If you would like a lin to you blog to appear in your dropdown menu. Put the text here.

    In the above example “Blog” is used and will probably do for most people.

    Third value (1 in the above example):

    0 - pages will by sorted by their ID

    1 - pages will be arranged accorded to their menu order. The menu order can be set in

    the pages section of your wordpress blog.

    Fourth value (0 in the above example):

    0 - if you would prefer the „parent‟ of a dropdownmenu to be unavailable for clicking.

    1 - if you would prefer the „parent‟ of a dropdownmenu to to click to it‟ page.

    Further notes

    You can style the css by editing the files styles.css in the

    plugins/wp_jquery_dropdownmenu folder

    Comments, questions or suggestions most welcome!


    This entry was posted on Monday, January 7th, 2008 at 10:48 pm and is filed under JQuery, Opensource,

    Plugins, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave

    a response, or trackback from your own site.

    78 Responses to “New wordpress plugin for creating a drop down

    navigation menu using JQuery” 1. svante Says:

    January 7th, 2008 at 11:50 pm

    Hoy, this sounds great, I was just looking for something like this, but you forgot

    to add the files!

    2. Jamie Says:

    January 8th, 2008 at 11:55 am

    Thanks for the heads up, svante

    The link to download the plugin is now fixed. Let me know what you think

    when you get the chance, thanks.

    3. str3ss Says:

    January 9th, 2008 at 3:36 am


    This sounds BRILLIANT! Thank you so much for writing this. However, I feel

    like I‟m missing something… I can‟t quite get it to work. Does the location of

    the echo in header.php matter?

    4. Jamie Says:

    January 9th, 2008 at 11:25 am

    Hi str3ss,

    yes the position is important. It must be outside the html head tags and inside the

    html body tags.

    The header.php is probably not the best example to choose as it contains both

    header and a body tag, usually.. :-/

    So just make sure it is inside the first HTML body tag and also since it is a PHP

    function it should be enclosed in the usual PHP opening and closing symbols.

    Hope that helps!


    5. B-man Says:

    January 11th, 2008 at 6:18 pm

    Hi str3ss,

    This sounds fantastic (have been looking for a way to do this effectively for

    quite some time).

    Would you happen to have a site where it is demonstrated? (I hovered over your

    top menu pages but didn‟t see any „children‟ drop down).

Thanks very much!


    6. B-man Says:

    January 11th, 2008 at 6:20 pm Apologies! Should have said “Jamie” not “str3ss”

    Sorry about that!


    7. David Says:

    January 11th, 2008 at 11:16 pm Hi Jamie. The drop-down menu is just what I was looking for. I am no

    programmer and have no idea where to add “echo

    wp_jquery_dropdownmenu();” in my header and what the usual PHP opening or

    closing symbols are. Could you give me a tip or do you need the header text?!

    Thanks in advance! David

    8. David Says:

    January 13th, 2008 at 12:21 am Hi Jamie. The plugin is just what I was looking for. No being a programmer, I

    have no idea where to integrate “echo wp_jquery_dropdownmenu();” in the

    header. What are PHP opening an closing symbols? I am useing the mandigo

    themplate for wordpress. Can you help me? Would you need a copy of the

    header txt? Thanks David

    9. WordPress plugin easily creates drop-down navigation |


    January 13th, 2008 at 10:42 am [...] is really handy: the Drop Down Menu WordPress plugin creates a drop-

    down navigation scheme where sub-pages appear under their parent pages in the

    menu. [...]

    10. Jamie Says:

    January 13th, 2008 at 1:19 pm Hello B-man.

    I‟ve tested it on WinXP Firefox, Opera and IE 7.

    What browser and OS are you using?


    Hi David.

    By PHP and closing symbols, I was referring to this


    echo wp_jquery_dropdownmenu();


Basically your template is made up of PHP files, one of which is usually called

    header.php. These files create your blog webpages. So we want to insert the

    above line into a template file as that line will print out the navigation bar.

    If you are not familiar with PHP/HTML and CSS and editing template files I

    think your best bet is to get help from someone or pay someone to do it for you.

    Good luck

    11. links for 2008-01-14 at orioa Says: January 14th, 2008 at 4:26 am [...] New wordpress plugin for creating a drop down navigation menu using

    JQuery | we eat bricks drop down navigation プラグイン (tags: wordpress

    plugin navigation) [...]

    12. Gail Says:

    January 15th, 2008 at 9:56 pm Hi,

    Thanks for creating this great plugin. Just one question, how can I control the

    order with which my pages are listed both at the top-menu parent level and in

    the child sub-menu items?

    It appears the code orders by the PAGE ID, however I can‟t edit the page ids to

    change the sequential order of the menu items, I can only edit the PAGE

    ORDER attribute for a given page.

    The Page IDs assigned to each of my pages as we created them is not a logical

    order to display my menu items. How can I change the order of the menu items

    for my pages?

    13. ChaZz Says:

    January 16th, 2008 at 9:07 pm What a great plug-in!! I have it running quite nicely, but I have a few


    I no longer have my Home page (or Blog page with all my posts). The first tab

    in the menu is the first page that I created, but it doesn‟t show my Home page. Is there a way to have the Home Page show in the menu? Or is there a way for me

    to create a Page that will show my posts? (I‟m still kinda new with WP).

    Also, is there a way to make Parent links un-clickable. I‟d like the Parent names

    to just be the headers, and you need to hover over them to open the Children

    Links, and not have the

    Parent do anything if you try to click it.

    does this even make any sense??

Thanks for all your hard work!!!

    ~ ChaZz

    14. Jamie Says:

    January 18th, 2008 at 11:08 am Hi Gail,

    Thats‟s a great suggestion, I have prepared the next version of the plugin that

    allows you to use the page_order feature to arrange the order of the links on the

    nav bar yourself.

    I‟ll try post it up next week. It‟s Friday now and I have a rule. No computers at

    weekend Stay tuned!

    Hi ChaZz, thanks for the positive feedback. And yes it makes perfect sense

    The next version has those 2 features you are looking for. It works just great.

    I‟ll try post it up next week if I can. Watch this space.

    15. Buffer Dump 18JAN08 ? Feet up, eyes closed, head back Says:

    January 18th, 2008 at 6:59 pm [...] drop down navigation menu using JQuery - demo [...]

    16. Jamie Says:

    January 31st, 2008 at 2:30 am Hello,

    Improved version of the JQuery drop down menu now available.

    It contains the extra features requested above:

    Order the pages yourself by using the Page menu order feature.

    Put a link into into the menu for you blog.

    Make the the parent of a drop down menu clickable or not.


    17. attic Says:

    January 31st, 2008 at 1:49 pm Hello ! I tried your demo but it doesn‟t work fine with Firefox on Mac

    OSX. The menu Drop down once and when I return on it, it doesn‟t drop downn

    again. Is there an issue with firefox Mac version ?

    I tested it on Safari 3.0.4 and all is Ok.

    18. Jamie Says:

    January 31st, 2008 at 11:29 pm Thanks for the feedback. I‟ve updated the plugin code which should fix this bug.

    19. attic Says:

    February 1st, 2008 at 12:34 am

Hi, there is another problem always with Firefox on Mac OSX. You can

    see it in action on my personnal webshare :


    Thank you for your work

    20. Suckerfish WordPress Plugin | Ryan Hellyer Says:

    February 1st, 2008 at 1:30 am [...] It looks like the “JQuery Dropdown Menu” I modeled mine on has

    undergone some improvements. I haven‟t had a chance to try it [...]

    21. Andy Says:

    February 1st, 2008 at 5:13 pm I like teh plugin a lot but when I save my pages in Admin I get this error:

    Warning: Cannot modify header information - headers already sent by (output

    started at /home/jflytecr/public_html/cockpit/wp-

    content/plugins/wp_jquery_dropdownmenu/jquery_dropdownmenu.php:262) in

    /home/jflytecr/public_html/cockpit/wp-includes/pluggable.php on line 391

    Any ideas? WP v.2.3.2


    22. Andy Says:

    February 1st, 2008 at 5:14 pm I like the plug-in a lot but when I save my pages in Admin I get this error:

    Warning: Cannot modify header information - headers already sent by (output

    started at /home/jflytecr/public_html/cockpit/wp-

    content/plugins/wp_jquery_dropdownmenu/jquery_dropdownmenu.php:262) in

    /home/jflytecr/public_html/cockpit/wp-includes/pluggable.php on line 391

    Any ideas? WP v.2.3.2


    23. Joseph Says:

    February 2nd, 2008 at 11:34 pm Great plugin! I‟ve got it working on except for one

    issue. If you hover over a submenu, it usually keeps reloading the drop down

    menu, making it difficult to see and click. I‟m betting that it‟s an issue on my

    site, but do you have any idea why it could be doing this?


    24. Jamie Says:

    February 5th, 2008 at 12:06 am I‟ve updated the plugin to solve theses bugs, the latest is version 0.04. Should fix

    the bugs mentioned by Andy and Josoph.

    Thanks for the feedback guys.

    25. Jamie Says:

    February 5th, 2008 at 12:12 am Hello Attic, that‟s a neat service you have there, the screencast was most useful!

    The bug should now be fixed in the version 0.04 of the plugin.

    26. Joseph Says:

    February 7th, 2008 at 3:48 pm Thanks for looking into it Jamie, unfortunately the issue still seems to be there.

    After opening a menu, if you move the cursor off the drop down menu, then

    move the cursor back to the drop down menu, it will “drop down” continuously.

    Any idea what could be causing that?

    27. tedd Says:

    February 7th, 2008 at 4:04 pm Hi Jamie,

    I have been looking all over my pages code and see no html body tags etc, its all

    php tags.

    Should I create a new php in DW or so?



    28. Jamie Says:

    February 7th, 2008 at 7:38 pm Hi Joseph, I had uploaded old version of the plugin by mistake. The up to date

    one is now available to download.


    HI Tedd, you will want to go to your wordpress template files.

    usually in this directory wp-content\themes

    You need to edit one of the php files in the tempalte your blog is currently using.

    It will probably be the header.php files you will want to edit. Put the < ?php

    echo wp_jquery_dropdownmenu(2, “Blog”,1, 0);


    at the end of the header.php file. Be sure you place it outside the head tags


    You should not need to create a new php file. Just be sure to check that you are

    looking at the right files… Good luck

29. Rune Says:

    February 8th, 2008 at 11:10 am

    I installed the plugin today, and got the same problem as Andy. I get the error

    message when I save the changes in the header file.

    Also when I tried to disable the plugin again I got the same error message…

    30. Jamie Says:

    February 8th, 2008 at 12:54 pm


    There maybe be a error in the latest plugin. Causing a php error in the admin

    section. I‟ve taken down the plugin download for the moment.

    If you experience this please deactivate and remove the plugin .

    Thanks for the feedback Rune, please remove the plugin until I have this fixed.


    31. Rune Says:

    February 8th, 2008 at 2:40 pm

    Plugin removed

    Good luck on solving the problem…this will be a godsend for me when it works

32. Michael Says:

    February 8th, 2008 at 6:38 pm

    Is there a way to exclude pages from the list? I only want some of my pages to

    display on this horizontal navigation, while others will be listed in a different

    part of my site.




    33. Midcpro Says:

    February 9th, 2008 at 5:09 am

    I would like to see if I can get this plugin to work with grandchild and great

    grandchild links as well. Would I just tweak the css to include ul ul ul, etc or is it

    something in the js or php file that would need tweaking? I was thrilled that I

    could get this to work, but it breaks for any page links that are not parent or


    34. Jamie Says:

    February 12th, 2008 at 12:38 am

The plugin should be working again. If you have been experiencing problems

    with earlier version please update to the latest. Thanks.

    Michael: that feature sounds interesting, I‟ll try include that in the next version

    when I get the chance. Midcpro: it will not work for pages grand children or more. At the moment

    anyway. To achieve this you would need to edit the css and rewrite the plugin

    PHP. However you might like to try the suckerfish-wordpress-plugin from Ryan

    Heller at

    Rune: Thanks for the encouragement, I hope this latest version solves those


    35. Rob Says:

    February 12th, 2008 at 12:43 am Nice plugin, thanks.

    Like Michael on Feb 8 it would be great if there was a way to exclude pages

    from the list.

    Any way to do it with the current plugin?

    36. Becky Says:

    February 14th, 2008 at 4:16 am Thank you!!!

    Of course.. I have a question I know you can use cookies to keep the submenu

    open on other frameworks, but how do you do this with jquery?

    What I would like to do is one the user clicks on the submenu item, it stays open

    while you are viewing the submenu items.

    I have been trying to solve this but cannot find a solution since I am no good at

    JS (more of a php person)

    37. Bernardo Says:

    February 14th, 2008 at 7:54 pm Hi Jamie

    First I‟d like to greet you for this nice plugin. Second I have a few questions

    regarding it.

    Is it possible to make it a sidebar menu, just by tweeking the css? And can I do it?

    Can I put the code at the sidebar instead of the header?

    Best regards

Report this document

For any questions or suggestions please email