Testing the Login Form Widget

In an earlier post,I gave an example of how to set up a custom login form and add a short code to display the login form anywhere on your site.

I’ve been asked to demonstrate the the form in action… so here it is:

This is display using the shortcode:

[ twpwshowloginwidget ]

(Remove the space after the ‘[' and before the ']‘)

The code for this widget is shown below, and you can download it from here

 <?php function twpwnewloginwidget() {
if (is_user_logged_in()) {
$redirect = get_bloginfo('url');
global $current_user;
get_currentuserinfo();
?>
<div id="loginform-wrapper">
Welcome <strong><?php echo $current_user->user_firstname; ?></strong>.
<form name="loginform" action="<?php echo wp_logout_url($redirect); ?>" method="post">
<input type="submit" name="wp-submit" id="wp-submit" value="LOG OUT" />
<br>
<a href="<?php bloginfo('url'); ?>/wp-admin/profile.php" style="font-size:11px;">Update Your Details</a>
<input type="hidden" name="redirect_to" value="<?php bloginfo('url'); ?>" />
</form></div>
<!– If User Is NOT Logged In Display This –>
<?php } else {
$notloggedinurl = get_bloginfo('url').'wp-register.php';
?>
<div id="loginform-wrapper">
<form name="loginform" action="<?php bloginfo('url'); ?>/wp-login.php" method="post">
<label for="log">Username</label> <input type="text" name="log" id="user_login" value="" tabindex="10" /><br>
<label for="pwd">Password</label> <input type="password" name="pwd" id="user_pass" value="" tabindex="20" />
<div style="text-align:center;"><input type="submit" name="wp-submit" id="wp-submit" value="LOG IN" /> <input type="button" value="SIGNUP" onClick="parent.location='<?php echo $notloggedinurl ?>'" /></div><br>
<a href="<?php bloginfo('url'); ?>/wp-login.php?action=lostpassword">Lost your password?</a>
<input type="hidden" name="redirect_to" value="<?php bloginfo('url'); ?>" />
<input type="hidden" name="testcookie" value="1" />
</form></div>
<?php }
}
add_shortcode('twpwshowloginwidget', 'twpwnewloginwidget');

Simply copy and paste this information into your themes functions.php file

To set the width of the widget, add the line:

#loginform-wrapper { width: 250px; } 

to your themes style.css file.  Change this style to suit your theme.