Skip to content

Instantly share code, notes, and snippets.

@doubleedesign
Created May 23, 2017 02:37
Show Gist options
  • Save doubleedesign/ffda65756a5fa26075502faf7bdfb957 to your computer and use it in GitHub Desktop.
Save doubleedesign/ffda65756a5fa26075502faf7bdfb957 to your computer and use it in GitHub Desktop.
My first go at a custom menu walker in WordPress. Starting with the example from WordPress.org, I added code to output an SVG icon as part of the link on each menu item.
if ( ! class_exists( 'doublee_Secondary_Walker' ) ) :
class doublee_Secondary_Walker extends Walker_Nav_Menu {
/**
* Start the element output.
*
* Adds main/sub-classes to the list items and links.
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
* @param int $id Current item ID.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
// Passed classes
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );
// Slug:
// Get the menu item title and put it into lowercase
$slug = strtolower($item->title);
// Remove ampersands
$slug = str_replace('&', '', $slug);
$slug = str_replace('#038;', '', $slug);
// Replace spaces with hyphens
$slug = preg_replace('#[ -]+#', '-', $slug);
// Get SVG source. Uses the slug to look for an SVG file named item-{slug}.svg for each item
$icon = file_get_contents(get_stylesheet_directory_uri().'/assets/images/icons/icon-'.$slug.'.svg');
$icon = (string)$icon;
// Build HTML of the list item
// To add the icon inside the list item but outside of the <a>, add $icon to the end of this instead of below
$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $class_names . '">';
// Link attributes
$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 ) .'"' : '';
$attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';
// Build HTML output and pass through the proper filter
$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
$args->before,
$attributes,
$args->link_before,
$icon, // put the icon inside the link itself
apply_filters( 'the_title', $item->title, $item->ID ),
$args->link_after,
$args->after
);
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
endif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment