We all know and love the WordPress login page, and many of us have tried to customize the heck out of it at some point or another. But even if we get it looking and working more or less the way we want, it’s not always a good fit for the type of site we’re running. In many instances, a sidebar login seems to be a more appropriate choice. For one thing, a sidebar login is always there, enticing your visitors to connect and to engage with other users. That can be especially true if you’re running a niche community network with Buddypress.
Not using Buddypress?
This tutorial will guide you through all the steps needed to replace the WordPress login page with a custom sidebar login and logged-in user info/links for a Buddypress-enabled site. However, with a little tweak here and there, it will serve just fine for a site without Buddypress. Promise. :-)
Want both the WordPress login page and a members area?
If you have already set up the WordPress login page to your liking and want to keep it, but also want a logged-in members area with a bunch of cool stuff in it for your users, see the end of this post for specific instructions.
So, a sidebar login/members area it is.
If all you need is a sidebar login, you really don’t need this tutorial. You can find a bunch of quite satisfactory plugins in the WordPress repository. But what if you want to include some custom stuff, or display different stuff to visitors and logged-in users? Stuff like:
- links to the logged-in Buddypress user profile
- private messaging inbox
- custom components
Or maybe to content that has nothing at all to do with the Buddypress part of your site:
- links to private WordPress dashboard areas they may have access to
- some members-only content perhaps
- help pages
In the above cases, neither the standard WordPress login page nor a simple sidebar login will cut it. So today, we’re going to build ourselves a sidebar login with all the made-to measure goodies we want in it.
We’re also going to do it without editing any files, or uploading anything via FTP. We’re gonna git ‘er done with a marvelous plugin I highlighted in a previous post: Shortcode Exec PHP.
No template edits, no file changes, no FTP required
1 – First things first: download Shortcode Exec PHP and activate it.
Got the plugin installed and activated on your site? Good. In the plugin admin panel, be sure you have checked either “Make shortcodes global”, or “Execute shortcodes in (sidebar) widgets”. Either one will enable you to use the shortcodes we’re about to create in widgets. Oh, and no need to insert opening and closing php tags in any shortcode you create; they will be automatically wrapped by the plugin.
2 – The login form
Let’s begin by getting a standard WordPress login form up and running for your visitors and users. This part is easy ‘cuz there’s already a function predefined in WordPress for it. We just need to call that function in our shortcode. Copy the code below to an empty code box in the plugin admin panel, and name it anything you like, maybe “mylogin”. (For more on the wp_login_form function, see http://codex.wordpress.org/Function_Reference/wp_login_form)
if (!is_user_logged_in()): echo wp_login_form(); endif;
Now go to “Appearance” > “Widgets” in your WordPress admin and drag a new text widget to your sidebar. If you don’t want your new sidebar login to have a title (it appears whether the user is logged-in or not), don’t give it one. Add your new shortcode to the widget content area, wrapped in square brackets like below:
[mylogin]
You should now see a login form display in your sidebar when you logout of your site. Got it? Good, now it gets fun! Log back in to your site (using your new form to make sure it works).
3 – The fun stuff
Now let’s get the logged-in user’s avatar to display. In order to call certain elements like the avatar, we need to first tell our shortcode that we want info for the current logged-in user (global $current_user and get_currentuserinfo). In the snippet you just added to the code box, insert else: just after the call to the login form, then the current user function calls, and finally the call for the user’s avatar. Your code will now look like this:
if (!is_user_logged_in()):
echo wp_login_form();
else:
global $current_user;
get_currentuserinfo();
echo get_avatar( $current_user->ID, 80 );
endif;
If you check your sidebar again, you should now see your own avatar displayed in your widget. Do you find it too big, or too small, for your site? You can change the size simply by changing the value (80) that appears at the end of the get_avatar function (80 = 80px wide x 80px high).
Oh but wait, the avatar doesn’t link to anything, does it? Let’s link it to the current logged-in user Buddypress profile, shall we? To do that, we simply wrap the get_avatar portion of the code in the existing BP function that creates the link we need.
We’re also going to enclose the avatar in a div container, and float that div to the left with a bit of inline CSS (I told you: no file edits. If you prefer to add the CSS to your stylesheet though, go right ahead). By the way, the float is not required to get the avatar on the left; rather, it ensures that the text links we’ll be adding soon line up to the right of the avatar instead of beneath it. Replace the line that reads echo get_avatar with this:
echo '<div style="float:left;margin:0 2em 1em 0;"><a href="';
echo (bp_loggedin_user_domain());
echo '">';
echo get_avatar( $current_user->ID, 80 );
echo '</a></div>';
Next, let’s insert the logged-in username with a “Welcome” message, and link the username to the profile too. Add the following snippet just below the get_currentuserinfo line (above the get_avatar code you just added). If you prefer a smaller or larger heading, go right ahead and change the <h3> to whatever suits your theme.
echo '<h3>Welcome <a href="'; echo (bp_loggedin_user_domain()); echo '">'; echo bp_loggedin_user_fullname(); echo '</h3></a>';
If everything has gone according to plan, your logged-in widget should look much like the image to the right. Also, the avatar and username should link to the logged-in user profile.
So far, so good? Do you miss the WordPress login page yet?
Next up: all our custom links and buttons… the really fun stuff!
4 – The really fun stuff
It’s time to include all our custom logged-in links and/or buttons. For the purpose of this tutorial, we’ll add some basic Buddypress profile stuff. Go ahead and modify what we add to better suit your own niche. Let’s begin with a link to the logged-in user’s profile edit page. You want them to keep their profile info up-to-date, right? Add the following snippet just before the closing endif; tag in your code.
echo '<a href="'; echo (bp_loggedin_user_domain() . "profile" . "/" . "edit"); echo '">Update your Profile</a>';
Note how the second line in the snippet you just added builds the URL to your-site.com/members/username/profile/edit.
- The bp_loggedin_user_domain function outputs your-site.com/members/username/
- The 2nd element in the string (profile) points to the top-level nav item in the user’s profile.
- The 3rd element points to the subnav item.
These examples should make it easy for you to add whatever custom stuff you need. Just be sure to separate each item in the string with dots and slashes like in the example code. Now let’s add a link to the user’s Activity Stream so they can quickly update their status. Add the following just before the endif; tag:
echo '<a href="'; echo (bp_loggedin_user_domain()) . "activity" . "/"; echo '">Update your Status</a>';
And finally, a link to their message inbox:
echo '<a href="'; echo (bp_loggedin_user_domain()) . "messages" . "/"; echo '">Check your Inbox</a>';
To change the text in any of the above link examples (or the button examples below), simply edit the 3rd line. Now you go ahead and add a fourth link yourself.
Finally, let’s liven up the presentation by adding a few buttons in a single row along the bottom of our logged-in member’s widget. We’ll start with the “Logout” button. Add the following just before the closing endif; tag:
echo '<br class="clear"><a class="button" title="Logout" href="'; echo wp_logout_url( get_permalink() ); echo '">Logout</a> ';
The <br class=”clear”> is required to ensure that the buttons appear below everything else. Also note the class=”button” in the link part of the code. That ensures the link will be styled like other buttons in your theme (hopefully). If your users are authorized to use your WordPress admin dashboard, you can add a handy button to that here too:
echo '<a class="button" title="Dashboard" href="'; echo admin_url(); echo '">Dashboard</a>';
You can add other buttons too if you like. Say to a specific page on your site with some handy help references for your users. Simply change the URL in the example below to the actual URL of the page you want to link to:
echo '<a class="button" title="Help" href="http://your-site.com/your-help-page/">Help</a>';
Your custom logged-in/logged-out widget and members area should look a lot like the image to the right by now. If I may say so myself, it’s a very nice alternative to the WordPress login page!
5 – I want the WordPress login page and this really cool widget!
Surprise! That’s real easy. Simply change the 2nd line of your shortcode to this:
echo 'Please <a href="'; echo wp_login_url(); echo '" title="Login">login</a> or <a href="'; echo (site_url()) . "/" . "register" . "/"; echo '">create an account</a>.';
The snippet of code above will output a line that looks like this: Please login or create an account.
The login link will redirect to your WordPress login page, and the create an account link will redirect to your Buddypress register page. If you have changed the name of your register page, be sure to change “register” to the correct URL on line 4 of the above snippet.
I hope you enjoyed and find use for this tutorial. If you get messed up and need a hand with any part of it, leave a comment below, and I’ll try to get you going right!
Photo credit: Keys 1 by Brenda Starr
