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.
this is in italic and so is this
this is in bold and so is this
this is bold and italic and so is this
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 . "" . $args->link_before . $title . '' . $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>