4

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.

  • You're using wp_nav_menu() in your theme to display the nav? Could edit your question ( by using the above edit link ) and add in that code please? – Howdy_McGee May 27 '16 at 15:21
  • Ok, as requested – V0RT3R May 27 '16 at 15:27
6

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:

Menus Screen Options CSS Classes

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

Add Class 'noLink' to Home

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.