Hide a menu-item and its submenus and display a ‘Log in’ link if the user is logged out

The question:

I need, somehow, to enable that when you logout, that ‘My Account’ item is getting hidden from the navbar, and instead it displays a ‘Log in’ link. The item ‘My Account’ also have submenus with the items ‘Log out’ and ‘Track your order’. This should be hidden as well (I guess it gets hidden when you hide the parent ‘My Account’).

I use the theme Mystile, WordPress and I use the latest version of WooCommerce.

Any suggestions how to?

The JSFiddle of my menu’s HTML source: http://jsfiddle.net/qcuckt1f/

<nav id="navigation" class="col-full parent" role="navigation">
    <ul id="main-nav" class="nav fr parent">
        <li id="menu-item-68" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-68"><a href="http://renhud.square-brain.com/" rel="nofollow noreferrer noopener">Forside</a>
        </li>
        <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://renhud.square-brain.com/butik/" rel="nofollow noreferrer noopener">Butik</a>
        </li>
        <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://renhud.square-brain.com/support/" rel="nofollow noreferrer noopener">Kundeservice</a>
        </li>
        <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-has-children menu-item-62 parent"><a href="http://renhud.square-brain.com/min-konto/" rel="nofollow noreferrer noopener">Min Konto</a>
            <ul class="sub-menu">
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://renhud.square-brain.com/min-konto/track-din-ordre/" rel="nofollow noreferrer noopener">Track din ordre</a>
                </li>
                <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://renhud.square-brain.com/min-konto/log-ud/" rel="nofollow noreferrer noopener">Log Ud</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

It seems that the OP have managed to solve his/her problem by doing this, which can be found at Different menus for logged-in users.

if ( is_user_logged_in() ) {
     wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
}

The more shorter way to achieve that is by doing this, which is posted in new developer.wordpress.org version:

wp_nav_menu( array(
    'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu'
) );

The robust way to achieve that without creating two different menus, is to use a custom 'walker' function:

  1. Look for the custom walker class that your theme is using in its wp_nav_menu():

    wp_nav_menu( array(
        // More arguments here..
        'walker'         => new Your_Theme_Custom_Nav_Walker(),
    ) );
    
  2. Write a new class in your “functions.php”, extend Your_Theme_Custom_Nav_Walker class (you can easily search its declaration by using an IDE) or extend the Walker_Nav_Menu class if they’re not using any custom walker, and copy the necessary function(s) to modify, mostly the start_el() function, of that walker class in their declaration. Here is the simple custom class that extends the Walker_Nav_Menu that I build to suit your needs:

    class WP_Custom_Nav_Walker extends Walker_Nav_Menu {
    
    /**
     * Start the element output.
     *
     * @see Walker::start_el()
     *
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
    
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
    
        /**
         * Filter the CSS class(es) applied to a menu item's list item element.
         *
         * @since 3.0.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param array  $classes The CSS classes that are applied to the menu item's `<li>` element.
         * @param object $item    The current menu item.
         * @param array  $args    An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth   Depth of menu item. Used for padding.
         */
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    
        /**
         * Filter the ID applied to a menu item's list item element.
         *
         * @since 3.0.1
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param string $menu_id The ID that is applied to the menu item's `<li>` element.
         * @param object $item    The current menu item.
         * @param array  $args    An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth   Depth of menu item. Used for padding.
         */
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
    
    
        // MODIFICATION STARTS HERE!!
        $output .= $indent . '<li' . $id . $class_names;
    
        if (apply_filters('the_title', $item->title, $item->ID) === 'My Account') {
            if ( is_user_logged_in() ) {
                $output .= '>';
            } else {
                $output .= '><a href="' . get_site_url() . '/wp-login.php" rel="nofollow noreferrer noopener">Log in</a></li>';
                $output .= '<li style="display: none">';
            }
        } else {
            $output .= '>';
        }
        // MODIFICATION ENDS HERE!!
    
    
        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
    
        /**
         * Filter the HTML attributes applied to a menu item's anchor element.
         *
         * @since 3.6.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param array $atts {
         *     The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
         *
         *     @type string $title  Title attribute.
         *     @type string $target Target attribute.
         *     @type string $rel    The rel attribute.
         *     @type string $href   The href attribute.
         * }
         * @param object $item  The current menu item.
         * @param array  $args  An array of {@see wp_nav_menu()} arguments.
         * @param int    $depth Depth of menu item. Used for padding.
         */
        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
    
        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
    
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        /** This filter is documented in wp-includes/post-template.php */
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
    
        /**
         * Filter a menu item's starting output.
         *
         * The menu item's starting output only includes `$args->before`, the opening `<a>`,
         * the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
         * no filter for modifying the opening and closing `<li>` for a menu item.
         *
         * @since 3.0.0
         *
         * @param string $item_output The menu item's starting HTML output.
         * @param object $item        Menu item data object.
         * @param int    $depth       Depth of menu item. Used for padding.
         * @param array  $args        An array of {@see wp_nav_menu()} arguments.
         */
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
    
    }
    
  3. You can use that WP_Custom_Nav_Walker like this:

    wp_nav_menu( array(
        // More arguments here..
        'walker'         => new WP_Custom_Nav_Walker(),
    ) );
    

You can check this answer for another example how to do that.

Method 2

You can use the WordPress function is_user_logged_in() to check that, and create some basic if statements to show and hide the appropriate code.


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

Leave a Comment