Add Wordpress menu css classes to

Question

Want to add the CSS class added to the Wordpress menu as shown below

to my menu

      wp_nav_menu( array( 
        'theme_location'    => 'header', 
        'container'         => false, 
        'items_wrap'        => '%3$s', 
        'after'             => '<span class="icon-thumbnail"><i class="fa "></i></span>'
      ));

To create

<li>
  <a href="/">Dashboard</a> 
  <span class="icon-thumbnail">
  <i class="fa fa-reorder"></i>
  </span>
</li>

So, add the CSS class that was added to the menu_item within the Wordpress Admin to the  in my menu. Therefore, looking like 

Explain more what is not happening? What exactly you want?

Rajendran Nadar
– Rajendran Nadar

2017-08-19 08:08:11 +00:00
Commented Aug 19, 2017 at 8:08 — Rajendran Nadar
– Rajendran Nadar, Commented Aug 19, 2017 at 8:08

Rajendran Nadar · Accepted Answer · 2017-08-19 08:42:57Z

1

Do this

wp_nav_menu( array( 
     'theme_location'    => 'header', 
     'container'         => false,
     'items_wrap'        => '%3$s',
));

In wp admin in css input box put this class

fa fa-reorder

This should fix the issue you need to add append fa class to add fontawesone icons.

EDIT: This is the walker for bootstrap.

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Edit the code as per your need

This part in the walker is to be edited for fixing your issue.

if ( ! empty( $item->attr_title ) ) {
  $pos = strpos( esc_attr( $item->attr_title ), 'glyphicon' );

  if ( false !== $pos ) {
      $item_output .= '<a' . $attributes . '><span class="glyphicon ' . esc_attr( $item->attr_title ) . '" aria-hidden="true"></span>&nbsp;';
  } else {
      $item_output .= '<a' . $attributes . '><i class="fa ' . esc_attr( $item->attr_title ) . '" aria-hidden="true"></i>&nbsp;';
  }
} else {
    $item_output .= '<a' . $attributes . '>';
}

This should fix the issue

edited Aug 19, 2017 at 8:42

answered Aug 19, 2017 at 8:17

Rajendran Nadar

5,4784 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darren Over a year ago

Thank you. However, I need the class to be added to the '', so it outputs as '' within the ''. Therefore, whether it is with css input 'fa fa-reorder' or 'fa-reorder' I m still not achieving the outcome I need.

Rajendran Nadar Over a year ago

You need to create a walker for that. Are you using bootstrap?

Rajendran Nadar Over a year ago

@Darren Mathers did that work? If yes mark this as solved.

Collectives™ on Stack Overflow

Add Wordpress menu css classes to <span class="">

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related