How to add class to link in wp_nav_menu?

by

Taking a hint from this answer which I found was the most concise about adding classes to the list items of the menus, I used nav_menu_link_attributes filter which does work well for adding classes.

In your functions.php, add:

function add_menu_link_class( $atts, $item, $args ) {
  if (property_exists($args, 'link_class')) {
    $atts['class'] = $args->link_class;
  }
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );

Optionally, you may want to add the option to add classes to list items:

function add_menu_list_item_class($classes, $item, $args) {
  if (property_exists($args, 'list_item_class')) {
      $classes[] = $args->list_item_class;
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

Now, in your template, to build a menu you just add two new arguments, e.g.:

wp_nav_menu([
    'theme_location'=> 'primary_navigation',
    'menu_class'    => 'navbar-nav ml-auto flex-nowrap',
    'list_item_class'  => 'nav-item',
    'link_class'   => 'nav-link m-2 menu-item nav-active'
]);

Works well with themes with multiple menus which have different appearance.

More Related Contents:

  1. How to integrate Sina Weibo login into wordpress? [closed]
  2. WordPress doesnt show full page
  3. Why is PHP printing variables used in if statement?
  4. How to improve page load performance of the WordPress website?
  5. Display in stock data in short description [closed]
  6. How to use this code my wordpress theme
  7. Warning: preg_replace(): Unknown modifier
  8. Get Order items and WC_Order_Item_Product in WooCommerce 3
  9. How to debug in WooCommerce 3+
  10. Cannot modify header information – headers already sent by… WordPress Issue [duplicate]
  11. Warning: imagejpeg() [function:imagejpeg]: gd-jpeg: JPEG library reports unrecoverable error
  12. Reordering checkout fields in WooCommerce 3
  13. How can I set, get and destroy cookies in WordPress?
  14. How do I correct this Illegal String Offset?
  15. Get WooCommerce product categories from WordPress
  16. can I pass arguments to my function through add_action?
  17. WooCommerce: Set country by default in checkout page
  18. Updating product stock programmatically in Woocommerce 3
  19. Show Out of stock products at the end in Woocommerce [closed]
  20. Set product sale price programmatically in WooCommerce 3
  21. Create new product attribute programmatically in Woocommerce
  22. Changing WooCommerce cart item names
  23. Allow specific products to be purchased only if a coupon is applied in Woocommerce
  24. Set cart item price from a hidden input field custom price in Woocommerce 3
  25. Add a line break in Woocommerce Product Titles
  26. Get orders total purchases amount for the day in Woocommerce
  27. Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 71 bytes)
  28. dynamic class names in php
  29. I want a pagination to my options page of wordpress plugin?
  30. Accessing Order Items protected data in Woocommerce 3

Leave a Comment