Custom Menu class names

  • I’m trying to create my first theme and I’m getting stuck when it comes to the navigation menu. I downloaded the theme Bare from here and started to adapt that to display as I want it locally.

    When it comes to my menu, when viewed in a browser, it displays

    <div id="menu" class="menu-nav-panel-container"><ul id="menu-nav-panel" class="bottom-menu-list"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-36"><a href="https://localhost/wordpress/">About Me</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://localhost/wordpress/?page_id=6">My Work</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://localhost/wordpress/?page_id=8">Acting On A Dream</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="https://localhost/wordpress/?page_id=10">Links</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="https://localhost/wordpress/?page_id=12">Blog</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="https://localhost/wordpress/?page_id=14">Gallery</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="https://localhost/wordpress/?page_id=16">Contact Me</a></li>
</ul></div>

    My question is, how can I do away with the class inside my <div> and how do I rename the ID’s and classes of the

      ,

    • tags to something more meaningful without loosing the current page designation?

    If anyone could help point me in the right direction I’d be quite releaved as this is doing my head in.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi lil_bugga!
    I don’t khown your theme, but if your site has a menu, you can check and change config information in header.php like this:

    <?php
wp_nav_menu(array(
 'menu'=>'Primary Menu',// name of menu
 'menu_class'=>'menu',// change ul class
'menu_id"=>'menu_id'//change ul id
 'container'=>'<div>',// add div wrap
'container_class'=>'xxx'
'container_id' =>'yyy' // like above
)); ?>

    hopefully useful

    Thread Starter lil_bugga

    (@lil_bugga)

    Hi thanks for the reply kevindng

    I had already tried similar myself and it only partly achieves what I’m aiming for. The code I’ve used inside header.php is

    <?php wp_nav_menu(
	array(
		'menu' => 'Primary Menu',// name of menu
		'container' => 'div',// wraps menu in <div> tags
		'container_id' => 'nav',// div id
		'container_class' => '', //class name of container div
		'menu_id' => 'nav_ul',//change ul id
		'menu_class' => ''//ul class name
	)
);
?>

    which gives me the following result

    <div id="nav" class="menu-nav-panel-container"><ul id="nav_ul" class=""><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-36"><a href="https://localhost/wordpress/">About Me</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://localhost/wordpress/?page_id=6">My Work</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://localhost/wordpress/?page_id=8">Acting On A Dream</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="https://localhost/wordpress/?page_id=10">Links</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="https://localhost/wordpress/?page_id=12">Blog</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="https://localhost/wordpress/?page_id=14">Gallery</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="https://localhost/wordpress/?page_id=16">Contact Me</a></li>
</ul></div>

    I only want the li tags to have a class, either nav or current. I don’t want any id’s other than in the container div and I’d like to neaten up the code display. Ideally I’d like my code to read as follows

    <div id="nav">
    <ul>
        <li class="current"><a href="">link1</a></li>
        <li class="nav"><a href="">link3</a></li>
        <li class="nav"><a href="">link3</a></li>
    </ul>
</div>

    I could hardcode a menu, but I’d like to keep the content dynamic so any changes to the menu made on the dashboard would still take affect.

    You will probably have to create a new Walker for your menu.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Menu class names’ is closed to new replies.