I am building a WordPress blog with bootstrap, I have used the wp_bootstrap_navwalker php to enable my wordpress menus to pass into my bootstrap code like so
<div id="navbar" class="collapse navbar-collapse" style="background-color: #333;">
<div class="container">
<ul class="nav navbar-nav">
<?php
/* Primary navigation */
wp_nav_menu(array(
'menu' => 'Primary Menu',
'theme_location' => 'locations-primary',
'depth' => 2,
'container' => false,
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</div>
</div>
This works well, although now im trying to build a tab menu using the menu system above like so
<div class="container">
<ul class="nav navbar-nav">
<div class="row text-center" id="tabs">
<?php
/* Secondary navigation */
wp_nav_menu(array(
'menu' => 'Secondary Menu',
'theme_location' => 'locations-secondary',
'depth' => 2,
'container' => false,
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</ul>
</div>
and tab content
<div class="row text-center" id="tabs">
<?php get_template_part('advicecentre_bar', get_post_format());>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<?php
$id = 177;
$post = get_post($id);
$title = apply_filters('the_title', $post->post_title);
$content = apply_filters('the_content', $post->post_content);
echo '<h1>' . $title . '</h1><hr>';
echo $content;
?>
</div>
<div class="tab-pane" id="tab2">
<?php
$id = 2;
$post = get_post($id);
$title = apply_filters('the_title', $post->post_title);
$content = apply_filters('the_content', $post->post_content);
echo '<h1>' . $title . '</h1><hr>';
echo $content;
?>
</div>
<div class="tab-pane" id="tab3">
<?php
$id = 168;
$post = get_post($id);
$title = apply_filters('the_title', $post->post_title);
$content = apply_filters('the_content', $post->post_content);
echo '<h1>' . $title . '</h1><hr>';
echo $content;
?>
</div>
</div>
</div>
within the wordpress menu cms i have created custom links and given a URL such as URL #tab1 however I am missing data-toggle="tab"to get the tabs working, I can not see a way to do this through the CMS dose anyone know how I can get this working.
UPDATE
Ok so I am trying to edit the following code to say if menu_class is nav nav-tabs then append data-toggle="tab" in the <a> need some help doing this
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
/**
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to so a
* comparison that is not case sensitive. The strcasecmp() function returns
* a 0 if the strings are equal.
*/
if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
} else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '<li role="presentation" class="disabled">' . esc_attr( $item->title ) . '';
} else {
$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 ) );
if ( $args->has_children )
$class_names .= ' dropdown';
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
$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 . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
// $atts['data-toggle'] = 'elementscroll';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
Link to wp_bootstrap_navwalker
Related
How to create Wordpress Menu with custom HTML structure using
<?php wp_nav_menu( array( 'theme_location' => 'global-menu' ) ); ?>
Output HTML should look like below:
<nav>
Item 1
Item 2
Item 3
Item 4
</nav>
I want item-dynamic-class-x to be dynamically set from Wordpress Menu Editor (CSS Classes input field). If filled, then add class to anchor. If not, then just static item-link class should appear.
Try with below code
wp_nav_menu(
array (
'menu' => 'main-menu',
'container' => '',// or false
'container_id' => FALSE,
'menu_class' => '',
'menu_id' => FALSE,
'items_wrap' => '%3$s',
'depth' => 1,
'walker' => new Description_Walker
)
);
Put below code in your active functions.php
class Description_Walker extends Walker_Nav_Menu
{
/**
* Start the element output.
*
* #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. May be used for padding.
* #param array|object $args Additional strings. Actually always an
* #return void
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
{
$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 ) . '"';
$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 ) .'"';
// insert description for top level elements only
// you may change this
$description = ( ! empty ( $item->description ) and 0 == $depth )
? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';
$title = apply_filters( 'the_title', $item->title, $item->ID );
$item_output = $args->before
. "<a $attributes>"
. $args->link_before
. $title
. '</a> '
. $args->link_after
. $description
. $args->after;
// Since $output is called by reference we don't need to return anything.
$output .= apply_filters(
'walker_nav_menu_start_el'
, $item_output
, $item
, $depth
, $args
);
}
}
How can I use walker in wp navigation system if I want to add something in menu if that item has child items, I'm using following code-
<?php
wp_nav_menu(array(
'menu' => '',
'container' => 'ul',
'container_class' => '',
'container_id' => '',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-main-menu',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'walker' => '',
'theme_location' => 'header_menu'
)); ?>
and my result is something like
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children dropdown menu-item-16">
Home
<ul class="sub-menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-18">Something</li>
</ul>
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Sample Page</li>
</ul>
But I need to replace <ul class="sub-menu"> with <ul role="menu" class=" dropdown-menu"> and Home with Home <i class="fa fa-angle-down"></i>
You can do this by extending the walker like so:
class custom_sub_walker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
}
public 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;
/*grab the default wp nav classes*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
/*if the current item has children, append the dropdown class*/
if ( $args->has_children )
$class_names .= ' dropdown';
/*if there aren't any class names, don't show class attribute*/
$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 . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
/*if the current menu item has children and it's the parent, set the dropdown attributes*/
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
/* if the current menu item has children and it's the parent item, append the fa-angle-down icon*/
$item_output .= ( $args->has_children && $depth === 0 ) ? ' <i class="fa fa-angle-down"></i></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}
Create a file called custom_walker.php with the code above in your themes folder and import it into functions.php with require_once('custom_walker.php');, or paste the class into functions.php.
Then call your menu:
<?php
wp_nav_menu( array(
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-main-menu',
'theme_location' => 'header_menu'
'walker' => new custom_sub_walker(),
) );
?>
I have a WP-site, and I want a sub-menu for each menu-items, with a li-item for each the_sub_field('info_block_header').
So I'm trying to create a walker with a ACF-loop inside, however I don't now how to implement the loop correctly. This is what I got, and it comes out bad:
sidebar.php:
<aside>
<nav id="mainNav">
<?php
$dropdown = new dropdown_walker;
$mainNav = array(
'theme_location' => '',
'menu' => 'main-menu',
'container' => 'ul',
'container_class' => 'topmenu-{topmenu slug}-container',
'container_id' => 'topmenu',
'menu_class' => 'topmenu',
'menu_id' => 'topmenu-{topmenu slug}[-{increment}]',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '<h4>',
'link_after' => '</h4>',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => $dropdown
);
wp_nav_menu( $mainNav );
?>
<?php get_search_form(); ?>
</aside>
page.php
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if(get_field('info_block')): ?>
<?php while(has_sub_field('info_block')): ?>
<div class="box masonCh boxText col2 clearfix">
<h2><?php the_sub_field('info_block_header')?></h2>
<div>
<?php the_sub_field('info_block_txt')?>
</div>
</div>
<?php if ( have_rows('info_block_img')):
while (have_rows ('info_block_img')) : the_row();?>
<div class="box masonCh boxImg col2 clearfix">
<div class="boxCrop">
<img src="<?php the_sub_field('info_block_img_file') ?>">
</div>
</div>
dropdown_menu.php
<?php
class dropdown_walker extends Walker {
var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\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 . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$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 .= $args->after;
$item_output .= '</a>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
//Here’s where I’m trying to put my submenu:
$output .= '<ul id="about" class="dropDown">'. if(get_field('info_block')):
while(has_sub_field('info_block')): .'
<li>'. get_sub_field('info_block_header') .'</li>'. endwhile; endif; .
</ul>';
} function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
} // Walker_Nav_Menu
?>
You have to pass the ID, associated : you can get it into $item->ID, you can know the type of this item print_r($item->type); (taxonomy, page, etc..).
Then :
$output .= '<ul id="about" class="dropDown">'. if(get_field('info_block', $id)):
while(has_sub_field('info_block', $id)): .'
<li>'. get_sub_field('info_block_header', $id) .'</li>'. endwhile; endif; .
</ul>';
I'm actually working on a website and i develop a theme.
I've a problem with the wp_nav_menu.
I've a navigation like this :
<nav>
item 1
item 2
item 3
item 4
</nav>
And i would like this menu:
<nav>
item 1
item 2
item 2
item 1
</nav>
if you preferer , add a custom class for each .
Here are the parameters of the current menu. No function in function.php
<?php
$menuParameters = array(
'theme_location' => 'primary',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
Have u got any solution ?
I specify that the classes in the administration > navigation don't work
In your backend go to Appearance -> Menus. In the top right corner there is a tab called Screen Options, there in 'Show advanced menu properties' tick CSS classes, that will enable you to add adittional class to your menu items.
You need the custom nav menu walker to achieve this.
First, you need to remove the <ul>, </ul>, <li>, and </li> tags on the walker,
and then move the css classes to the <a> tag.
Below is the walker i've tried, paste this on functions.php:
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
$output .= "{$n}{$indent}{$n}";
}
public function end_lvl( &$output, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
$output .= "{$n}";
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['class'] = ! empty( $class_names ) ? $class_names : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$title = apply_filters( 'the_title', $item->title, $item->ID );
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$output .= "{$n}";
}
}
And set your wp_nav_menu args:
<?php
$menuParameters = array(
'theme_location' => 'primary',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
'walker' => new Custom_Walker_Nav_Menu()
);
// no need to strip tags since the custom walker already trimmed it
echo wp_nav_menu( $menuParameters );
?>
Don't forget to set css class in the Appearance -> Menus
I'm using the Dynamic Menus within WordPress as a widget. I'm trying to filter the output so that I can add a class to the <a> tags (not the parent <li> as is default) without relying on jQuery.
I do not want to filter by theme_location since I am switching the menu depending on page and cannot assign multiple dynamic menus to one location.
I'd like to target these menus by Menu Name.
So far i've come close by realizing what the available arguments are for wp_nav_menu found in the response to this question : https://wordpress.stackexchange.com/questions/53950/add-a-custom-walkter-to-a-menu-created-in-a-widget
The following seems to be working fine:
add_filter('wp_nav_menu_items','replace_class', 10, 2);
function replace_class($items, $args)
{
if ($args->menu->term_id == '27') {
$items = preg_replace('/<a/', '<a class="custom-class"', $items);
}
return $items;
}
However this is only by using the "term_id" for the menu.
Trying to do something like: if ($args->menu == 'menu-services') { for whatever reason does not work. Could I be using the wrong filter?
*UPDATE*
If you want to use your method or function - just add slug
add_filter('wp_nav_menu_items','replace_class', 10, 2);
function replace_class($items, $args)
{
if ($args->menu->slug == 'your-menu-name') {
$items = preg_replace('/<a/', '<a class="custom-class"', $items);
}
return $items;
}
Original Answer:
I answered this yesterday - see my answer here
Based on the link you provided (from wordpress stackexchange)
add this code to add a custom walker to your widget menu:
function widget($args, $instance) {
// Get menu
$nav_menu = ! empty( $instance['nav_menu'] ) ? wp_get_nav_menu_object( $instance['nav_menu'] ) : false;
if ( !$nav_menu )
return;
$instance['title'] = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
echo $args['before_widget'];
if ( !empty($instance['title']) )
echo $args['before_title'] . $instance['title'] . $args['after_title'];
wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu ) );
echo $args['after_widget'];
}
$defaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '',
'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0, 'walker' => '', 'theme_location' => '' );
$args = wp_parse_args( $args, $defaults );
$args = apply_filters( 'wp_nav_menu_args', $args );
$args = (object) $args;
function myplugin_custom_walker( $args ) {
return array_merge( $args, array(
'walker' => new Class_Name_Walker(),
// another setting go here ...
) );
}
add_filter( 'wp_nav_menu_args', 'myplugin_custom_walker' );
then add this walker - which adds the classes to the a
class Class_Name_Walker extends Walker_Nav_Menu
{
/**
* Start the element output.
*
* #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. May be used for padding.
* #param array $args Additional strings.
* #return void
*/
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 . '<li' . $id . $value .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .$class_names.'>';
$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 );
}
/**
* #see Walker::end_el()
* #since 3.0.0
*
* #param string $output Passed by reference. Used to append additional content.
* #param object $item Page data object. Not used.
* #param int $depth Depth of page. Not Used.
*/
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
In your admin area go to Appearance > Menus.
On the top right of the screen click on 'Screen Options' on the bottom row - make sure 'CSS Classes' is checked.