How to add class and element to <a>-tag in sub-menu of "wp_nav_menu" in WordPress? How to add class and element to <a>-tag in sub-menu of "wp_nav_menu" in WordPress? wordpress wordpress

How to add class and element to <a>-tag in sub-menu of "wp_nav_menu" in WordPress?


Look at this answer, it explains how to add custom HTML to the wordpress menus: https://stackoverflow.com/a/12251157/1627227

EDIT:

I've put together an example to fit your question. You can place it into functions.php. Note the comments, they explain where to add your custom code.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {  function start_lvl(&$output, $depth) {      $indent = str_repeat("\t", $depth);      //$output .= "\n$indent<ul class=\"sub-menu\">\n";      // Change sub-menu to dropdown menu      $output .= "\n$indent<ul class=\"dropdown-menu\">\n";  }  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {    // Most of this code is copied from original Walker_Nav_Menu    global $wp_query, $wpdb;    $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="' . esc_attr( $class_names ) . '"';    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';    $has_children = $wpdb->get_var("SELECT COUNT(meta_id)                            FROM wp_postmeta                            WHERE meta_key='_menu_item_menu_item_parent'                            AND meta_value='".$item->ID."'");    $output .= $indent . '<li' . $id . $value . $class_names .'>';    $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        ) .'"' : '';    // Check if menu item is in main menu    if ( $depth == 0 && $has_children > 0  ) {        // These lines adds your custom class and attribute        $attributes .= ' class="dropdown-toggle"';        $attributes .= ' data-toggle="dropdown"';    }    $item_output = $args->before;    $item_output .= '<a'. $attributes .'>';    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;    // Add the caret if menu level is 0    if ( $depth == 0 && $has_children > 0  ) {        $item_output .= ' <b class="caret"></b>';    }    $item_output .= '</a>';    $item_output .= $args->after;    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );  }}

After you have this in place, you have to go to the point where your menu (wp_nav_menu()) is called. In the answer I've linked to, there's the full function call to wp_nav_menu. However you'll have to add this line: 'walker' => new Custom_Walker_Nav_Menu to the arguments array, to use your custom walker object on that specific menu.

Hope you got it ;)


Since Wordpress 3.6.0 you can use the nav_menu_link_attributes filter:

add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );function add_class_to_items_link( $atts, $item, $args ) {  // check if the item has children  $hasChildren = (in_array('menu-item-has-children', $item->classes));  if ($hasChildren) {    // add the desired attributes:    $atts['class'] = 'dropdown-toggle';    $atts['data-toggle'] = 'dropdown';    $atts['data-target'] = '#';  }  return $atts;}

The tags unfortunately doesn't have a filter that we could use, so we'll need a walker:

class MY_Menu_Walker extends Walker_Nav_Menu {  public function start_lvl( &$output, $depth = 0, $args = array() ) {    $indent = str_repeat("\t", $depth);    $output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";  }   }

then add the walker option when calling the menu:

wp_nav_menu( array('walker' => new MY_Menu_Walker)); 


Use This Code In Function.php

function add_menuclass($ulclass) {   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);}add_filter('wp_nav_menu','add_menuclass');