How to display WP custom class in before in nav?

2 comments

1. CSS Class from Back end is for the <li> tag. So first we need to remove that from <li>.

   To remove it from <li>, add following code to your theme’s functions.php :

   add_filter('nav_menu_css_class', 'remove_class_from_li',10, 2);
   
   function remove_class_from_li($class, $item){
       $css_class = get_post_meta($item->ID, '_menu_item_classes', true);
       $class = array_diff($class,$css_class);
       return $class;
   }
   

   Now we need to modify its anchor tag to add <i> tag into it. So for that add below code to your theme’s functions.php :

   add_filter('walker_nav_menu_start_el', 'add_class_before', 10, 4);
   
   function add_class_before($item_output, $item, $depth, $args){
       $css_class = get_post_meta($item->ID, '_menu_item_classes', true);
       if(is_array($css_class)){
           $class = implode(' ', $css_class);
           if($class){
               $args->link_before = '<i class="'.$class.'"></i>';
           }
       }
       $atts = array();
       $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
       $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
       $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
       $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
   
       $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
   
       $attributes = '';
       foreach ( $atts as $attr => $value ) {
           if ( ! empty( $value ) ) {
               $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
               $attributes .= ' ' . $attr . '="' . $value . '"';
           }
       }
   
       $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;
   
       return $item_output;
   }
   

   As we have modified everything, you might not need to add link_before parameter in wp_nav_menu function. So your wp_nav_menu will now look like :

   <?php
       wp_nav_menu( array(
           'menu'              => 'primary',
           'theme_location'    => 'primary',
           'depth'             => 3,
           'menu_class'        => 'nav navbar-nav',
           'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
           'walker'            => new wp_bootstrap_navwalker())
       );
   ?>
   

   It’s done 🙂

   NOTE : You can also do it by making your own menu walker.

   Caution : By doing above method, it will apply to all menu and if you do not want to apply it to all menu thn probably you have to add condition with menu location.

2. You can add class through use of jQuery .addClass method or use css .nav::before{content: “f015”; font-family: ‘FontAwesome’;} method add this class in your css.

Comments are closed.