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

Chris Dziewa
Chris Dziewa
17,781 Points
Posted by Chris Dziewa
Chris Dziewa
17,781 Points

Creating a submenu in Wordpress

I'm building a portfolio site for a friend as a custom wordpress theme. Everything is functional except I can't figure out how to display a submenu when hovering over the gallery navigation button. The problem is I don't know how to access/retrieve the submenu from the WP_Query. I have heard "Extending the Walker class" tossed around quite a bit but the codex has terrible documentation on this subject.

Would anyone know how to achieve this? I don't know if this will help, but this is the header from the header.php file:

<header class="clearfix">
    <div class="logo">
        <!--[if lte IE 8 ]><img src="http://localhost/staffordphoto/wp-content/uploads/2014/01/stafford_logo.gif" alt="Stafford Photography"/><![endif]-->
        <!--[if gt IE8]><img src="http://localhost/staffordphoto/wp-content/uploads/2014/01/stafford_logo.svg" />
        <![endif]-->                 
        <!--[if !IE]--><img src="http://localhost/staffordphoto/wp-content/uploads/2014/01/stafford_logo.svg">
    </div>
            <ul class="nav clearfix">
                <?php  

                    $args = array(
                    'menus' => 'Main Menu',
                    'echo' => false
                    );
                    echo strip_tags(wp_nav_menu( $args ), '<a>' ); 

                ?>  

            </ul>       
</header>

Hope we can figure this one out!

5 Answers

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points
Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

You'll need to use a combination of CSS and JavaScript. Interaction like what you've described isn't possible with PHP.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

I understand that I can't do the styling in php, but my biggest question is how do I even access the submenu items themselves so that I can style them. Is there a special query?

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points
Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

Use your browser's inspector to reveal the code that's generated. If you're on a Mac, it's Command+Option+i. It'll usually be something like:

#main-menu-container ul li ul.submenu
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

This is actually on a custom theme. Currently it only outputs anchor tags even when there is a submenu item. If it were a simple styling task it would be easy and I use inspector quite religiously. Unfortunately what I need to know is how to change the output of the custom walker function of the core wordpress files. I'll keep searching but thanks for offering a your help.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

So I figured out why I couldn't get anything from the wp_query. I used the same code for the nav menu as Zac did in the tutorials but the only problem is he stripped out the tags because he didn't need them. Thanks again for your help Adam.

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points
Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

Sorry, been crazy busy at work. Glad everything worked out!