How to remove the class and id attributes from the li elements for menu items and pages list in WordPress

To remove the class and id attributes from the li elements for menu items and pages list in WordPress, you can create custom walker classes for both the menu and pages list. Then, override the start_el() method to remove the class and id attributes in each case.

Follow these steps:

1. In your WordPress admin dashboard, go to “Appearance” > “Theme Editor.”
2. In the right sidebar, locate and click on the “functions.php” file.
3. Add the following code snippet at the end of the file:

// Custom menu walker to remove class & id from li elements
class No_Class_ID_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$output .= $indent . '<li>';
$attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
$attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
$attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
$attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

$item_output = $args->before;
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
}

// Custom pages walker to remove class & id from li elements
class No_Class_ID_Walker_Page extends Walker_Page {
function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) {
if ($depth) {
$indent = str_repeat("\t", $depth);
} else {
$indent = '';
}

$output .= $indent . '<li>';
$output .= '<a href="' . get_permalink($page->ID) . '">' . apply_filters('the_title', $page->post_title, $page->ID) . '</a>';

if (!empty($args['show_date'])) {
if ('modified' == $args['show_date']) {
$time = $page->post_modified;
} else {
$time = $page->post_date;
}

$output .= ' ' . mysql2date($args['date_format'], $time);
}
}
}

This code snippet defines two custom walker classes: No_Class_ID_Walker_Nav_Menu for menus and No_Class_ID_Walker_Page for pages list. Both classes override the start_el() method to remove the class and id attributes from the li elements.

4. Click “Update File” to save the changes.
5. Now you need to apply these custom walkers when calling wp_nav_menu() for menus and wp_list_pages() for pages list in your theme files, typically in the header.php file.

For menus, update the wp_nav_menu() function like this:

wp_nav_menu(array('theme_location' => 'primary', // Replace with your theme location
'container' => false,
'walker' => new No_Class_ID_Walker_Nav_Menu()
));

Replace ‘primary’ with your theme’s menu location, if it’s different.

For pages list, update the wp_list_pages() function like this:

wp_list_pages(array(
    'title_li' => '',
    'walker' => new No_Class_ID_Walker_Page()
));

6. Save the changes in the theme files where you applied the custom walkers.

Now, the class and id attributes will be removed from the li elements in your menu items and pages list.

Remember to always backup your files before making any changes, and test your changes on a staging site or local development environment before applying them to your live site.