WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Class in the href not the li in wordpress menus

[Resolved] Class in the href not the li in wordpress menus

  • I am using code similar to this to add a class to the href of a wordpress menu item.

    function add_menuclass($ulclass) {
    return preg_replace('/<a rel="modal"/', '<a rel="modal" class="lbpModal"', $ulclass, 1);
    }
    add_filter('wp_nav_menu','add_menuclass');

    My issue is that the function only works for the first menu item. So if there were two menu items with the rel=’modal’ the second would be effected.

    Does anyone know why this is?
    Any help would be greatly apprecaited.

    Ilan

Viewing 6 replies - 1 through 6 (of 6 total)
  • nitin_8, i assume by your response you want to know the answer for this too

    you can add css class to menu from admin-appearance-menu
    and the name of page etc

    What do you mean? when i add a class to a menu item that class is applied to the LI that surround the href… not the href it self.

    i am using wordpress 3.4.1

    I resolved my problem by changing the “1” to -1
    ‘return preg_replace(‘/<a rel=”modal”/’, ‘<a rel=”modal” class=”lbpModal”‘, $ulclass, 1);’

    That parameter determine how many instance to replace. Having it set to 1 only ever replaced the first instance. Setting it to -1 replaces all instances…

    While the preg_replace() works, it isn’t the best method. The rel attribute should really only have the values alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, or tag. (More info)

    Instead, use the following class in your functions.php or plugin file to change the output so that the “Classes” field populates the <a> element instead of the <li> element.

    class class_attr_nav extends Walker {
    	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 ) . '"' : '';
    
    		$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        ) .'"' : '';
    		$attributes .= ! empty( $class_names )      ? ' class="'  . esc_attr( $class_names      ) .'"' : '';
    
    		$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 .= '</a>';
    		$item_output .= $args->after;
    
    		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    	}
    }

    Then, when you want to display the menu, alter the wp_nav_menu() function to the following:

    <?php wp_nav_menu( array( 'walker' => 'class_attr_nav' ) ); ?>

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Class in the href not the li in wordpress menus’ is closed to new replies.
Skip to toolbar