The generated html of Wordpress menus is something like
<ul id="main-menu">
<li> home </li>
<li> About </li>
......
...
<ul class = "sub-menu">
<li> sub menu1 </li>
<li> sub menu1 </li>
</ul>
<li> contact us </li>
</ul>
Is it possible to give custom id & class names to ul
s and li
s?
You can change any number of things about the automatically generated menu and tree markup with Wordpress walker classes.
http://codex.wordpress.org/Function_Reference/Walker_Class
There's an example walker for wp_nav_menu near the bottom of that link in the resources section.
[Edit: and for menu items specifically with the defaults, you can enter a class for entry li's with the menu editor. You just need to turn on the option in Screen Options first.]
I'm integrated WP with Bootstrap, though I used this:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<?php wp_list_pages(array('title_li' => '')); ?>
</ul>
</div>
</div>
</div>
I also want to apply my class active to the current menu item, so I used:
$(document).ready( function ( e ) {
$('.current_page_item').addClass('active');
});
Hope this can give you ideas.
You can change everything you want in the Editor Menu in your WP Administration Menu.
You can edit yout html and css using your custom id and class
Look for wp_nav_menu in your header.php and footer.php files, and replace it with the following code:
<?php
$defaults = array(
'menu_class' => ' - your special class for the UL -',
'menu_id' => ' - your special ID for the UL - ',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul id="%1$s" class=" - your specific class for the LIs - ">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>