0

Wordpress nav menu created by wp_nav_menu can highlight current menu item. How can i strip anchor from current menu item?

For example, we have menu:

<ul>
 <li class="current-menu-item"><a href="/somelink">Home</a></li>
 <li><a href="/elselink">Item</a></li>
 ...
</ul>

Can we remove

<a href="/somelink">

and leave just "Home" if it is current page?

UPD. In my functions.php I have a walker like this:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

and I've found the walker I need:

//Creating new walker class, which won't make current page linked.
class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    { //All code below until '$current_url'
      // is native Walker_Nav_Menu code. Then we compare requested URL and current URL.
      // If whey are equal - the text shows in <span> tag instead of <a>.
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

        $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        ) .'"' : '';

        $current_url = (is_ssl()?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        $item_url = esc_attr( $item->url );

        if ($item_url == $current_url)
        {
            $item_output = $args->before;
            $item_output .= '<span'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</span>';
            $item_output .= $args->after;
        }
        else
        {
            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;
        }

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

How I can make one walker of these two?

2
0

Michelle is right. You could create your own walker and override the default method that creates the anchor.

Or you can hack it by doing this:

jQuery(document).ready(function($) {

    var current =  $("#nav_menu_id").find(".current-menu-item");
    $(current).html( $(current).find("a").html() );

});

Where "nav_menu_id" is the id of your menu you wish to accomplish this on.

Personally, I would invest the time in the walker.

0
class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = array()) {

        $level = $depth + 1;
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu sub-menu-level-$level\" role=\"menu\" aria-hidden=\"true\">\n";

    }

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {

        $default_classes = empty($item->classes) ? array () : (array) $item->classes;

        $custom_classes = (array)get_post_meta($item->ID, '_menu_item_classes', true);

        // Global class for all items
        $custom_classes[] = 'menu-item';

        // Now with 100% more accessibility!
        $aria_attr[] = 'role="menuitem"';

        // Is this a top-level menu item?
        if ($depth == 0)
            $custom_classes[] = 'menu-item-top-level';

        // Does this menu item have children?
        if (in_array('menu-item-has-children', $default_classes))
            $custom_classes[] = 'menu-item-has-children';
            $aria_attr[] = 'aria-haspopup="true"';

        // Is this menu item active? (Top level only)
        $active_classes = array('current-menu-item', 'current-menu-parent', 'current-menu-ancestor', 'current_page_item', 'current-page-parent', 'current-page-ancestor');
        if ($depth == 0 && array_intersect($default_classes, $active_classes))
            $custom_classes[] = 'menu-item-active';

        // Give menu item a class based on its level/depth
        $level = $depth + 1;
        if ($depth > 0)
            $custom_classes[] = "menu-item-level-$level";

        $classes = join(' ', $custom_classes);
        $aria = join(' ', $aria_attr);
        !empty($classes)
            and $classes = ' class="'. trim(esc_attr($classes)) . '"';

        $output .= "<li $classes $aria>";

        $attributes  = '';

        !empty($item->attr_title)
            and $attributes .= ' title="'  . esc_attr($item->attr_title) .'"';
        !empty($item->target)
            and $attributes .= ' target="' . esc_attr($item->target    ) .'"';
        !empty($item->xfn)
            and $attributes .= ' rel="'    . esc_attr($item->xfn       ) .'"';
        !empty($item->url)
            and $attributes .= ' href="'   . esc_attr($item->url       ) .'"';

        $title = apply_filters('the_title', $item->title, $item->ID);
         if (in_array('menu-item-active', $custom_classes)){
                $item_output = $args->before
                    . $args->link_before
                    . $title
                    . $args->after;
         }
         else{
            $item_output = $args->before
                . "<a class='menu-item-link' $attributes>"
                . $args->link_before
                . $title
                . '</a> '
                . $args->link_after
                . $args->after;
         }

        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );

        // Add arrow icon if this item has children
        if (in_array('menu-item-has-children', $default_classes)) {
            $output .= "<button class='sub-menu-toggle' aria-label='Toggle Sub-menu Item' aria-expanded='false'>";
            $output .= "<i class='down-arrow'></i>";
            $output .= "</button>";
        }
    }
}
1
  • 2
    Can you please explain how this code works, and why it solves the problem? Posting a code-block with no explanation is discouraged, as it teaches copy-paste coding rather than helping people solve problems. You can use the edit link below your answer to add additional information to help answer the question. Thank you!
    – Tim Malone
    Aug 24 '16 at 23:36

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.