Big News Premium Theme
Company Premium Theme
Freedom Premium Theme
ColorPress Premium Theme
Tiny News Premium Theme
WebPress Premium Theme
Slurpie Premium Theme
SlidePress Premium Theme
Vanilla Sky Premium Theme

Apr
02

How to Add a Drop Down Menu to your Theme

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!

This post was viewed times

60 Comments to “How to Add a Drop Down Menu to your Theme” | Leave a Comment!

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

  2. Telecharger says:

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

  3. Rams says:

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

  4. Amrish says:

    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

  5. Nicole says:

    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!

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

  7. Jackelin says:

    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..

  8. Zahid Farid says:

    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

  9. Zahid Farid says:

    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

  10. Imran Korai says:

    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.

  11. Suganya says:

    Thank you…Very nice, it worked properly…Great

  12. Null says:

    Sorry the plugin could not be downloaded.

  13. graham says:

    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.

  14. Elissa says:

    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?

  15. Irfan korai says:

    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.

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

  17. Irfan korai says:

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

  18. Akash says:

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

  19. great post its help me..

  20. Thanks a ton.It worked :)

  21. Chirag Patel says:

    i have tried this on my blog,And working perfectly.Thanks for such a nice article :D

  22. anitha says:

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

  23. Daniel says:

    additional info.

    I am using dandelion wordpress theme for my website

  24. Daniel says:

    Would you please explain step 2 further.

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

  25. Frank says:

    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 says:

      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?

  26. sangeeta says:

    thanks,
    this help me alot

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

    • JR says:

      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.

  28. Marlene says:

    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.

  29. Nice information. Thanks to admin for this tips.

  30. Ayush Gupta says:

    Thanks. Works perfectly. Thank you

  31. florin says:

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

  32. 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.

  33. Ali Whitty says:

    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

  34. khoren says:

    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

  35. maria says:

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

  36. Ricardo says:

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

  37. Uchan says:

    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?

  38. ty says:

    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

  39. Avans says:

    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

  40. Mana Tulberg says:

    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?

  41. Jacques says:

    Thanks I will try this out

  42. FJS says:

    Thanks for this little tutorial. It works!

    Little question:

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

  43. Ashley says:

    Should the header look like:

    <li >

    ? I can’t see the menu ??

    Ash

  44. drew says:

    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?

  45. Audit says:

    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.

  46. Gabriel Rodriguez says:

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

  47. Bob says:

    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.

  48. Karri says:

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

    Thanks :)

  49. David says:

    This is what i want,thanks for your guide.

  50. Booto says:

    It’s a good ways.tks

  51. abeku says:

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

  52. Ryan says:

    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

  53. paydjo says:

    thnx for this tips


Websites that Link to this Post

  1. How to Add a Drop Down Menu to your Theme | Blog Oh Blog » Web Design
  2. Add sub menu to wordpress « PINGWIRE
  3. FayeC Web Studio :: Web Design and Development » Best Wordpress Tutorial sites
  4. [6] ???? ??????? ? ?????????

Leave a comment

AU Internet Shopping full version Win 8 OS Latest illustrator software Improved Adobe fireworks software Extended animation software Myshopping
WordPress Hosting Reseller Hosting VPS Hosting Image Map

Search :
Browse :
Archive :

$$$ Make Money $$$

Become an Affiliate

Welcome to Blog Oh! Blog's affiliate program! I personally invite you to make money by selling all of Blog Oh! Blog's Premium themes.

You will get a whopping 25% share on each sale generated through your affiliate link.

All you need to do is sign up as Blog Oh! Blog's affiliate, choose a banner, paste it on your website or blog and wait for sales to happen. It's as simple as that!

All affiliates will be paid on 10th of every month. Your affiliate earning needs to be a minimum $50 to get paid for each month.

Here is the sign up link and here are some banners to get you started!