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

Posted February 23, 2014 11:49am by

how to make my Wordpress menu a drop down

how to make a wordpress drop down menu i followed the tutorial and it did not explain how to do drop down menus it did not explain allot of things and was extremely basic and now i am trying to develop a Wordpress theme and there is heaps i don't know how to do.

February 24, 2014 12:59am

/*

PHP/HTML

*/

<div id="navigation">



                 <?php 

$menuParameters = array(
  'container'       => false,
  'echo'            => false,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
);

wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

</div>

/*

CSS

*/



                #navigation { 
                    float: right; width: 75%; margin: 0 0 0 45px; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; }
                    #navigation ul { float: right; margin: 0; padding: 0; list-style: none; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; }
                        #navigation ul li { float: right; position: relative; height: 80px; margin: 0 10px 0 10px; padding: 0; font-size: 12px; text-transform: uppercase; color: #838383; line-height: 80px; font-family: 'proxima-nova', Arial, "Helvetica Neue", Helvetica, sans-serif;  letter-spacing: 0.33em; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; font-weight: 400; }
                            #navigation ul li a { color: #838383; text-decoration: none; -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; }
                            #navigation ul li a:hover { color: #000; text-decoration: none; }
                                #navigation ul li ul { display: none; float: auto; position: absolute; left: 50%; width: 190px;  margin-left: -95px; z-index: 99999; -webkit-box-shadow:  0px 5px 10px 1px rgba(0, 0, 0, 0.2); box-shadow:  0px 5px 10px 1px rgba(0, 0, 0, 0.2); }
                                    #navigation ul li ul li { float: left; width: inherit; background-color: #fff; text-align: center; border-bottom: 1px solid #eaeaea;  margin: 0; height: auto !important; line-height: 1.6 !important;}
                                    #navigation ul li ul li a { display: block; padding: 10px 0;  }
                                    #navigation ul li ul li a:hover { color: #fff; background-color: #e7e7e7; }

/*

 OUTPUT

*/



<div id="navigation">



                 <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32"><a href="http://localhost:8888/wordpresstheme.com/features/">Features</a>
<ul class="sub-menu">
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://localhost:8888/wordpresstheme.com/features/typography/">Typography</a></li>
    <li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-82"><a href="http://404.php">404</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-33"><a href="http://localhost:8888/wordpresstheme.com/blog-2/">Blog</a>
<ul class="sub-menu">
    <li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href="http://localhost:8888/wordpresstheme.com/category/fashion/">Fashion</a></li>
    <li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-77"><a href="http://localhost:8888/wordpresstheme.com/category/photography/">Photography</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/wordpresstheme.com/team-members/">About</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost:8888/wordpresstheme.com/contact/">Contact</a></li>
</ul></div>
</div>

            ```

8 Answers

February 24, 2014 2:00pm

I targeted the ul directly to get mine to work. Have you tried being more specific with your css selectors, e.g. in this case ul#menu-main-menu and ul#menu-main-menu ul.sub-menu? Do you have a link to your page to look at?

I didn't strip away any classes or ids but wrapped the menu php function within a tag with the appropriate ids / classes that I wanted applied to that tag.

Ah I remember I also had to double check how I had wrapped the jquery script so it would work correctly in wordpress on the main theme.js. It should have been corrected now, but here’s the link for that-

https://teamtreehouse.com/forum/corrections-to-how-to-build-a-wordpress-theme

February 23, 2014 1:07pm

I think here you should find answer : http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus This is article from theme developer about menus in themes.

Best Regards

February 23, 2014 1:15pm

Thankyou ! This is actually the most helpful information yet

February 23, 2014 8:07pm

I was able to create an accordion drop down menu after watching the treehouse tutorial. How you choose to manipulate the menu whether by using css, jquery etc. doesn't change from how you would apply to a static html site build. The difference is as I understood it, that your menu is dynamic, so any pages created or deleted automatically change in the menu without you having to manually go in and add remove pages by hard coding. But the principles of how to style and add functionality to that menu remains the same. No plugins used either.

February 24, 2014 12:04am

so your saying that t automatically activates the drop down menu and my css is the problem ? on the html version of my website drop down menus worked with the treehouse method of activating the menu the menu did work but it was not drop down.

February 24, 2014 3:06am

ok so what i need to do is change the way wordpress outputs it and get rid of there classes and ids currently Wordpress does this

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-48"><a href="#">Home</a></li>
        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="#">About</a></li>
    </ul>
</div>

i need this for my css to work 

<div id="navigation">
<ul>
  <li class="parent"><a href="#">top menu item</a>
<ul>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>                                                 
 </ul>
</li>  <li class="parent"><a href="#">top menu item</a>
<ul>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>                                                 
 </ul>
</li>  <li class="parent"><a href="#">top menu item</a>
<ul>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">sub menu item</a></li>                                                 
 </ul>
</li>
                                                                                                                                                                                                                                            </ul>
</div>
        ```

February 24, 2014 9:50am

February 23, 2014 12:01pm

starting to think treehouse is not the best way to learn Wordpress theme development, the tutorial was extremely basic, in reality we would need to know allot more. So so so so so much they did not cover. It would be impossible to build a professional theme for Wordpress that you would sell based on only the knowledge that was given .

February 23, 2014 12:42pm

Should it add drop down menus automatically or do you have to allow it from functions php ?

February 23, 2014 12:52pm

OK, so menu code is in header.php.

Function wp_nav_menu() is responsible for generating menu.

Here can you find args for that function http://codex.wordpress.org/Function_Reference/wp_nav_menu

You should compare you html template to wordpress template (section menu) and edit header.php in wordpress theme so in the end you had simillar divs, id's and classes like in your html template.

February 23, 2014 12:58pm

i already have that function wp_nav_menu() and my menu is display perfectly it is just not showing any drop down items. Comparing it to other themes that have drop down menus, they had a whole page for the menus called menu.php and i did not understand what they did, it was extremely different from what treehouse taught and did not work when i tried to apply it to my theme. Thankyou :)

February 23, 2014 12:53pm

OK, so menu code is in header.php.

Function wp_nav_menu() is responsible for generating menu.

Here can you find args for that function http://codex.wordpress.org/Function_Reference/wp_nav_menu

You should compare you html template to wordpress template (section menu) and edit header.php in wordpress theme so in the end you had simillar divs, id's and classes like in your html template.

February 23, 2014 12:38pm

I so disagree with you.

Just install the plugin from here http://wordpress.org/plugins/dropdown-menu-widget/

I just spend few seconds with google to find it.

February 23, 2014 12:47pm

i already have the css for my menu and for it's drop down, and the javascript for it, it was originally a html website.

also when using plugins and then exporting the theme i don't think it exports plugins with it so you would have to integrate it with the theme. It should not take a plugin to do a drop down menu we should know how to do it ourselves.

Not sure you understand i want to make professional Wordpress theme to sell.

Though thankyou for your input :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Ariel Beninca

Ariel Beninca

how to make my Wordpress menu a drop down

Ariel Beninca

Ariel Beninca

8 Answers

Nathalie C

Nathalie C

marcinlisewski

marcinlisewski

Ariel Beninca

Ariel Beninca

Nathalie C

Nathalie C

Ariel Beninca

Ariel Beninca

Ariel Beninca

Ariel Beninca

Nathalie C

Nathalie C

Ariel Beninca

Ariel Beninca

Ariel Beninca

Ariel Beninca

marcinlisewski

marcinlisewski

Ariel Beninca

Ariel Beninca

marcinlisewski

marcinlisewski

marcinlisewski

marcinlisewski

Ariel Beninca

Ariel Beninca