WordPress login page not right for your site? Build your own sidebar login with member info!

Wordpress login page sidebar alternative

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.

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

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

WordPress login page - Custom login widget

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).

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

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>';

WordPress login page - login testIf 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!

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

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>';

WordPress login page - Custom login widgetYour 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!

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

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 URL, 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

Comments (32)

    • @Daniel Jones

      WPMU says: you’re welcome, and glad you liked it!

      BTW, I visited your site. You’ve got some pretty cool stuff going on there too. Check it out folks!

      :o)

  1. Patrick,

    this is great, thanks. Do you have any resources that might allow me to add a login box on my main network site that will allow subdomain site users of my site to login in my main site and be redirected to the backends of their own subdomain sites?

    • That’s a difficult puzzle to work through. It depends on whether your users are allowed only one sub-site, or multiple sub-sites. If multiple, you need to have a way for them to select which sub-site to log into. The select function must account for their role, and only display sub-sites they have access to as admin. The standard login form called by the wp_login_form function only allows for a redirect to a specified absolute URL, so you would need to code a custom login form.

      I wish I could help you more on this, but I’m more of a tinkerer than a coder. I like to put other people’s stuff together in novel ways :-)

  2. Hi Patrick
    This is almost what I need but not quite – I would also like to add the register function as well as the login function to the sidebar. Can you provide the additional code for this as i have been looking for a plugin to do this with no success. Any help would be appreciated.
    regards
    Gailstorm

  3. This is great. As a beginner I unfortunately couldn’t participate in the “Now you go ahead and add a fourth link yourself.” part but I still followed the guide to the letter up until the buttons part and it looks pretty cool.

    However I have one problem. The individual links “update your profile” , “update your status” and so on do not appear in their own lines. They appear as if it is all one paragraph. At first I thought perhaps this is because I didn’t have “automatically add paragraphs” checked in the widget but that didn’t work.

    my code looks like this so far…

    if (!is_user_logged_in()):
    echo wp_login_form();
    else:
    global $current_user;
    echo ‘Welcome ‘;
    echo bp_loggedin_user_fullname();
    echo ‘
    ‘;
    echo ‘‘;
    echo get_avatar( $current_user->ID, 60 );
    echo ‘
    ‘;
    echo ‘Update your Profile‘;
    echo ‘Update your Status‘;
    echo ‘Check your Inbox‘;
    endif;

    should I be adding linebreaks in here somewhere and if so where?

  4. I cant get the executed code to show up in the sidebar. All I see is the text [mylogin]

    As per instructions, I have enabled “Execute shortcodes in (sidebar) widgets” in Shortcode Exec PHP settings but looks like the its not being executed!

  5. @ajaffarali

    That’s likely because your theme isn’t set up to allow shortcodes in widgets. That is easily fixed though. :)

    Simply add the following to your theme’s functions.php file:

    add_filter(‘widget_text’, ‘do_shortcode’);

    Be sure to type it as you see it above, don’t copy/paste from this page as you’ll probably copy over the formatting too :)

  6. Would it be possible to add a text box below the update your status so someone can directly update their status from the widget instead of clicking the link and then going to the page to update it? Or maybe some AJAX magic that brings the text box when you click the link to it?

  7. I set this up (through step 4) on my site and the links for the profile edit and the check your messages don’t work. For the profile editing, I have two groups of fields. I can get to it with the BP bar at the top, but the code in my shortcode won’t work. If I manually type in the url it is trying to go to, it works. Has something changed in WP 3.6 or BP 1.8.1? I am using iThemes Builder with the Yukon child for my theme. Also, the logout just shows up as a link and not a button. It does work though.

    if(!is_user_logged_in()):
    echo wp_login_form();
    echo wp_register();
    echo ‘Lost Password‘;
    else:
    global $current_user;
    get_currentuserinfo();
    echo ‘Welcome ‘;
    echo bp_loggedin_user_fullname();
    echo ‘
    ‘;
    echo ‘‘;
    echo get_avatar($current_user->ID, 80);
    echo ‘
    ‘;
    echo ‘Update your Profile‘;
    echo “”;
    echo ‘Check your Messages‘;
    echo “”;
    echo ‘Logout ’;
    endif;

Participate