Removing link '<a>' from '<li>' menu for some "links" without JS

Question

I want some of my navigation menu items to show plain text, without a hyperlink. Usually, this code appeared:

<ul class="..." id="...">
<li><a href="">my item</a>
</li>
</ul>

and I'm trying to get this:

<ul class="..." id="...">
<li>my item
</li>
</ul>

but not for all menu items, of course, but for some of them. Simply saying: I want to remove the hyperlink from specific items of my menus. Is there some option for this kind of thing?

P.S. the wp_nav_menu:

$items_wrap = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';
wp_nav_menu( array(
'container'       => false,
 'container_class' => false,
 'menu_class' => '...',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'theme_location' => '...',
 'items_wrap'        => $items_wrap,)
 );

By "..." I removed my custom nav class, menu class and the theme location name

Thank you.

Answer 1

Assuming you're using wp_nav_menu() to display your navigation you could apply a walker that looks for css classes:

$items_wrap  = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';

wp_nav_menu( array(
    'container'         => false,
    'container_class'   => false,
    'menu_class'        => '...',
    'echo'              => true,
    'before'            => '',
    'after'             => '',
    'link_before'       => '',
    'link_after'        => '',
    'depth'             => 0,
    'theme_location'    => '...',
    'items_wrap'        => $items_wrap,
    'walker'            => new Texas_Ranger(),
) );

Note the new Walker Class at the bottom of the wp_nav_menu() parameter list.

You'll then need to add the below walker class to your functions.php file:

class Texas_Ranger extends Walker_Nav_Menu {

    /**
     * Building the List Item element
     * @param Referenced string $output
     * @param Post Object $item
     * @param int $depth
     * @param array $args
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent         = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' );

        // Passed Classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // build html
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $class_names . '">';

        // If 'noLink' exists in classes, don't HTML anchor tag.
        if( in_array( 'noLink', $classes ) ) {

            $item_output = apply_filters( 'the_title', $item->title, $item->ID );

        } else {

            // link attributes
            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
            $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

            $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                $args->before,
                $attributes,
                $args->link_before,
                apply_filters( 'the_title', $item->title, $item->ID ),
                $args->link_after,
                $args->after
            );
        }

        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

What this does is it looks for a class noLink and if it exists on the list-item, we skip the anchor HTML process.

The final step is to go to log into WordPress, navigate to Appearance -> Menus and at the top right, click Screen Options and ensure that "CSS Classes" is checkmarked:

Then on list items we just want to show as text we add the class noLinks like so: