How to Add a Drop Down Menu to your 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!

Articles, Tips

Add Menu, Drop Down Menu, Modification, Theme, Wordpress

» 25 people left comments { Collapse all | Expand all }

ty buzzed on March 18th, 2009 | 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

Avans buzzed on February 19th, 2009 | 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

Mana Tulberg buzzed on November 12th, 2008 | 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?

Jacques buzzed on November 10th, 2008 | 11:00 am

Thanks I will try this out

FJS buzzed on October 17th, 2008 | 9:12 am

Thanks for this little tutorial. It works!

Little question:

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

Ashley buzzed on October 13th, 2008 | 8:04 am

<li >

Ashley buzzed on October 13th, 2008 | 8:03 am

Should the header look like:

<li >

? I can’t see the menu ??

Ash

??????? buzzed on June 19th, 2008 | 8:49 am

drew buzzed on June 10th, 2008 | 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?

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!

Blog Oh Blog

Of the Bloggers, By the Bloggers, For the Bloggers