Replace menu links with # and add name to its li

I have a wordpress menu:

<?php
    wp_nav_menu( array(
    'theme_location' => 'menu-categorias',
    'container' => 'ul',
    'menu_class' => 'navbar-nav dragscroll' ) );
?>

Which outputs this:

<ul id="menu-menu-categorias" class="navbar-nav dragscroll">
  <li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8 nav-item fadeIn">
    <a href="http://website.test/category/ux/" class="nav-link">Ux</a>
  </li>
  <li id="menu-item-9" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9 nav-item fadeIn">
    <a href="http://website.test/category/editorial/" class="nav-link">Editorial</a>
  </li>
</ul>

I want the URLs of the nav-items to be replaced with # and to add the name of the category (in lowercase) to its li class . So the menu output should be like this:

<ul id="menu-menu-categorias" class="navbar-nav dragscroll">
  <li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8 nav-item fadeIn ux">
    <a href="#ux" class="nav-link">Ux</a>
  </li>
  <li id="menu-item-9" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9 nav-item fadeIn editorial">
    <a href="#ux" class="nav-link">Editorial</a>
  </li>
</ul>

I tried adding this but I don’t get anything changed:

function lb_menu_anchors($items, $args) {
  foreach ($items as $key => $item) {
      if ($item->object == 'custom' && substr($item->url, 0, 1) == '#') {
          $item->url = site_url() . $item->url;
      }
  }
  return $items;
}
add_filter('wp_nav_menu_objects', 'lb_menu_anchors', 10, 2);

Any help to achieve these two things?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I want the URLs of the nav-items to be replaced with #

You can use the nav_menu_link_attributes hook to set the custom href value like so:

add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args ) {
    if ( 'menu-categorias' === $args->theme_location && 'category' === $item->object ) {
         $atts['href'] = '#' . get_term_field( 'slug', $item->object_id );
    }

    return $atts;
}, 10, 3 );

and to add the name of the category (in lowercase) to its li class

For that one, you can use the nav_menu_css_class hook whereby the “name” here is the term/category slug:

add_filter( 'nav_menu_css_class', function ( $classes, $item, $args ) {
    if ( 'menu-categorias' === $args->theme_location && 'category' === $item->object ) {
         $classes[] = get_term_field( 'slug', $item->object_id );
    }

    return $classes;
}, 10, 3 );

And note that, in my examples, I checked if the theme_location is menu-categorias, and I also assumed your menu items are all categories (i.e. terms in the category taxonomy).

Alternate Solution

Use a custom walker by extending the Walker_Nav_Menu class and edit the start_el() method which generates the li element output (<li><a></a></li>). See an example here.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0