I am having some troubles with my WordPress walker code. I know it's possible to add a custom CSS class manually via the admin menu section. But what I am trying to achieve is to get this done automatically whenever my client adds a submenu page.
The first step I took was to replace the ul li navigation and change it to an a href navigational style. This works. Now I am looking for a way to add a class to the submenu a href items ...
This is how my walker looks like at the moment.
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;
if (array_search('menu-item-has-children', $item->classes)) {
$output .= sprintf("\n<div data-delay='0' class='w-dropdown'><div class='dropdown-toggle'><div class='icon icon-dropdown-toggle'></div><div>$title</div></div>
\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
$item->title);
} else {
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
function start_lvl(&$output, $depth, $args ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<nav class=\"dropdown-list\">\n<div class=\"submenu_speech\"></div>";
}
function end_lvl( &$output, $depth, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</nav></div>\n";
}
function end_el(&$output, $item, $depth, $args) {
$output .= "\n";
}
}
I am having some troubles with my WordPress walker code. I know it's possible to add a custom CSS class manually via the admin menu section. But what I am trying to achieve is to get this done automatically whenever my client adds a submenu page.
The first step I took was to replace the ul li navigation and change it to an a href navigational style. This works. Now I am looking for a way to add a class to the submenu a href items ...
This is how my walker looks like at the moment.
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;
if (array_search('menu-item-has-children', $item->classes)) {
$output .= sprintf("\n<div data-delay='0' class='w-dropdown'><div class='dropdown-toggle'><div class='icon icon-dropdown-toggle'></div><div>$title</div></div>
\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
$item->title);
} else {
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
function start_lvl(&$output, $depth, $args ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<nav class=\"dropdown-list\">\n<div class=\"submenu_speech\"></div>";
}
function end_lvl( &$output, $depth, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</nav></div>\n";
}
function end_el(&$output, $item, $depth, $args) {
$output .= "\n";
}
}
There are special filters for adding classes to the ul, li, or a tags in a menu.
For the a tags you want to use nav_menu_link_attributes. This allows you to modify all attributes on the a tag, so here's an example:
function my_nav_menu_link_attributes( $atts, $item, $args ) {
if ( 'main' === $args->theme_location ) {
if ( '0' === $item->menu_item_parent ) {
$atts['class'] = 'top-level-item';
}
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'my_nav_menu_link_attributes', 10, 3 );
class Description_Walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
$classes = empty($item->classes) ? array () : (array) $item->classes;
if( $depth == 1 ){
$class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
!empty ( $class_names ) and $class_names = ' class="dropdown-link w-dropdown-link '. esc_attr( $class_names ) . '"';
} else {
$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;
if (array_search('menu-item-has-children', $item->classes)) {
$output .= sprintf("\n<div data-delay='0' class='w-dropdown'><div class='dropdown-toggle w-dropdown-toggle'><div class='icon w-icon-dropdown-toggle'></div><div>$title</div></div>
\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
$item->title);
} else {
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
function start_lvl(&$output, $depth, $args ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<nav class=\"dropdown-list w-dropdown-list\">\n<div class=\"submenu_speech\"></div>";
}
function end_lvl( &$output, $depth, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</nav></div>\n";
}
function end_el(&$output, $item, $depth, $args) {
$output .= "\n";
}
}
So when $depth==1 class 'dropdown-link w-dropdown-link' is added to the a tag.
It works, but is this a legit solution?