Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

How to enable dropdown menu in WordPress

I have a very simple WordPress theme and I can't figure it out how to enable a drop down menu.

In functions.php I have:

add_theme_support( 'menus' );

In my header.php I have:

$args = array 'menu' => 'main-menu', 'echo' => false ); echo strip_tags(wp_nav_menu( $args ), '<a>');

So what else should I do?

In WP codex I've found that wp_nav_menu() accepts *depth, which means how many levels of the hierarchy are to be included. The defaul value of debth is 0 and means that all the levels will be included. So, if I got this right sending debth to wp_nav_menu is not needed as it already does what I need.

And yes, in the Dashboard/Menus I have positioned the pages that I want to be sub-pages one level to the left.

So, any idea what is missing? TNX, M.

7 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi, I know you didn't want to mess up the code, but when you remove strip tags does it give you the proper nested lists that you would want for a drop down menu?

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Yes! That is just what I wanted to write to Gareth right now. Removing strip tags gives ul sub-menu inside li of ul main-menu and that I can grab with CSS. Thank you both!

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

First of all, any reason you are wrapping wp_nav_menu in strip_tags? That seems counter productive as the wp_nav_menu is trying to output html, but then you're removing the html tags by wrapping it in that function? You might want to remove that function as it's not needed.

Second, are you getting any output at all? You also don't need the echo as it seems that function doesn't require it as it probably already sends out the html from the function.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

The code is from the Treehouse WordPress course How to Build a Theme with WordPrees. Yes it does complicate thigs, but I would rather not change it now because it works. It displays a menu. But not a dropdown manu.

strip_tags removes (if I remember it correctly from the video course) removes ul and li. Why? Because the HTML and CSS are very basic ones (<a> elements wrapped directly into nav elements. Its a very basic example. So can we live it like that. If I change that I will need to change CSS which is not something I would like to do now. I just need a dropdown menu :))

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

Does the menu show all the links, even the sub page links when it is shown?

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Yes, it does show the subpages but in the same line as main pages. So not below a particular page when you hover it. You know, like a typical drop down menu does.

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

So then the rest is either CSS or JS. The function just displays a set of html that you have to format into the dropdown, it doesn't do it automatically.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

But if I inspect element all the a elements are the same. There is no class, no id to grab with CSS.

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

You'll need to provide those in your arguments that you set before calling the function.

http://codex.wordpress.org/Function_Reference/wp_nav_menu

You can add the class and ID's there to have stuff to grab.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

:) I'm a bit lost now. I don't see which paramether of wp_nav_menu() would allow me to set a ceratin class to a subpages and some other to a sub-sub pages ...

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

There's a lot of different ways to do, and I'm probably not the best person to ask, but you can Google a few of these things and find ways to extend this. This tutorial for example is a good one.

http://perishablepress.com/css-dropdown-menu-wordpress/

You might also be able to look for more videos on here that can explain how you'll accomplish this.