Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordPress: Using a custom nav walker to create navigation menus in plain <a> tags. That is the <ul> and <li> tags are not present. Very useful if you want to create simple links that can be centered with a simple text-align:center on the containing element.
<?php
// In your template files like footer.php
// The items_wrap value ('%3$s') removes the wrapping <ul>, while the custom walker (Nav_Footer_Walker) removes the <li>'s.
wp_nav_menu(array('items_wrap'=> '%3$s', 'walker' => new Nav_Footer_Walker(), 'container'=>false, 'menu_class' => '', 'theme_location'=>'footer', 'fallback_cb'=>false ));
?>
<?php
// In your functions.php
class Nav_Footer_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '';
$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 );
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "\n";
}
}
@acbilimoria

This comment has been minimized.

Copy link

commented Mar 12, 2016

👍 👍 👍

@wakasann

This comment has been minimized.

Copy link

commented Apr 6, 2016

👍 Thank you very much!

@creator2earth

This comment has been minimized.

Copy link

commented Jul 12, 2016

Very useful!

@Chillifish

This comment has been minimized.

Copy link

commented Dec 1, 2016

Thanks for this. Wanted to create a button link, so added $attributes = ' type="button"'; at line 34.

@emeaguiar

This comment has been minimized.

Copy link

commented Dec 9, 2016

I'm confused, you call $args as an array but then you use it as an object? When does it change?

@lukecurtis93

This comment has been minimized.

Copy link

commented Apr 24, 2017

How would i add an 'active' class to the current page?

@amerbashoeb

This comment has been minimized.

Copy link

commented Jun 1, 2017

Thanks 👍

@dbybanez

This comment has been minimized.

Copy link

commented Jul 18, 2017

This is really helpful! Thank you so much! By the way, is there an explanation as to what each method do?

@LeonidasPinheiro

This comment has been minimized.

Copy link

commented Nov 15, 2017

Very useful!
Thank you very much!

@deepanprabhu

This comment has been minimized.

Copy link

commented Jun 21, 2019

Thank you, Saved me a lot of time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.