Question

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?

Was it helpful?

Solution

*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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top