Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I registered my menu in functions.php, called it from header.php and set it all up in the Appearances > Menus backend. The problem is, I need to manually insert a div surrounding <ul class="sub-menu"> ... </ul> where my drop-down menu is.

There is no way around it like adding the div's class to the ul etc., as in order for it's drop-down functionality to work it must be inserted in that way, so that my code can be:

<div class="dropdown">
    <ul class="sub-menu">
        <li>
        <a href="#">Menu Item</a>
        </li>
    </ul>
</div>

Is there any easy way to get that <div class="dropdown"> and </div> part in easily? Or would the only way be by writing a script?

Thank you!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Update: The question was actually how to wrap the submenus, not the whole menu. Here are 2 options:

using jQuery:

<script type="text/javascript">

// run this before the script that sets up the dropdowns:
jQuery(document.ready(function($){
    $('.sub-menu').wrap('<div class="dropdown"></div>');
})

</script>

using PHP 5.3+ (slightly more complex option, but thought i'd post it):

<?php
$dom = DOMDocument::loadHTML(wp_nav_menu(array(
    'menu' => 'main', // change this to your theme location
    'echo' => false,
)));

// Find all uls
$uls = $dom->getElementsByTagName('ul');

// Find & wrap each sub menu
foreach ($uls AS $ul) 
{
    if ($ul->getAttribute('class') == 'sub-menu')
    {
        // create the dropdown wrapper div
        $wrapper = $dom->createElement('div');
        $wrapper->setAttribute('class', 'dropdown');

        // Replace ul with this wrapper div
        $ul->parentNode->replaceChild($wrapper, $ul);

        // Append this ul to wrapper div
        $wrapper->appendChild($ul);
    }
}
echo $dom->saveHTML($dom->getElementsByTagName('div')->item(0));

?>

// OLD ANSWER:

Check out the container_class option of wp_nav_menu(): http://codex.wordpress.org/Function_Reference/wp_nav_menu

Your menu's ul will automatically be wrapped in a div; you can set the class of the div using that option:

<?php
wp_nav_menu(array(
    'theme_location' => 'my_location', // change this to your theme location
    'container_class' => 'dropdown',
));
?>
share|improve this answer
    
Hey Jessica. Thank you for the answer. I'm actually using container_class at the moment to wrap the entire menu in a div, but what I need to do here is wrap just the sub-menu <ul> part from above in a div. –  bryceadams Jun 20 '12 at 14:59
    
@brycead Oh, missed that! In that case, there are a couple ways I can think of to accomplish this. Do you know if your theme uses jQuery? If not, do you know if you're running php 5.3? –  jessica Jun 20 '12 at 15:34
    
The theme's one I'm building at the moment, and yeah the whole dropdown menu bit will ideally be using jQuery. I'm building it using the Gumby Framework (gumbyframework.com) and I suppose for the dropdown jQuery to work the dropdown part of the menu needs to be wrapped in that div. Yep php 5.3+ –  bryceadams Jun 21 '12 at 11:32
    
@brycead Cool, I updated my answer with some options you could use.. :) –  jessica Jun 21 '12 at 18:27

I don't know if I'm missing something, but for what I understand what you need is as simple as the following:

<div class="dropdown">
<div class="whatever">
<?php
wp_nav_menu(array(
'theme_location' => 'my_location', // change this to your theme location
'container_class' => 'dropdown',
));
?>
</div>
</div>

but then again, not sure if I'm understanding your question

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.