WordPress.org

1. iperez_genius
   Member
   Posted 7 months ago #
   

   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

2. IMICreation
   Member
   Posted 7 months ago #
   

   
   

3. iperez_genius
   Member
   Posted 7 months ago #
   

   nitin_8, i assume by your response you want to know the answer for this too

4. IMICreation
   Member
   Posted 7 months ago #
   

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

5. iperez_genius
   Member
   Posted 7 months ago #
   

   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

6. iperez_genius
   Member
   Posted 7 months ago #
   

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

7. Matt Beall
   Member
   Posted 1 month ago #
   

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

Reply

You must log in to post.