Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Checking wp_nav_menu to see if li has sub-menu WordPress

  • SOLVED

Currently using below script in our page template:

<?php wp_nav_menu( array( 'theme_location' => 'main-header-menu' ) ); ?>

With the following in our functions.php file:

function register_my_menus() {
register_nav_menus(
array('main-header-menu' => __( 'Main Header Menu' ) )
);
}


We need to add some sort of filter to the above menu so i can get the desired output below. (please not: I do not want to strip out any wordpress default classes or ids - example below is just a simple streamlined illustration for clarity)

<ul>
<li>Primary Link</li>
<li <strong>CLASS="DROPDOWN"</strong>>Primary Link
<ul class="sub-menu">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
<li>Primary Link</li>
<li>Primary Link</li>
</ul>


The class "DROPDOWN" should only appear on the List Item that contains a sub menu.

If you need any more clarity please let me know :)

Answers (3)

2011-11-08

Luis Cordova answers:

try to check these similar solutions:

[[LINK href="http://wpquestions.com/question/showLoggedIn/id/1522"]]http://wpquestions.com/question/showLoggedIn/id/1522[[/LINK]]

and

[[LINK href="http://wordpress.stackexchange.com/questions/22809/wp-nav-menu-add-class-to-every-nth-item"]][[/LINK]]

I have done this in particular but trying to search for the code. But this should help.

Thanks!


Numberg comments:

Thanks for your reply but I do not want to use a Custom Walker Class.


Luis Cordova comments:

not the walker there is a solution without it in one of the links


Luis Cordova comments:

you can try some jquery but really you are relying on people to have always js enabled:


jQuery(document).ready(function($) {

$('ul.sub-menu').parent('li').addClass('dropdown');

}


Numberg comments:

Looks like a good solution but can't seem to get this to work... Not sure why but looks the jquery function is not targeting the parent li


Luis Cordova comments:

the problem is the sub-menu part you can't just throw this in there, paste your url or the specific page please


Luis Cordova comments:


jQuery(document).ready(function($) {

if ( $('ul.menu li').children().size() > 0 ) {
// this too is another way
}

}


Luis Cordova comments:

got login info, working on it


Numberg comments:

Sorry I am working locally so i cant share the current page i am working on. I was trying to use:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('ul.sub-menu').parent('li').addClass('dropdown');
}
</script>


Are you able to supply us with something tested that works for desired menu?


Luis Cordova comments:

oh wrong window sorry :)

2011-11-08

Peter Michael answers:

Another approach would be to add the class via jQuery:

jQuery(document).ready(function($) {
$('ul.sub-menu').parent('li').addClass('dropdown');
}


<em>Untested</em>

2011-11-08

Utkarsh Kukreti answers:

jQuery(document).ready(function($) {
$('ul.sub-menu').parent().addClass('dropdown');
});


Numberg comments:

Thank you very much!