- This topic has 3 replies, 3 voices, and was last updated 9 years, 7 months ago by
.
-
Posts
-
Hello.
I’d like to add a login/logout menu button like the one on the copyblogger website (upper right corner, just below the social icons)–one that toggles between “Log in” and “Log out,” depending on whether the user is logged in or out. That is, the menu button should read “Log in” if the user is not logged in and “Log out” if the user is logged in.
Should I be using a text widget with shortcode in the Header Right widget? Or is there a plugin or other method that’s preferred?
Thanks!
Hans
It looks like they’re using a regular menu to add that, but I’m not sure. It doesn’t show what makes it change from login to logout when they are signed in or not just from looking at the code…..So that’s something you would probably have to ask Copyblogger to see exactly what they’re using.
I feel like the plugin lady lately, but… I used a plugin called Theme My Login for a client. It has tons of control options, works very smoothly, and has short codes for login/logout pages. Simplifies everything. I like it because I could set it so that my client’s customers could log in and be taken straight back to a normal page on the site. They were logging in to download product info and videos and the sight of the dashboard might have been a touch freaky for them. When you are logged in the menu item changes to log out, and vice versa. You can add it to your menu just like you would any other page. What I did (and suspect Copyblogger did also) is give that menu item a custom CSS class, then add styling for that class in the CSS file. In all likelihood the image next to “login” is just an icon/glyphicon that is referenced as a background image, with a little left padding to get the text to not sit on top of it.
Adding a custom CSS class to a single menu item is way easier than you’d think and I’m almost embarrassed to admit I discovered it quite by accident. If you click the Screen Options tab at the very top right when you’re in the menus page you’ll see an option under Show Advanced Menu Properties that says “CSS Classes.” Check that box, close your screen options, and now you’ll find a new field in each menu item that says “CSS Classes (optional).” Give it unique name that you can easily remember, then go for it in your CSS file.
If you already know all this please just disregard. I figured if somebody else sees it who doesn’t, it might be helpful.
Thank you, bosslady, for your most thorough response. I’ll look into Theme My Login. Another recommendation was this one, which I’m currently testing: http://wordpress.org/plugins/baw-login-logout-menu/
And thanks for the Screen Options tip-off for adding CSS classes to menu items–will definitely come in handy!
- You must be logged in to reply to this topic.