Following on from yesterdays post, I decided that a custom login box would be appropriate to include on a website.

Thanks to Insite Website Design, I found something that would work nicely and I’ve extended this to include a way to easily add this to your sidebar without messing too much with the code.

The code is very ‘vanilla’ and you can make the widget display however you want using CSS styles.

<!– If User Is Logged In Display This –>
<?php function twpwnewloginwidget() {
if (is_user_logged_in()) { ?>
Welcome <strong><?php echo $user_identity ?></strong>.
<form name=”loginform” id=”loginform” action=”<?php echo wp_logout_url(); ?>” method=”post”>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”LOG OUT” />
<a href=”http://www.yourdomain.com/wp-admin/”>EDIT YOUR PROFILE</a>
<input type=”hidden” name=”redirect_to” value=”<?php bloginfo(‘url’); ?>” />
</form>
<!– If User Is NOT Logged In Display This –>
<? } else { ?>
<form name=”loginform” id=”loginform” action=”<?php bloginfo(‘url’); ?>/wp-login.php” method=”post”>
<label for=”log”>Username</label> <input type=”text” name=”log” id=”user_login” value=”" size=”20″ tabindex=”10″ /></p>
<label for=”pwd”>Password</label> <input type=”password” name=”pwd” id=”user_pass” value=”" size=”20″ tabindex=”20″ /></p>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”LOG IN” /> <input type=”button” value=”SIGNUP” onClick=”parent.location=’<?php bloginfo(‘url’); ?>/wp-login.php?action=register’” />
<a href=”<?php bloginfo(‘url’); ?>/wp-login.php?action=lostpassword”>Lost your password?</a>
<input type=”hidden” name=”redirect_to” value=”<?php bloginfo(‘url’); ?>/members” />
<input type=”hidden” name=”testcookie” value=”1″ />
</form>
<? }
}
add_shortcode(‘twpwshowloginwidget’, ‘twpwnewloginwidget’);
add_filter(‘widget_text’, ‘do_shortcode’);
?>

Add this code to your Themes function.php file.  It will create a function called twpwnewloginwidget, and add a short code called twpwshowloginwidget.

By adding the line:

add_filter(‘widget_text’, ‘do_shortcode’);

the shortcode will work in the widget area – so to display your new widget, add a text widget and put the code [ twpwshowloginwidget ] (remember to remove the spaces  after the [ and before the ])

To change where your members are sent on login, modify this line:

<input type=”hidden” name=”redirect_to” value=”<?php  bloginfo(‘url’); ?>/members” />

and change the /members/ to the specific page / post you choose.

Finally – remember to change all references to yourdomain.com to your own website url.

You can style your widget whichever way you want in your style sheet…. more on that later.

Charly Leetham is Wishlist Member Certified and an Online Business Implementation Expert and she helps small businesses take their business online. She provides services to solopreneurs and small business who wish to sell or promote their products and services online.
Your Onine Business Implementation Expert and Virtual IT Support Team