How To Do A Custom Login Box With Wishlist Member

Wishlist Member is one of the absolute best ways to quickly and easily set up a membership site with WordPress. However, as good as it is, it isn’t perfect.

One of the limitations is the lack of ability to customize your login box. Wishlist comes with a widget for a login box which makes it very convenient. The problem is that the code for that login widget is encrypted, so you can’t do anything with it. What’s more, they didn’t bother to add unique CSS identifiers to the fields so you could at least style it yourself.

The solution is simply not to use their built-in login widget and do one yourself.

The “secret” to it is this: Wishlist is using the same exact login as WordPress would use even if you weren’t using Wishlist. Plus, Wishlist injects members into the existing WordPress user database. So, with that in mind, we can simply tap into that and re-create our own login box.

First, at the top of the sidebar.php file of the theme, I include the following:

<?php
global $userdata;
get_currentuserinfo();
?>

The get_currentuserinfo() function will fetch all the information in the database for the logged-in user.

Next, wherever you want your login box to be in your sidebar, use something like this:

<?php if (!intval($userdata->ID)) { ?>
<h1>Inner Circle Login</h1>
<form id="innercirclelogin" method="post" action="http://www.davidrisley.com/wp-login.php">
<input type="hidden" name="redirect_to" value="wishlistmember" />
<input class="textinput" type="text" name="log" value="Username" onfocus="if (this.value == 'Username') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Username';}" />
<input class="textinput" type="password" name="pwd" value="Password" onfocus="if (this.value == 'Password') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Password';}" /><br />
<input type="checkbox" name="rememberme" value="forever" /> Remember Me
<input type="submit" id="button" name="wp-submit" value="LOG IN" />
<p><strong><a href="http://www.davidrisley.com/inner-circle/">Register</a> | <a href="http://www.davidrisley.com/wp-login.php?action=lostpassword">Lost your Password?</a></strong></p>
</form>
<?php } else { ?>
<h1>Welcome, <?php echo $userdata->user_firstname; ?></h1>
<a href="/inner-circle-members/">Member Home</a> | <a href="<?php echo wp_logout_url('http://www.davidrisley.com'); ?>">Logout</a>
<?php } ?>

In the first line, what we’re doing is detecting if the user is logged in. Obviously, if they aren’t, there will be no user ID defined. In that case, we display the login form. Notice that we can now custom-code our own login form and make it look however we want. And that’s the point.

If the person IS logged in, then we don’t display the log-in form. Instead, we greet them by first name and provide the basic links that members should see.

This is a down-and-dirty implementation. If you had multiple membership levels and wanted to display different information for each level, then you’d need to have more if/else branches which detect the user’s subscription level.

Lastly, if you’re using a theme framework like Thesis or Headway, I’m really not sure how this would work.

Despite the limitations, I continue to recommend Wishlist Member for WordPress-powered membership sites.