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)
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 :)
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>
Utkarsh Kukreti answers:
jQuery(document).ready(function($) {
$('ul.sub-menu').parent().addClass('dropdown');
});
Numberg comments:
Thank you very much!