1

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/">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/">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/">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/">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/">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/">Log Ud</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
  • Are you using wp_nav_menu()? Can you provide its arguments and the HTML source of your navbar? – 5ervant Aug 6 '15 at 19:19
  • I use a custom menu, created via the custom menu option in wordpress. I'll post the menu HTML, give me a minute. – Magnus Pilegaard Aug 6 '15 at 19:21
  • I'll answer it tomorrow if there's still no valid answer. I also need the PHP code of your navbar. – 5ervant Aug 6 '15 at 19:22
  • I posted html in a jsfiddle (link in post). – Magnus Pilegaard Aug 6 '15 at 19:25
  • 1
    I just found a solution a few minutes ago. Creating a logged in menu and a logged out menu. And then switch regarding the users login state. I really Appreciate the help though! – Magnus Pilegaard Aug 7 '15 at 3:50
3

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">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.

1

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.

  • Hi Brian, thanks for your answer. Could you give me an example on the if statements write? Keep in mind that i need the submenus to be created too!:) – Magnus Pilegaard Aug 7 '15 at 0:49

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.