If you’re running a WordPress website where users can signup and become members or running an e-commerce shop front, then you will need to make it easier for members to login and logout of your website. Giving your users the ability to login or logout, conveniently will add to their overall user experience of your website. One of the easiest methods to place login and logout links is in the WordPress sidebar as it is highly visible on every post or page when viewing your website.
However, by default WordPress does not provide an option for showing certain links when someone is logged in or logged out. So in order to add this functionality to your WordPress sidebar you will have to use either a custom code snippets or find a plugin that provides this functionality from the WordPress repository.
In this guide, we are going to add buttons to the WordPress sidebar using our own shortcode without using a plugin. We will create the shortcode function using the WordPress functions.php file. Using the shortcode will enable you to place the buttons anywhere on your WordPress website, for example you could place them in a page or even a post. The function is dynamic and knows when a user is logged in or out of your website and the available button options will change accordingly.
Important
In this tutorial, we'll be directly editing WordPress theme files and we recommend that you create a child theme of your existing parent theme. By using a child theme you will be able to apply modifications without altering the parent theme files and ensuring any changes you make are kept following any parent theme updates.
Note
If you don't feel comfortable with editing the functions.php file directly, we would recommend you use the Code Snippets plugin. This plugin will enable you to easily add, manage and delete WordPress code snippets from your dashboard. To find out more about adding custom code snippets using a plugin see our tutorial How to Add Custom Code Snippets to WordPress with the Code Snippets Plugin for more information.
Creating the Function and Shortcode
We are going to add create the function and shortcode by adding our custom code snippet into the functions.php. You can edit the functions.php file directly in the WordPress dashboard under Appearance > Theme Editor > Theme Functions or edit the file offline and upload using your favourite FTP program.
Although WordPress doesn’t provide the option of displaying the login and logout link by default, it does provide us with a really simple way to display the users name. The users name details are taken from the user profile section of WordPress. So we can use the username, the first or last name, the display name, email address or even the internal WordPress user ID.
In our function we are going to use the users display name in our function, as its more personable to the user.
To create the login and logout button function, simply copy and paste the following code into your functions.php file:
function vpsb_show_login_user( $atts ) {
global $current_user, $user_login;
get_currentuserinfo();
add_filter('widget_text', 'do_shortcode');
if ($user_login)
return 'Welcome ' . $current_user->display_name . '!';
else
return '<a href="' . wp_login_url() . ' ">Login</a>';
}
add_shortcode( 'vpsb_login', 'vpsb_show_login_user' );Display the Shortcode
The code above has created a shortcode called vpsb_login. Now select Appearance then Widgets from menu item from the WordPress admin sidebar menu. Now drop the Text widget to your sidebar menu. You can add any title you want to show above your shortcode, we’ve used Your Account. Now paste in the following shortcode.
[vpsb_login]
Now when you view your WordPress website you will see the login and logout links displayed in your sidebar. As you can see in the images the links update dynamically depending upon whether the user is logged in or out. When the user is logged out the link will display a Login link and when the user is logged in the link will display Welcome VPSBasics!
Logged Out
Logged In
Normally, WordPress does allow shortcodes in text widgets but we included the code add_filter('widget_text', ‘do_shortcode’); which enables WordPress to read text widget shortcodes.
Customise the Shortcode Output
You can customise the output of the shortcode by utilising other available code variables to display the username, first or last name, email address or the internal WordPress user ID instead of the users display name.
The different variables you can use are shown below in the table.
| Variable | Result |
|---|---|
$current_user->user_login | Display the users Display Name |
$current_user->user_email | Display the users Email Address |
$current_user->user_level | Display the user Level Code |
$current_user->user_firstname | Display the users First Name |
$current_user->user_lastname | Display the users Last Name |
$current_user->ID | Display the users WordPress ID |
Note
If you wanted to change the shortcode output to a different variable, you would edit the $current_user-> line. For example, if you wanted it to display the users First Name you would change the code to $current_user->user_firstname.
As you can see in the images above the login and logout links are quite plain. In this part of the tutorial we are going to take it a bit further and edit the shortcode function in functions.php file to add other links such as user profile and registration and style the links into buttons using the style.css file.
To create the login, profile, logout and registration links, simply copy and paste the following code into your functions.php file in place of the previous code:
function vpsb_show_login_user( $atts ) {
global $current_user, $user_login;
get_currentuserinfo();
add_filter('widget_text', 'do_shortcode');
if ($user_login)
return
'
Welcome Back! ' . $current_user->user_login . '.
/*
* Show homepage on logout
*/
Logout
Your current membership level is ' . $current_user->user_level . '.
';
else
return
'
';
}
add_shortcode( 'vpsb_login', 'vpsb_show_login_user' );This will add dynamic login and logout options based on the users status. The first part of the code will display a welcome back message followed by the display name. It will also add a profile link alongside the logout link and show the current level code of the user. The logout link will redirect the user to the homepage. The second part of the code will a login and register button. In the images below you can see how the links that we have added using the code above.
Logged Out
Logged In
Now we need to add some CSS styling to turn the links into big bold buttons. To style the links, simply copy and paste the following code into your style.css file:
/* LOGIN/REGISTER SIDEBAR */
.login-btn {
padding: 20px;
background-color: #ff5722;
text-align: center;
margin-bottom: 20px;
}
.login-btn a {
color: #fff!important;
}
.register-btn {
padding: 20px;
background-color: #455A64;
text-align: center;
}
.register-btn a {
color: #fff!important;
}
.profile-btn {
padding: 20px;
background-color: #ff5722;
text-align: center;
margin-bottom: 20px;
}
.profile-btn a {
color: #fff!important;
}
.logout-btn {
padding: 20px;
background-color: #455A64;
text-align: center;
margin-bottom: 20px;
}
.logout-btn a {
color: #fff!important;
}As you can see in the images below we have changed the links into buttons and adding some bold colours.
Logged Out
Logged In
background-color: #ff5722; in the div classes .login-btn and .logout-btn.That’s it. You have now successfully added Login and Logout links to your WordPress sidebar using our own shortcode. You have added additional Profile and Registration links into the shortcode function and styled them into buttons.
