WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+2Pin on Pinterest0Share on LinkedIn1

Add Drop Down Menu to WordPress theme

A lot of people wanted to know the technique for adding a Drop Down Menu to their WordPress themes. So, here is a quick way to do this. This tweak will let you create menus, sub-menus and sub-sub-menus and it applies to your pages, categories and archives.

Step 1

Download the Suckerfish Dropdown Menu for WordPress. Even if you have installed WordPress 2.5 recently, this plugin works perfectly. Extract the plugin and put the files in your wp-content/plugins folder. Activate the plugin from your wp-admin section.

Step 2

Now, open your existing theme folder which you have applied to your WordPress installation. Most probably, you already have a navigation menu in the theme (most themes have it in the header.php file). So, just replace your existing menu code with this command :-

<?php suckerfish(); ?>

Save and close the file.

Step 3

This is the final step. Go to this online Suckerfish Dropdown CSS Generator, where you can generate a custom CSS file for your menu and copy it to your clipboard. Now go to your wp-admin and click on the Suckerfish option which you can find under the options menu (in WP 2.3) or the settings menu (WP 2.5). Paste the custom CSS information where it says “Enter your CSS here”. It might show something like #222 in the box which you can safely remove. The plugin also gives you options to choose the menu items that you want to display in the menu.

To test the functionality of this drop down menu, go ahead and make some pages and sub-pages. Preview your theme and it should work flawlessly. Let me know if you have any questions. Good luck!

Share on Facebook0Tweet about this on TwitterShare on Google+2Pin on Pinterest0Share on LinkedIn1
  1. HGIT left a comment on March 29, 2016 at 2:32 am |

    Gluer for project of vehicle water drop channel
    Major components of the equipment: six-axial robot, double-component polyurethane precision glue supply system, precision double-component gluing head, left-right alternative gluing platform, AB glue automatic feeding system, tool and control system, etc. Automatic loader and unloaded devices are allowed as required by client in order to satisfy with individual demands.
    http://www.hgcx.cn/en/index.php?p=product_show&id=336&c_id=61&o_id=&lanmu=12

  2. situsmedis.blogspot.com left a comment on September 20, 2014 at 9:33 pm |

    Great post! I?m just starting out in community management/marketing media and trying to learn how to do it well – resources like this article are incredibly helpful. As our company is based in the US, it?s all a bit new to us. The example above is something that I worry about as well, how to show your own genuine enthusiasm and share the fact that your product is useful in that case

  3. spekhargaponsel.com left a comment on September 20, 2014 at 9:33 pm |

    I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that very useful

  4. Fat Burning of NatureWise of YoungYou left a comment on September 17, 2014 at 3:07 am |

    Hello my friend! I wish to say that this post is awesome, great written and include almost all important infos.
    I would like to look extra posts like this .

  5. American moving And storage Association jobs left a comment on September 1, 2014 at 11:28 pm |

    If you are saying, “My wife moved out – can I get her back. Have all the materials needed to pack ready and available to everyone at the beginning of the project. You can find out about reputed movers and packers companies from your area with the help of various websites which enlist movers and packers.

    Also visit my homepage – American moving And
    storage Association jobs

  6. fake tan remover left a comment on August 18, 2014 at 8:00 pm |

    Fortunately for women, the lower back ages very well, so
    they should have no problems over the years with their tattoo.
    You also have to be at ease in your dress,
    able to glide down the aisle in it & look
    comfortable all day long. Back to your skin check, the first time you do the check
    be sure to take as many pictures as possible to show what your skin looks like.

    Here is my blog … fake tan remover

  7. hair restoration eagan mn left a comment on August 6, 2014 at 9:00 am |

    Testosterone is converted to dihydrotestosterone (DHT) which slows down or stops hair growth and produces weaker,
    shorter hair. To achieve the best results, become more proactive with
    the appropriate professional services and products for your
    specific condition, have a hair care analysis performed and get a
    personalized consultation. The initial consultation will give you a good
    opportunity to clear all doubts that you may have.

    Feel free to visit my web-site … hair restoration eagan mn

  8. leaking pipes pompano beach real estate left a comment on July 18, 2014 at 9:18 am |

    Just follow the instructions, every person can fix these problems.

    Most plumbing services are available around the clock;
    therefore, you can call them at any time of the day or night.
    When you pull the toilet handle, the flapper rises and
    allows the water in the tank to empty into the toilet.

    my webpage – leaking pipes pompano beach real estate

  9. purple dr dre headphones left a comment on March 13, 2014 at 8:51 pm |

    Woah this weblog is wonderful i like studying your posts. Keep up the great paintings! You know, many people are searching around for this information, you can help them greatly.
    purple dr dre headphones http://www.religionandnature.com/beats/purple-dr-dre-headphones.html

  10. phentermine and shortness of breath left a comment on October 5, 2013 at 8:36 am |

    Some of the perfectly working solutions such as the weight loss
    surgeries are hidden beneath the mountain of weight loss scams.
    It can help to recall that hypnosis is not being done
    TO you, but what you are choosing to do. Now, the average
    healthy amount people are supposed to lose is 2 pounds per week.

    my webpage – phentermine and shortness of breath

  11. Niels left a comment on June 17, 2013 at 11:58 am |

    It doesn’t work for me, did exactly what was asked, got this result:

    wp.voetinbalans.nl

    Can anyone tell me what’s wrong?

    Kind regards
    Niels

  12. Imran Murtaza left a comment on May 5, 2013 at 1:38 pm |

    Nice Sharing, and drop down is looking very beautiful, Thanks,

  13. Telecharger left a comment on April 17, 2013 at 10:11 pm |

    I`ve tried creating drop down page on header blue green theme but it seems the color did not match with header background color.

  14. Rams left a comment on January 31, 2013 at 12:33 pm |

    well this didnt work, just saying, waste of time..

  15. Amrish left a comment on December 21, 2012 at 8:43 pm |

    I want to add drop down menu to my wordpress blog . I have installed the plugin and replace the menu code but drop down is not working only navigation is showing . Help Me

  16. Nicole left a comment on October 29, 2012 at 7:22 am |

    Error Code – “The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Invalid End of Central Dir Record size : 14” shows up when I try to upload the plugin. Any ideas? Thanks!

  17. Amazon Shoes discount left a comment on October 6, 2012 at 10:29 am |

    pretty practical stuff, overall I consider this is worth a bookmark, thanks

  18. Jackelin left a comment on September 18, 2012 at 3:57 pm |

    Does anyone know how to center dropdown submenu items? They seem to be indented and I can’t figure out how to fix this problem with suckerfishnav..

  19. Zahid Farid left a comment on September 7, 2012 at 8:38 am |

    This is amazing for me. I am exciting for this. But I don,t know how install in my website CSS sheet. Please Teach me. I request you Please visit my website and advice me that how customize my themes. My website is of worldpress. But I want to customize it.
    http://www.nfmobileshop.com. Please help me

  20. Zahid Farid left a comment on September 7, 2012 at 8:38 am |

    This is amazing for me. I am exciting for this. But I don,t know how install in my website CSS sheet. Please Teach me. I request you Please visit my website and advice me that how customize my themes. My website is of worldpress. But I want to customize it.
    http://www.nfmobileshop.com. Please help me

  21. Imran Korai left a comment on September 5, 2012 at 3:54 pm |

    Nice about How to Add a Drop Down Menu to your Theme. I find most website for this article and i get from here. Thanks for posting.

  22. Suganya left a comment on August 3, 2012 at 4:50 am |

    Thank you…Very nice, it worked properly…Great

  23. Null left a comment on July 29, 2012 at 6:04 am |

    Sorry the plugin could not be downloaded.

  24. graham left a comment on June 16, 2012 at 9:52 am |

    cheers for this m8 have been trying to activate the menu option in my wordpress theme for the past few hours, thought i was gona be stuck with having to edit the menu in my websites html every time i needed to add or change a nav.

  25. Elissa left a comment on June 15, 2012 at 8:55 am |

    I installed the plugin, but can’t activate it.

    I keep getting this error message: Plugin could not be activated because it triggered a fatal error.

    Any ideas on what to do next?

  26. Irfan korai left a comment on June 8, 2012 at 1:06 am |

    It must be work for latest version too, because it just change the configuration in the drop down . And sucker fish is one of the best for wordpress i ever like.

  27. Stories for kids left a comment on May 23, 2012 at 7:59 pm |

    I can now create my own beautiful drop down menu. Thank a lot. I’ll be back for some other useful tutorials.

  28. Irfan korai left a comment on April 22, 2012 at 12:23 am |

    Awesome, i searchd m0re than 20 website 4 this article finaly i succeed thanx 4 p0stng

  29. Akash left a comment on April 21, 2012 at 3:32 am |

    I am using latest version of wordpress 3.3 So Please tell will it work in my wordpress blog.

  30. shivam shrotriya left a comment on April 14, 2012 at 6:45 am |

    great post its help me..

  31. Govind Choudhary left a comment on March 25, 2012 at 10:26 pm |

    Thanks a ton.It worked πŸ™‚

  32. Chirag Patel left a comment on March 6, 2012 at 2:54 pm |

    i have tried this on my blog,And working perfectly.Thanks for such a nice article πŸ˜€

  33. anitha left a comment on March 6, 2012 at 4:10 am |

    i am using the wordpress version 3.3.1,the process works form my site or not?

  34. Daniel left a comment on February 14, 2012 at 2:15 pm |

    additional info.

    I am using dandelion wordpress theme for my website

  35. Daniel left a comment on February 14, 2012 at 2:13 pm |

    Would you please explain step 2 further.

    How do you find the location where to “paste the the code” in the header.php file.

  36. Frank left a comment on February 10, 2012 at 11:04 am |

    Drop down menu works great! However, with the SKY Theme, the #! in the URL for the background slider will not let users have access to the child menus.

    • Kim left a comment on March 21, 2013 at 6:06 pm |

      I can’t seem to make the drop-down menu work on my WordPress site, using the Sky theme πŸ™

      If the problem is with the #! in the url for the background slider (as suggested) that prevent users from accessing the child menus…

      Doesanyone know of a work-around?

      or do i have to change my theme?

  37. sangeeta left a comment on February 2, 2012 at 7:03 am |

    thanks,
    this help me alot

  38. Apple Mac Tricks left a comment on January 9, 2012 at 8:13 am |

    Thanks I was looking for same info. Now drop-down menu is showing up on my site. Thanks

    • JR left a comment on January 19, 2012 at 12:15 pm |

      It says “Now go to your wp-admin and click on the Suckerfish option which you can find under the options menu (in WP 2.3) or the settings menu (WP 2.5). “. Did you find that in your most recent version of WP? Can you email me or reply with the exact steps you took….I am not getting the same results.

  39. Marlene left a comment on September 12, 2011 at 12:45 pm |

    Think of I read it 2 times. Because i feel much less good on this issue, We harmonise using your determination simply because they create sense. Provides Cheers and also goodluck to you personally.

  40. Atiqur Rahman left a comment on June 15, 2011 at 2:02 pm |

    Nice information. Thanks to admin for this tips.

  41. Ayush Gupta left a comment on April 22, 2011 at 4:24 am |

    Thanks. Works perfectly. Thank you

  42. florin left a comment on April 15, 2011 at 6:25 am |

    You can easily create drop-down menus and get the HTML code for them with : http://bstdownload.com/reviews/css3-menu-1/

  43. Sean Serritella left a comment on March 30, 2011 at 12:59 am |

    These are the worst directions I’ve ever read in my life…

    “So, just replace your existing menu code with this command :-

    Really? Where’s the existing menu code? I’m in my php file but there’s so much stuff there that I don’t know what to eliminate.

  44. Ali Whitty left a comment on September 27, 2010 at 5:53 am |

    Hello,

    Great plug-in, However How can I get the drop down menu to sit on TOP of my dynamic content gallery on the home page? It disappears underneath the images. Any ideas. The dynamic content gallery is in my page.php folder.

    Kind regards

    Ali

  45. khoren left a comment on February 8, 2010 at 1:33 pm |

    I`ve tried creating drop down page on header blue green theme but it seems the color did not match with header background color.
    How it should be as i`ve tried online Suckerfish Dropdown CSS Generator and did not find any color code that is same as my recent theme header color.
    What is the Header color code of theme blue green?
    If you don`t mind please do me in favor to handle this issue as you are the one who is capable of.
    A million thank for the theme and the forward help

  46. maria left a comment on January 6, 2010 at 10:59 am |

    How do I recognise the navigation menu code in my header.php page?!

  47. Ricardo left a comment on October 19, 2009 at 6:58 pm |

    It does not work when I want to display categories….

  48. Uchan left a comment on April 10, 2009 at 1:47 am |

    Seems that the link you provide for creating the CSS style is dead. This is the correct link for it

    http://pixopoint.com/suckerfish_css/

    Btw, I can’t make this dropdown works (menu don’t show) on my IE6. Do you have any solution for this?

  49. ty left a comment on March 18, 2009 at 5:42 pm |

    i go through all the steps but get to the page that will generate my css and it’s dead.

    wtf mate?

    it’s cool of you to make this plug in but my work is for naught. could you take it off the market if you’re not going to keep it up so other people don’t have to go through this.

    thanks mate

  50. Avans left a comment on February 19, 2009 at 10:48 pm |

    thanks for your article, before read your article i really confuse how to use a drop down menu for my web blog, now i can manage it as much as i want and depend to my own style, it really help me out, thanks

  51. Mana Tulberg left a comment on November 12, 2008 at 6:40 pm |

    Thank you for this awesome post.
    You mentioned “The plugin also gives you options to choose the menu items that you want to display in the menu.”
    How do I do that?

  52. Jacques left a comment on November 10, 2008 at 11:00 am |

    Thanks I will try this out

  53. FJS left a comment on October 17, 2008 at 9:12 am |

    Thanks for this little tutorial. It works!

    Little question:

    Is there also a (dark) blue version of the deFusion theme?

  54. Ashley left a comment on October 13, 2008 at 8:04 am |

    <li >

  55. Ashley left a comment on October 13, 2008 at 8:03 am |

    Should the header look like:

    <li >

    ? I can’t see the menu ??

    Ash

  56. ??????? left a comment on June 19, 2008 at 8:49 am |
  57. drew left a comment on June 10, 2008 at 12:28 pm |

    How do I exclude pages? Also, I’d like to only have certain pages (subpages) be in the drop down under other specific pages. any ideas?

  58. Audit left a comment on May 20, 2008 at 12:27 am |

    Audit Firm β€œFemida-Audit” is registered to carry on the following activity: audit business, consulting, consultancy, accounting and accountancy, financial analysis, debts rescheduling, head hunting, staff appraisal, staff training, staff selection.

  59. Gabriel Rodriguez left a comment on April 25, 2008 at 3:15 pm |

    Here there a way to make a menu for the side navigation bars on WP?

  60. Bob left a comment on April 16, 2008 at 7:08 pm |

    Hi Jai,

    I struggled with it for about 4 hours last night and couldn’t sort out how to add Suckerfish to your Chronicles theme. This is the last piece I need to move my site to that theme permanently (or at least for a long time). Any suggestions? Thanks in advance for the help!

    If this can be accomplished, I’ll be hitting that PayPal donate button.

    Bob

    P.S. With a little WordPress.org forums help I was able to get the graphic into the right place at the top right of the website.

  61. Karri left a comment on April 12, 2008 at 11:25 am |

    Any tips how to install this into Semiologic custom.php file?

    Thanks πŸ™‚

  62. David left a comment on April 8, 2008 at 11:47 am |

    This is what i want,thanks for your guide.

  63. Booto left a comment on April 3, 2008 at 10:23 am |

    It’s a good ways.tks

  64. abeku left a comment on April 3, 2008 at 12:29 am |

    It is awesome tips..i already download and will try it out.

  65. Ryan left a comment on April 3, 2008 at 12:20 am |

    Hi,
    Thanks for the post about my plugin and generator page πŸ™‚

    I need to fix that #222 problem. It’s meant to enter a standard looking CSS intially, but for some reason I forgot to add that and didn’t realise till recently.

    I also have a beta version of the plugin which has some extra features … Beta Dropdown plugin

  66. paydjo left a comment on April 2, 2008 at 8:57 pm |

    thnx for this tips

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project