Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

remove li class & id for menu items and pages list

Example of WordPress default CSS class output:

<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55">

<li class="page_item page-item-37">

The menu and pages list item come with various own li class and id.

How to remove them in functions.php file for the menu and for the pages list?

like image 657
Cam Avatar asked Mar 07 '11 16:03

Cam


6 Answers

You should be able to remove them by hooking into a couple of filters and returning empty arrays or strings rather than new classes or ids:

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
  return is_array($var) ? array() : '';
}

If you wanted to keep particular classes you could do something like this:

function my_css_attributes_filter($var) {
  return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
like image 190
Richard M Avatar answered Oct 18 '22 14:10

Richard M


this is an addition on top of Richard answer.

in case you want to change the current-menu-item class to something else.

        add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
        add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
        function my_css_attributes_filter($var) {
            if(is_array($var)){
                $varci= array_intersect($var, array('current-menu-item'));
                $cmeni = array('current-menu-item');
                $selava   = array('selectedmenu');
                $selavaend = array();
                $selavaend = str_replace($cmeni, $selava, $varci);
            }
            else{
                $selavaend= '';
            }
        return $selavaend;
        }
like image 45
alhoseany Avatar answered Oct 18 '22 16:10

alhoseany


Here is a fix that I've come up with. It removes all the id's and classes from the wp_nav_menu, but allows you to come up with your own "approved" list of classes and/or id's. It also changes the lengthy "current-menu-item" to "active". If you prefer to keep the the default WordPress CSS styles, just delete that section of the code. For the sake of keeping this post minimal, here are the links to the pastebin with the code:
http://pastebin.com/W16cxDfY - for your functions.php file
http://pastebin.com/CGx4aprf - for your template, wherever the menu goes

like image 36
RevelationTravis Avatar answered Oct 18 '22 14:10

RevelationTravis


simply add_filter('nav_menu_item_id', '__return_false'); for menu item id

like image 35
vralle Avatar answered Oct 18 '22 14:10

vralle


Best way to remove li is: Tested and Verified

           <?php
            $menuParameters = array(
              'theme_location'  => 'header-menu-top', 
              'container'       => false,
              'echo'            => false,
              'items_wrap'      => '%3$s',
              'depth'           => 0,
            );
            echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
            ?>
like image 41
Atif Tariq Avatar answered Oct 18 '22 15:10

Atif Tariq


If you just want to remove all the list classes and id's, add this to functions.php

add_filter('nav_menu_item_id', 'filter_menu_id');
add_filter( 'nav_menu_css_class', 'filter_menu_li' );
function filter_menu_li(){
    return array('');   
}
function filter_menu_id(){
    return; 
}
like image 21
Randy Kilwag Avatar answered Oct 18 '22 14:10

Randy Kilwag