CODEWITHSUNDEEP
phpcsswordpressbootstrap-4
Md. Shahidul Islam
Md. Shahidul Islam

Reputation: 330

How to add CSS class in WordPress NAV anchor tag?

I am using Bootstrap 4 and my menu structure like this:

<ul class="navbar-nav mx-auto justify-content-center">
    <li class="nav-item">
        <a class="nav-link" href="index.php">HOME</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="faq.php">FAQ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="rules-and-regulations.php">RULES AND REGULATIONS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">REGISTRATION</a>
    </li>
</ul>

Here is my function.php file's code:

function menu_classes($classes, $item, $args) {
  if($args->theme_location == 'primary') {
    $classes[] = 'nav-item';
  }
  return $classes;
}
add_filter('nav_menu_css_class','menu_classes',1,3);

I can easily add nav-item class in li tag but I also want to add nav-link class into the anchor tag.

I am calling WP Nav in header.php file like this:

<?php
wp_nav_menu( array(
   'theme_location' => 'primary',
   'depth' => 2,
   'container' => false,
   'menu_class' => 'navbar-nav mx-auto justify-content-center',
   'direct_parent' => true, 
   'sub_menu' => true,
   'show_parent' => true
));
?>

Upvotes: 0

Views: 711

Answers (1)

Husain Ahmed
Husain Ahmed

Reputation: 868

Add this function on your function.php file

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
//    $classes     = implode(' ', $item->classes);
    $classes     = 'my-class';
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

Upvotes: 1

Related Questions