At some point when working with WordPress you’ll likely want to display your page links in a dropdown navigation bar. While there are many plugins that will do this for you, none are necessary as coding a dropdown menu in a WordPress theme is rather easy.
Below I’ll show two simple ways to have WordPress create the html for a flexible and dynamic drop down menu in your theme. I won’t be covering the css styling in the post. If you’re unfamiliar with how to develop drop down menus in general here are two posts that will show you how.
I’ve been using the Suckerfish menu for years. It’s fairly easy to understand and uses a very small JavaScript file for older version of Internet Explorer. I believe IE8 no longer needs the JavaScript, but all previous versions do. I may be wrong about it being necessary for IE7, but it’s definitely needed for IE6 and below.
The second link above is an example of a css only drop-down. You’ll have to view the source code to see how it’s done. I’ve never used it myself, but the author, Stu Nicholls has tested it across many browsers and versions.
Typical HTML in a Drop Down
In general any time you want to create a menu or navigation bar think unordered lists in your html. For a typical dropdown menu your html might look something like the following:
{code type=html}
{/code}
The code above is a simple nested list. Two keys to note are first that the nested list comes before the closing </li> of the menu item that will contain the drop down. A common mistake is to forget to add the nested list inside the list item. The other key is we’ve given the outside <ul> an id so we can hook into it through our css.
Again I’ll point you to either of the two links above for styling a drop down menu. If you’d like me to write a post in the future showing the css and developing the full menu from scratch, leave a comment below.
Creating the HTML in WordPress
Editing the css file of a WordPress theme is straightforward. The hard part in creating the dropdown navigation is getting WordPress to display something close to the html above. Many people will hard code the html into their header.php file and while that works, it’s not particularly flexible. If you add a new menu item, you need to add another line of html in the appropriate place.
A better solution is to use a WordPress template tag to produce our html. There are two template tags that can produce the code we want. One has been around for years and one has only been with is since WordPress 2.7. Each has its advantages.
Dropdowns with wp_list_pages()
wp_list_pages() has been around for awhile. It outputs your pages as a series of links wrapped in list tags. Odds are your current theme uses this tag to produce your navigation. Not everyone knows how to use this tag to produce nested lists of pages, but it’s rather easy with the use of one parameter you include in the tag.
{code type=css}
{/code}
wp_list_pages() produces the list items, but not the <ul></ul> so I’ve hard coded those tags and added our id to hook into the list. The tag only lists your pages and since your home page often isn’t a WordPress page, but rather your index.php page, I’ve included a line of code to display the index.php page in the menu.
You’ll notice the added line also checks to see if the home page is the current page and if so it adds class=current_page_item. This class is used if you want to highlight the current page or style it in some unique way. wp_list_pages() will automatically add that class to the links if creates and so it’s a good idea to add it to the home page link as well.
Let’s look more closely at the one remaining line of code above
{code type=css}
{/code}
We’re passing three parameters to the wp_list_pages() tag. The first title_li is set to nothing, since we don’t want a title displayed. The second sort_column is set to menu order which will display our pages in the order we’ve specified through the admin side of WordPress. The last parameter depth is what actually creates our nested lists.
By default depth=1, which is why most menus in WordPress will only show our top level pages and not all your nested pages. By changing the depth to 2 WordPress will go one level deeper in producing our html and we’ll get a nested list, which we can style to be a drop-down. The code produced will look something like:
{code type=html}
{/code}
The actual source of the links would be included and, of course, the menu items would be called whatever you named the pages. wp_list_pages also gives you two additional classes to hook into, page_item, and page_item-#. The important thing to note is that we now have a nested list.
You’re not limited to a depth of 2 either. If your pages go 3 levels deep you could have depth=3. You could go even deeper, though if you need more than 3 levels you probably need to rethink how you’ve organized your content.
Dropdowns with wp_page_menu()
As of WordPress 2.7 we now have the wp_page_menu() template tag, which produces essentially what we did above in a single line of code.
{code type=css}
{/code}
wp_page_menu() is actually a wrapper around wp_list_pages() so you can pass the same parameters as well as a few extras. One of those extras is show_home. By setting show_home to 1, we’re telling WordPress to include our home page in the menu. Setting it to 0 would tell WordPress to ignore the home page.
Here’s the html that gets created by the above:
{code type=html}
{/code}
The code is similar to what we were able to produce with wp_list_pages(), though not quite the same. You can still use it to style your dropdown, but the differences will determine which tag you prefer to use.
First notice that our hook (class=menu) is added to a wrapper div instead of the list itself. You can set the class name via the menu_class parameter and the fact that we’re using a class instead of an id doesn’t really affect anything. The wrapper div isn’t necessary, though it’s often used in coding drop downs. You may or may not want to include it, which would determine your choice in tags.
Ian Stewart has written a nice post on how to add a class or id to the list through a WordPress filter.
The other major difference is that our home page doesn’t get the current_page_item class added. If you were hoping to use it to style the current page’s menu item then you may want to go with wp_list_pages() where you can add it as I did above.
You could also adapt Ian’s filter to add the current_page_item class. Justin Tadlock has also written a post on wp_page_menu, including his own filter, as well as a post on developing a widget for your page menu using the wp_page_menu() tag
Summary
While I’ve spent a lot of time showing you how these two WordPress template tags work and the code they produce, it won’t take you a long time to get comfortable using them.
Give both a try and familiarize yourself with the codex pages for each so you can see the parameters you can use with them. Remember that any parameter you can use with wp_list_pages() you can also use with wp_page_menu(). The latter then adds a few new parameters to the mix.
The next time you want a dropdown menu in your theme, don’t reach for a plugin or hard code your navigation. Just look to use either of these two template tags.
Download a free sample from my book, Design Fundamentals.
A great post. Could you also include how to do the CSS for this.
I know some people that would appreciate getting the full picture of.
Will do. I’ll work up something putting the whole thing together with the css.
Below a valid code for dropdowns with wp_list_pages().
<li id=”home” < ?php if(is_page(‘home’)){echo “class=current_page_item”} ? ><a href=”/index.php”>Home</a></li>
I’m not sure what you’re trying to say.
I’m trying to say that your code is not valid. In my humble opinion there are two mistakes: you forgot to put a semicolon after echo function in if-then construction and > (to close the li tag). Am I correct?
Oh, got’cha. Yep the semicolon is missing. Oddly it is in the post. Either WordPress or the plugin for the syntax highlighting seems to be stripping it out. I had to go with the html entity to get it to display right. The missing > was all me. I just forgot to type it in there
I found another missing li tag later in the post and added it back in. My bad for too much copy/paste at the same time.
Thanks for pointing them out.
You welcome. 🙂
Please, edit my first comment, because it is not showing in right way (the php code was done. Thx.
BTW: is it possible to put here (in your comments) a working php code? Let’s check. 🙂 Is this safe? 😉
The comments won’t accept the php which is why it didn’t show before.
I put an extra space in between the open and closing php tags so now it’s pretty much displaying as you originally intended.
Thanks again for finding the errors and pointing them out.
bravo! i always hard coded navs but making them this way will help in generic temps
I use the wordpress plugin http://pixopoint.com/multi-level-navigation/ – works tremendously well.
Thanks for the advice, this is really useful.
I share this with you…
http://webhost.bridgew.edu/etribou/layouts/rMenu/
Cheers.
Thanks! Being more of an artist than a coder, I was uncertain of the simplest way of doing this. Knowing that I didn’t want to hard code this because I’d have to update it every time my wife created a new page, I’d been looking for a way to do this dynamically, from plugins, to reverse engineering someone else’s theme.
Your information had me up and running in less than half an hour. The CSS around it on the other hand, that took the rest of the day. Then of course, I was also dealing with the IE Z-Index bug. I solved it for 7, and finally just disabled the dropdown in 6. In all, I’m pretty happy, and not too worried that I’m not supporting IE6. They can still get to the parent page, anyway.
Glad to help Chris. One of the nice things about WordPress is there are plenty of tags like this one so that you don’t have to hard code a number of things that will end up being dynamic.
Sorry I didn’t give the css here. At some point I’ll write a post on how to set up the css for a menu like this one, but it would have taken more than I could cover here in this one.
Did you use either of the two systems I mentioned at the top of the post? The suckerfish menu works in IE6, though it needs a little tweaking. I’m not sure about the other system, though I would think it would work in IE6 as well.
i have been search for this king of menu for one of our clients. can you include the css for this..big thanks..
I do plan on showing the css for this in a future post. Since I’ve had a few requests for it, I’ll try to get that post written sooner rather than later.
Wow! I was wrestling with my one-menu-level theme and tried different plugins but I could not format them properly.
By reviewing your post and code all I did was change the level from “1” to “2” in the menu code in my header.php and instant drop-down menu!
Thank you for this information.
Glad to help Jeff. I discovered the level thing one day when I was wrestling with a menu on a theme too. I was thinking it was going to be much more difficult and then stumbled on the depth parameter.
So much easier than I expected.
Thanks alot for this tutorial. This was exactly what i needed. Thanks again.
Glad I could help.
Thanks a lot! I really wanted to find a way to add customized classes to the automatic generated list elements. 🙂
Glad to help. Fortunately it’s not too hard. If you ever want a template tag in WordPress to do something always check the parameters you can use on the tag. Not always, but often enough what you want is built into the tag and you just need to set the right parameter.
Thank you very much for spending the time to write this article. I have been looking for a solution regarding the HOME link to be part of the nav. I have always been using wp_list_pages() and now you introduced me to wp_page_menu(). That’s fantastic. I can’t wait to go home and try all this out.
If you can include the css, that would be cool, but I think more importantly is the JS. Do you use a library? If so, which one? Maybe a snippet if you have time? No worries though, I’ll probably use YUI, with listeners on mouseovers, which will add classes to the ULs which will position then RELATIVELY. Something like that.
Glad I could help Gilbert. I used to use wp_list_pages all the time too and would have to hard code the home link. I was so glad when I discovered the wp_page_menu tag. It’s definitely more flexible and you can still use all the parameters you used with wp_list_pages.
I keep meaning to do a post about the css. I’d like to do it as a screencast, probably my first screencast, but I keep putting off learning how to screencast. I have the software, but haven’t been able to find the time.
Enough people have asked though, that I know I should just make the time, practice a couple of dry runs and do the screencast.
I use the suckerfish system to style the the drop down. It’s a pretty simple system. Most of it is css. The drop downs are positioned far off to the left and then the positioning is changed when you hover over the link.
Unfortunately older versions of IE don’t accept :hover on the list-item. There’s a small JavaScript file that dynamically adds a class called sfhover to the list-item when the mouse hovers over it.
What you end up with is css applied to both :hover and .sfhover in the same line of code. Once you use it once or twice it becomes easy to work with, though there are a few small got’chas I’ve found over the years.
I’ll do my best to practice and get the screencast going. It’s something I want to do and several people have asked me to post the css for the drop down.
I am new to CSS, so perhaps this is just my general ignorance showing, but…
how do you tell the CSS which part of the php’s results it’s supposed to affect? If the php for WordPress tells it to “print” three levels of pages, how do you differentiate, in the CSS, between the first level and the second and/or third levels? (In other words, I understand how the CSS would be used to create a drop-down menu with plain HTML, but I’m not getting how that “translates” to the use of the wp_list_pages element, since you can’t hard code an ID or anything into the nested list, to tell the CSS whether its working with the top-level or a sub-item.)
I’ve been reading and reading trying to wrap my head around this, and it is just not clicking.
In the case of wp_list_pages() it’s putting out the list items, but not the list itself. If you look at my code you’ll see I wrap it with
<ul id=”nav”></ul>
The id gives you a hook into the menu. Now you can style:
#nav
#nav li
#nav li ul
#nav li li
#nav li ul li
Looking at the last line of css above, it’s saying to find any list-item inside an unordered list that’s inside a list-item that’s inside an element with an id=”nav”
The line above it without the ul will target the same thing.
That’s the second level of the drop down, but you could extend it further to target a third or 4th level. You don’t necessarily have a hook directly to the item you want, but you have a hook into the containing div.
wp_list_pages() does product some hooks of its own for example “page-item” and “page-item-#” That won’t distinguish between the 1st level and 3rd level of the drop down, but they’re still useful.
I hope that makes sense. If not let me know and I’ll try again.
I actually have a post written that’s an introduction to using css. I’m holding back, because I thought it was too basic, but I’m thinking it may be worth posting, since we’re all at different levels of understanding about css.
Thank you so much! Yes, that helped. I get it now. 🙂
Glad I could help Rachel.
I just discovered that the “current page” thing does not work for the homepage if the blog is on a subdomain. It thinks “home” should be the root domain.
Do you mean when you use the is_home() conditional? You could try using is_front_page() instead. is_home() returns true when the main blog page shows and is_front_page() returns true when the home page of the site is displayed regardless of whether that page is a page or a post.
I’m not sure if the subdomain will still be an issue, but it’s worth trying.
One other thing you can try is using is_page(). You can add a either the post id inside or the page slug. So if your home page is called home and uses home as the page slug you could try
is_page(‘home’)
which should match the home page. If the id of that page was 3 you could also write it
is_page(‘3’)
Hopefully one of the above conditionals will work on the subdomain.
Yes, that’s what I meant.
Using the subdomain is actually a temporary thing for me (I’m playing with my template on the subdomain until I get it right, at which point I will copy it over to the root), but I thought someone else might need to know that. Your fixes sound great!
I’m glad you mentioned it. I certainly hadn’t thought about that before and I’m sure others will find your comment helpful as well.
Thanks.
I feel really backward about this but can’t figure out where to go to actually write the pages someone created for my blog drop down menus so that they will show up.
Thanks.
Denise do you mean how to create a new page in WordPress? It could depend on how your theme was coded, but assuming it was done with one of the methods shown above all you should have to do is create a new page.
In the WordPress admin there’s a section for creating pages and if you add a new one it should show up by default in the menu. If not then it’s possible your theme has been set up in a way that only shows certain pages. Hard to know though without being able to see the files directly.
If the above answers your question great. If not do you mind sharing a few more details of the problem. Maybe I can help without having to log in to your WordPress admin.
Thank for the nice Post, it seems fairly straight forward and works well if you only have a parent and child. But I am currently trying to also put in a grandchild, so depth 3. With that tho, it does not work correctly. It will not hide the grandchild if just the parent is selected. Any Ideas on that? Maybe something that needs to be done in CSS, since it is not indented then either? Thanks for the help 🙂
Thanks Maurice. Did you use the suckerfish system for the css and javascript? I use the code from sons of suckefish. On that page they show how to set things up for more than one level of dropdown.
If you haven’t already, give that page a read and a try. If you’re still having trouble feel free to come back here and post a link or email through the contact form on the site.
super tips wordpress
Steven I hope you can help me, I just don’t seem to get it. Here is my site that I am trying to get the drop down to work for. http://www.viewmytestsite.com
When I change the depth to 2, its like it adds another nav bar, but when I rollover the page titles in the nav I dont get drop down, even when I click on them I dont get drop down, not sure where to go from here.
Eric
I’ll try Eric. I’m looking at the site now and I see the one main navigation bar and I take it you don’t have the depth set to 2 at the moment.
Did you style the drop down in your css? I didn’t talk about the css needed here, but you do need to add the css or the drop down won’t work. The extra menu items will likely show in the main navigation until you’ve styled them.
If you can;t figure this out, send me a message through the contact form up and to the right. If you can create a page that does show with depth=2 set it’ll help me see what might be the problem.
Hi,
Need help.
<li id="home" >Home
Am using the above code , But i could’t able to see the child ul.
What could be the problem?
Am using old themes.
saro your code didn’t come through. Feel free to get in touch with me via the comment form above.
It’s quite possible it is your theme. Hard to know without being able to see the code.
Thanks mate worked GREAT ! seriously its not easy to find TRUE information on internet. That code worked for me perfectly. I had some custom java menu working behind my theme that ‘MenuMatic’ with javascript I just pasted your modified code of “Dropdowns with wp_list_pages()”.. didn’t uninstalled that javascipt though but just replaced the code into header.php lol.
Thanks again ! 🙂
Glad I could help Bilal. I like hearing that the code could just be pasted in and it works.
Hi, thanks for the article, but I still have a question. I can’t seem to get either way working for me. I’m trying to get the following html-output:
<!–
Home
News
Links
Link 1
Link 2
Link 3
–>
I can’t figure out how to get this and I’ve been tryin for ages now. Home, News and Links are Pages. Link 1, link 2 and Link 3 are Child Pages for Parent Page Links.
Could you please help me with this one? Thanks in advance!
Did you use depth=2 as a parameter? I show it in the first example with wp_list_pages()
depth=2 should be all you need. You could also have depth=3 if you needed another level of links in your menu.
Hopefully that works.
Thanks for the quick answer! The problem that I’having is that I can’t get the classes assigned through wordpress. I’m using images to create a navbar so I need the classes “top”, “top_link” and “sub”.
I’m using some of Stu Nicholls code for this. You can find an example at:
http://www.cssplay.co.uk/menus/pro_drop2.html
Sorry I didn’t get back to you as quickly this time. I linked to this post by Ian Stewart in this one about using filters to add classes and ids to the menu.
See if that helps.
I not feel free to email me or contact me through the form above and to the right. I won’t be around for the next couple of weeks, but I will take a look when I am back if you still need the help.
Thanks for this great tutorial, i like it more to code some html than install a new addon for every action. I´ll try this out. Sulkar
I’ve been looking for a good way to deal with sub-sub menus and I think your post helped. Thanks much.
Glad I could help Tim. If you have any trouble getting them to work feel free to drop back again and I’ll see if I can help.
Dear
please help I’ve a problem to insert created menu with DHTML software to Wordpress. what order of PHP i should write befor javascript so wordpress can appear my menu?
Where should I this order?
Thanks alot
Hard to offer specific advice without seeing the code. In general you want to look at header.php in your theme’s files and remove the WordPress code generating the menu and replace it with the menu you created.
However if you do that you won’t be able to take advantage of some of the things the WordPress generate menu offers.
Dear Steven
Thanks for your attention. No, I don’t want remove menu of wordpress I only want add menu made with DHTML or dreamweaver software to wordpress. for example I want to add following code made of Javascript (with DHTML software) to wordpress.
Preview
Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com
Sorry it took me so long to reply this time. Even if you don’t want to remove the WordPress menu the general idea is still the same. You want to find the theme file you want to the dhtml menu to be located in and add the code.
You shouldn’t need any specific php to make it work. You’ll probably have to style the menu to work with your theme, but for the most part you probably only need to drop in the code where you want.
The new menu is not going to work with the WordPress menu though. You aren’t going to have the dhtml automatically add new pages for example.
If you want them to work together your best bet is likely to let WordPress put out the html for the menu and then integrate the styles on the dhtml menu with the WordPress html. You may not be able to get things exactly as you want, but you should be able to get them close.
Help! I’m fairly new to Wordpress and only have limited PHP experience. Can you please explain what files each of these peices of code go in, where in those pages and also, where those pages are typically found?
Every tutorital I have come across seems to leave that crucial info. out!
Thank you!
Inside the main directory where you installed WordPress there should be a folder named wp-content. That’s where most file you’ll want to edit will live. Not just for this tutorial, but most any WordPress tutorial.
Inside wp-content there are some more folders. The one you want for the code here is the themes folder. Inside the theme folder will be a folder with the name of the specific theme you’re using.
So the files you want will be located inside
wp-content/themes/your-theme/
The specific file where you’d place the navigation code here depends a little on your specific theme. There’s no one file it has to be located in. However most likely you’ll want to place the navigation code in the header.php file.
There’s probably something toward the bottom of that file that controls the navigation. It could be any of the WordPress tags I used in this post. It might also be a new tag
wp_nav_menu()
wp_nav_menu() is the newest way to add navigation in WordPress. It didn’t exist when I originally wrote this post of I would have mentioned it.
I hope that helps. Feel free to fill out the contact form or send me an email if you need more help.
I have been working with the header.php file, and in it was a line that contained wp_page_menu, so I replaced it with your line of code below…
Now is there any other changes to code I must implement and if so where? What I don’t understand I guess is how then to set up the drop down menus, (configure the page titles/links, etc.) would I still use the Wordpress dashboard some how or must that be customized in the code? I am familiar with creating drop downs using code from Dynamic Drive but I have little PHP experience.
I just replied to your email. Hopefully the info helps.
Hi Steven,
Thank you for the excellent explanations! I’ve been working to implement drop down menus as you describe. I’ve set the wp_list_pages() function to a depth of 2 as you describe, then I edited the CSS appropriately (I thought) to have the pages dropdown… but i’m having the problem were I am either seeing all the child pages or none of them – I’m assuming i’ve got something wrong in the hover css but being new to css i’m rather lost. I’ve read both the suckerfish and pure css examples you linked to i’m still a bit confused. I would really appreciate any advice you have.
My menu code: http://pastebin.com/Q6Tf8n6c
(Yes, i’m using pages instead of nav, but i have the id in the header for wp_list_pages set to pages as well)
Thanks in advance!
Hi Tara,
I sent you an email with a question. Sorry it too me so long to respond.
Thank you, Steven. I appreciate you taking the time to respond. 🙂
I did eventually get it working. After talking to some others with similar issues, it seems the suckerfish model for CSS is preferable in WP 3.0+ as the pure css model can result in the menu disappearing altogether when the drop down is added. Switching to suckerfish solved the issue.
Glad I could help Tara. Yeah, pure css still doesn’t work in older versions of IE. I think other than that they do work though.
I’ve been using suckerfish for years and it’s worked so well I haven’t felt a need to look for something else. Glad it worked for you.
Hi Steve, Very helpful article. I am just wondering, in wordpress admin area I can create personalized menus and order them. Your method displays the default menu, is there a variable I can set to point to my own menu?
Ben you want to use wp_nav_menu(). Using it lets you create the personalized menus you want. It wasn’t available when I originally wrote this post, but it’s the template tag I would use now to create menus.
The tutorial is awsome, but I have got a doubt…When I tried to implement it in the KSYK theme, it is not working. It doesn’t show any error, but, the drop down menu is not show. How to make it work.?
I’m not familiar with that theme so I couldn’t tell you how to get it to show. It might be you’re adding the code to a different file than you should or there’s some other navigation code that’s taking precedent. It’s also possible there’s some css that’s hiding the navigation.
Hard to know without knowing how that particular theme is coded.
I have a question at the most basic level: What file (and where in the file) do I place this? Is it in page.php or header.php?
Generally the main navigation code will be in header.php, though it really depends on the theme. The navigation could be placed in other locations deepening on the design and who developed the theme.
Odds are the main navigation will be toward the bottom of the header.php file. Just know that it doesn’t have to be.
A good starting point for creating dropdowns in Wordpress. I use wp_nav_menu() a lot for main navigation. Is there a reason why you haven’t mentioned this option next to wp_list_pages and wp_page_menu()?
I haven’t created drop down menu in Wordpress yet but I am going to for the next project and currently researching possibilities. I need one that would work across all the major browsers and IE7.
Hi Petra. I didn’t mention wp_nav_menu() because it didn’t exist when I wrote the post. 🙂
I think wp_nav_menu() was introduced a version or two after whichever was the current version back in July of 2009.
As far as making sure the drop down works in IE7 that’s really more about the css and the html. As long as you can end up with the nested list structure you’re fine with your html. You’ll want to add an id or class here or there, but all browsers will be fine with the html.
I use the suckerfish system when it comes to making things work in older browsers where css alone isn’t enough. I linked to it in a few comments above. It basically adds a small bit of javascript to add and remove a class for browsers that don’t handle :hover on anything other than the link itself.
Hey Steven! Man I am desperately seeking how to add drop down menus to my wordpress theme…I am totally lost…can you help in anyway to shed some light.
With the newest versions of WordPress you just have to use the wp_nav_menu() code and you’ll be able to drag and drop menu items on the admin side.
This is an older post that may not even be necessary anymore.
If you want to use the menu code here the key is adding the depth parameter. That creates the html you need. For the css I use the suckerfish system, which I linked to at the top of the post.
Hope that helps.
Hi,
How can I list my articles to appear only on one page and use dropdown menu to display them so that viewers can see and read them?
For instance, using TAX MATTERS as the page: how can I show the following articles;
-How to treat tax issues,
-PIT (Amended)Act 2011,
-How to pay less Tax,
on the same page and using dropdown menu to enable users to locate them.
I hope you understand my question.
Hi Okey. Sorry it’s taken me so long to respond.
I’m not entirely sure I’m following your question. Are you asking how to keep the drop down menu in one place and have only the rest of the page change when people click a link in the drop down? Is the idea to have the menu code be all in one file so you don’t have to edit multiple pages to edit it?
If so I use php to accomplish that, though any server side programming language will do. They all let you include the content of one files inside another.
You could create one file called menu.php and then in your other pages add the include statement
include “menu.php”;
Is that what you were asking? If not ask again and I’ll try to do better,
You make it seem so easy but i am trying three days now! I must read some book, any sugestion?
I doubt you would need a book for this. The css is all in the article about the suckerfish menu at the top of the post. The html is output by WordPress as long as you add the depth=2 parameter.
In newer versions of WordPress you don’t even need the depth=2 since there’s now a menuing system that can be used which makes setting up menus even easier.
is there any direct plugin available for it?
I don’t know, but you really don’t need this code any more to get drop downs in WordPress. You can use wp_nav_menu() in recent releases, which will let you make use of WordPress internal meaning system, where you can drag and drop pages to create whatever hierarchy you want.
You’ll still need to style your menu, but that’s another topic.
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.
About “depth”, what if you put no limit on it? or should i used it as per level as you say?
If you don’t add any depth I believe you get a single level of navigation. I’m not sure why you’d want to add more than a couple of levels max.
With the latest versions of WordPress you don’t really need to do things this way.
Instead use wp_nav_menu. That will allow you to drag and drop menu items through the Appearance > Menus in the WP backend.
One thing that im having a problem is putting the dropdown correctly on my theme. Im not really that good in codes. So as you see on my site, i need to have a page dropdown menu working on my theme, so that i can expand my free services not just games.
I try the depth and its working. but im very bad at css. I need to see the main page with dropdown that is working like superfish.. Hope im making some sense. Thanks for the advice. Love to see rep from you soon.
I don’t see any drop downs on your site at the moment so it’s hard to offer suggestions about what you might need to do.
As far as the css is concerned, the suckerfish menu is what I’ve always used for drop downs. I’ve pretty much followed what they do in the article I just linked to.
Great tutorial, I also prefer to use superfish menu.
Wow. I read everywhere that anyone who understands xhtml and css can customize WordPress like it ain’t no thing, but I am learning fast that this only applies for people who already know what WordPress functions to call in the first place, to get something to “style.”
Thanks to you I now know how to get a nested ul dynamic site menu to Sukerfixh-ify. 😀
Glad to help Steve,
In truth you don’t really need to know WordPrss tags and functions. You could rewrite the CSS file in any theme and have a new theme.
However, usually you do want to do more. You can probably get by well even knowing just a few tags and functions. The tags and functions make it so you don’t need to know how to program in PHP.
You do have to learn them, but they are pretty easy to use.
Of course Suckerfish still works too.
How can I build a dropdown category menu? Thank you for the idea but I need the categories list to be able to dropdown. Any help?
Off the top of my head I have no idea so I did a quick search and found the WordPress function wp_dropdown_categories, which looks like what you want.