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="/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="/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?

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?

• functions
• menus
• javascript
• jquery

• You can do this manually, by adding custom links, but I guess you are trying to just filter category term items? – Q Studio Commented Jan 13, 2021 at 17:06
• Yes, I want to filter the category terms, not put the client into the position of doing this manually – z-1881 Commented Jan 13, 2021 at 17:08
• 1 You should be able to do this with a custom nav walker (docs), have you tried that already? – kero Commented Jan 13, 2021 at 18:00

1 Answer 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.