How to Add a Drop Down Menu to your Theme

Published On April 2, 2008
56 Comments Leave a Comment

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!

56 replies on “How to Add a Drop Down Menu to your Theme”

situsmedis.blogspot.com Reply

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

spekhargaponsel.com Reply

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

Fat Burning of NatureWise of YoungYou Reply

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 .

purple dr dre headphones Reply

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.

Niels Reply

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

Telecharger Reply

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

Amrish Reply

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

Jackelin Reply

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

Imran Korai Reply

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.

Elissa Reply

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?

Irfan korai Reply

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.

Stories for kids Reply

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

Frank Reply

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.

JR Reply

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.

Marlene Reply

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.

Sean Serritella Reply

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.

Ali Whitty Reply

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

khoren Reply

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

Uchan Reply

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?

ty Reply

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

Avans Reply

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

Mana Tulberg Reply

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?

drew Reply

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?

Audit Reply

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.

Bob Reply

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.

Leave a Reply to Akash Cancel reply

Your email address will not be published.