WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Class in the href not the li in wordpress menus (7 posts)

  1. iperez_genius
    Member
    Posted 1 year 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 1 year ago #


  3. iperez_genius
    Member
    Posted 1 year ago #

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

  4. IMICreation
    Member
    Posted 1 year ago #

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

  5. iperez_genius
    Member
    Posted 1 year 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 1 year 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. Star Verte LLC
    Member
    Posted 1 year 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' ) ); ?>

Topic Closed

This topic has been closed to new replies.

About this Topic