Removing LI elements from WordPress’ main menu

September 22nd 2015 - Code

I’ve been searching for a way to remove the LIs and UL elements from a standard wordpress nav, wp_nav_menu, while keeping the classes from the LI and moving them to the A tags.

Below is a walker class that will do just that. Add this to your functions.php file;

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes $class_names>"
        . $args->link_before
        . $title
        . '</a>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Next add your menu in the functions.php with a call to the walker class. Note that we remove the UL wrap in ‘items_wrap’;

function header_nav()
{
	wp_nav_menu(
	array(
		'theme_location'  => 'header-menu',
		'menu'            => '',
		'container'       => '',
		'container_class' => '',
		'container_id'    => '',
		'menu_class'      => '',
		'menu_id'         => '',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'before'          => '',
		'after'           => '',
		'link_before'     => '',
		'link_after'      => '',
                'items_wrap'      => '%3$s',		
                'depth'           => 0,
		'walker'          => new Description_Walker
		)
	);
}

Then finally, in your theme header add a call to the nav header_nav() wherever you want your menu to appear. Here I have wrapped it with a NAV element;

  <nav class="" id="" role="navigation">
      <?php header_nav(); ?>
  </nav>

This should output this;

  <nav role="navigation" id="">
     <a class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item" href="#">Link 1</a>
     <a class="menu-item menu-item-type-taxonomy menu-item-object-category" href="#">link 2</a>
     <a class="menu-item menu-item-type-taxonomy menu-item-object-category" href="#">link 3</a>
  </nav>

One comment to...“Removing LI elements from WordPress’ main menu”
Avatar Mun

Whats Going down i’m new to this, I stumbled upon this I’ve discovered It positively helpful and it has helped me out loads. I am hoping to give a contribution