[Resolved] How Can I Build a Toolset Style Login/Logout Menu

[Author]

Posts

[Team DNK]

Hello Support... I really like the Login/Logout link that is used on the current Toolset site. Would value your assistance with how to set this up complete with icon, linking to non WordPress login page, username and drop down menu. Have been going through all your documentation and training so I have a fairly good understanding of Toolsets overall capabilities.

I tried to get some of the basic functionality working as covered in the below post, but awaiting assistance with this basic functionality.
https://toolset.com/forums/topic/logout-link-in-menu/

My preference is to build out a full featured Toolset Site version as first mentioned, also if there is a more Toolset centric way of doing it that does not involve modifying the functions.php file I would prefer that as well. I attached two Screenshots from the Toolset site for better clarification.

Kind Regards,
Dave

[Meagan Hanes]

Hi Dave! Thanks for your question about how to create a login / logout menu like the one we have on our own site.

The best way to accomplish this is using the built-in WordPress tools and actions. Since this is related to the look and feel of your site, you'll need to modify your theme.

I can't offer exact instructions on doing this as it depends greatly on how your theme is coded, but here's the general principle:

1. Inside the WordPress Dashboard, create two copies of your menu - one that's shown when the user is logged out, and one that's shown when the user is logged in.
2. Create a custom function which checks to see if the user is logged in, and dynamically switches which menu is loaded. Use is_user_logged_in() to get a true/false, and pass through the correct menu's ID to the wp_nav_menu function to load the specific menu: https://developer.wordpress.org/reference/functions/wp_nav_menu/ and https://developer.wordpress.org/reference/functions/is_user_logged_in/
3. Modify your theme where the menu is loaded and insert a call to your custom function.

In our specific case, you can see we have one consistent main menu served to both users, and a secondary smaller menu where we have our customized logged in links. The method above works both if you want to switch a main menu or a smaller menu - simply create the two menus, hook their IDs into a switch, and call this function where you want it displayed.

Hope this helps!
Meagan

[Team DNK]

Thank You Meagan... I believe I get the basic approach. Have to think through this as I really want to try to stay with more of a Toolset Layout centric approach and not hard code the theme files.

In the mean time I hope to get a solid answer to my original post so I can at least get the core Login/Logout functionality working with my full Toolset install (using Toolset Starter Theme). FYI the below link is to a new dedicated thread.

https://toolset.com/forums/topic/dynamic-loginlogout-link-with-cred-login-form-and-redirects/

Kind Regards,
Dave

[Meagan Hanes]

I see Minesh is providing you with feedback and guidance on your new thread, so I'll mark this one as resolved.

As I'm aware of it, there is no way to accomplish this purely within Toolset, as I don't believe we offer dynamic modification of menus in any of our plugins.

However, you may wish to play with Layouts a bit more - perhaps it can allow for a conditional wrapper around a menu display. More testing would be needed to see if this is a functional answer though.

Thanks,
Meagan

[Team DNK]

Hi Meagan... Over the weekend I did played with Layout and got a simplified version working great. I will share the code here as an example for others.

THE GOAL & BASIC METHOD
Build simple Top Header in the Headers and Footers Layout that displays a login button when user is not logged in and when user is logged in, display buttons that link to the account page (Dashboard) and allows user to log out. The conditionals and the logout button were started using the options provided in the Visual Editor Cell of Layouts.

If I use this out in the wild I should probably make this a unordered list or place the buttons in div's but everything seems to be working. Toolset Layouts is proving to be an amazing tool. See screenshot for Layout configuration and the front end pages.

[wpv-conditional if="( '[wpv-current-user info='logged_in']' eq 'false' )"]
<a class="btn btn-primary btn-xs" href="[wpv-post-url id="60"]"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>  Log In</a>
[/wpv-conditional]

[wpv-conditional if="( '[wpv-current-user info='logged_in']' eq 'true' )"]
<a class="btn btn-primary btn-xs" href="[wpv-post-url id="85"]"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>  Account</a>  
[wpv-logout-link class="btn btn-primary btn-xs" redirect_url="<em><u>hidden link</u></em>"]<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>  Log Out[/wpv-logout-link]
[/wpv-conditional]

Kind Regards,
Dave

[luongT]

Thanks, But I want to redirect to another page after login how can I do that?