WordPress login & logout with UserPro in menu

I’m using a plugin called “UserPro”. I’m also using a function in my menu to show either “Login” or if logged in “Logout”.

function autov_add_loginout_navitem($items) {
    $login_item = '<li class="login">'.wp_loginout($_SERVER['REQUEST_URI'], false).'</li>';
    $items .= $login_item;
    return $items;
}
add_filter('wp_nav_menu_account_items', 'autov_add_loginout_navitem');

the plugin has a short code

Read More
<?php echo do_shortcode('[userpro template=login]'); ?>

How can I implement this in the first code?

(This was placed inside functions.php in my child-theme)

Related posts

2 comments

  1. That shortcode would need to in a page. Create a page and add the shortcode. From there you can link to the page for login. The logout link will remain the same.

    function autov_add_loginout_navitem($items) {
        $format = '<a href="%s">%s</a>';
        $link = is_user_logged_in()
            ? sprintf($format, wp_logout_url(), 'Logout')
            : sprintf($format, home_url('login'), 'Login');
        $login_item = '<li class="login">'.$link.'</li>';
        $items .= $login_item;
        return $items;
    }
    add_filter('wp_nav_menu_account_items', 'autov_add_loginout_navitem');
    

    The above example assumes you have created a page with the slug login and added your shortcode there. Note that the wp_logout_url function can take a redirect link as a parameter, you should specify that parameter if you want to send a user somewhere after logging out.

  2. I searched for a solution to this for a long time but I couldn’t get the code above to work for me, so I’ll share my solution for anyone who needs a quick fix if you can’t get the code to work:

    Create a page for ‘login’ and ‘logout’ and add shortcode [userpro template=login] to both pages.

    Install the WordPress plugin “nav menu roles“. Once it’s activated, go to Appearance > Menus. Add the pages ‘login’ and ‘logout’ to the menu.

    On ‘login’ menu item, make “display mode” set to “logged out users”.
    Make ‘logout’ menu item “display mode” set to “logged in users”.

    When your visitors click login in the nav, they will be directed to a page to input username and password. When they click logout, they will be logged out automatically and returned to your homepage.

Comments are closed.