How To Create A Dropdown Menu Of WordPress Categories Without Using Code
A long standing pain point I’ve had with WordPress is the inability to use the menu administration area to easily add a dropdown list of categories to my theme’s main menu. While the menu system provides the means to add categories to a menu, it doesn’t contain a way to easily create a dropdown list of categories. Thankfully, there is an easy work around that accomplishes the goal without using code. Thanks to Sami Keijonen who told me about this technique on the ThemeHybrid support forums.
Start by browsing to Appearance – Menus. Select the menu where you want the link to be displayed. Create a new Link menu item and use # as the URL with the link text of categories. Then click the Add to Menu button.
Select which categories you want to be displayed within the dropdown list. After you add the categories to the menu, make sure to drag and drop them so that they are a child link underneath the parent menu of categories. Look at the following screenshot for reference.
After you’ve arranged the category links, save the menu. Visit your front page and hover over the categories link to make sure the dropdown list works correctly. The parent menu item of categories acts as a placeholder which is the ingenious part of the tutorial.
By using this technique, I can modify which categories and what order they are displayed using the WordPress menu manager. I don’t have to worry about it disappearing via plugins or by switching themes. Thanks again to the always helpful, friendly, ThemeHybrid support forums for this tip.
20 Comments
Wow. How cool, elegant, and practical is this tip? …It’s so easy, even Steve can do it. Thank you for sharing.
(And, yes, the community and folks at ThemeHybrid are awesome! A mere $29 paid annually to access support while helping Justin Tadlock’s effort of free themes, plugins, and overall WP contributions at ThemeHybrid.com is a bargain!)
Report
That make me smile on a good way. Glad that this was helpful to Jeff and to you.
Report
Nice @ThemeHybrid shoutout :)
Report
I’ve got a feeling that once you’ve created the menu you can remove the # and the menu will still work but not show the top level “categories” menu item as being clickable when you hover over it.
Just makes it look a little neater.
Report
I just removed the pound sign and left the URL blank. Seems like it’s still acting as a link though.
Report
It should still show the dropdowns but not display as a link (i.e. show the finger icon) when you hover over “categories”
“categories” is not a link it is just there to display the dropdown, so it shouldn’t indicate that it is a link – can be confusing.
Does the finger icon disappear when you remove the pound sign Jeff?
Report
Yeah, still shows the hand icon when I hover over Categories.
Report
Hover over the “Themes” menu item on this site Jeff – it doesn’t show the hand icon but it shows the dropdowns.
http://www.wmwebdesign.co.uk/
Not sure why you still show the hand icon – clear cache?
Report
Seems that there’s a style in your theme explicitly setting all “a” tags to have “cursor: pointer”, which will override the browser’s behavior when there’s no href.
Report
Well spotted @dlouwe
Just had a peek with Chrome dev tools and there it is:
a {
cursor: pointer;
}
Hand goes away when that is removed.
Report
Did you notice if the hand goes away for all other links when you removed that code?
Report
No it’s fine with the other links.
Give it a try using firebug or dev tools.
Report
The hand is all gone thanks to Sami’s code.
Report
You can target that menu item with this CSS in child theme style.css if you want.
#menu-primary li.menu-item-15916 > a {
cursor: default;
}
But I don’t mind the hand.
Report
Thanks Sami, that did the trick.
Report
Looks good Jeff
The main point here is that we take the awesome WordPress menus for granted.
In the old days of HTML / CSS sites you had to start with an unordered list, remove the symbol, float left….
Point is that it took ages and now with WordPress we just drag them around – love the WordPress menus.
Report
On my Hybrid News theme, the menu works but the drop down menu pushes the page down. Any ideas?
Report
Soo the dropdown code is now included in core?
Report
Actually I’m kind of lost. Are you using referring to Pages as the menu you are wanting the link to be displayed in here? Or can I pick a page from the pages listed in the menu to create the dropdown menu from as I only have one menu list of pages? I need to create dropdown menus for the different categories.
Hector Garcia
Report
Nothing to do with pages. The main menu item is a link with no URL, The sub menu items are taken form the Categories box. If you don’t see it, enable it in Screen Options at the top of the page.
Report
Comments are closed.