Title: Custom Menu class names
Last modified: August 20, 2016

---

# Custom Menu class names

 *  [lil_bugga](https://wordpress.org/support/users/lil_bugga/)
 * (@lil_bugga)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/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="http://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="http://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="http://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="http://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="http://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="http://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="http://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)

 *  [kevindng](https://wordpress.org/support/users/kevindng/)
 * (@kevindng)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/custom-menu-class-names/#post-2910393)
 * 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](https://wordpress.org/support/users/lil_bugga/)
 * (@lil_bugga)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/custom-menu-class-names/#post-2910396)
 * 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="http://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="http://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="http://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="http://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="http://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="http://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="http://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.
 *  [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * (@apljdi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/custom-menu-class-names/#post-2910403)
 * You will probably have to [create a new Walker](http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function)
   for your menu.

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

The topic ‘Custom Menu class names’ is closed to new replies.

## Tags

 * [class names](https://wordpress.org/support/topic-tag/class-names/)

 * 3 replies
 * 3 participants
 * Last reply from: [s_ha_dum](https://wordpress.org/support/users/apljdi/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/custom-menu-class-names/#post-2910403)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
