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');