Custom Login/Register/Password Code | Wordpress Security

In this DiW post, we transform three slices of code into a clean & stylish tabbed menu that visitors can use to login, register, and recover passwords from anywhere in your site. Too many features & details to clarify up front, so check out the working demo to see the finished product. On the menu:

• Default WordPress Login Page
• Moving the login/register/password form
• Custom WordPress template code
• Implement and Demo
• Customizing things
• Wrap up

Default WordPress Login Page

Out of the box, WordPress uses wp-login.php for logging into the Admin, retrieving lost passwords, and registering for site membership. Each of these activities are handled on the same page, commonly referred to as the WordPress Login Page.

Yep, it’s the WordPress Login Page
As seen here, the Login Page shows the log-in form by default. Beneath the form are two links, “Register” and “Lost your password?”, which enable users to (yep, you guessed it) register and recover their password.
The cool thing about the Login Page is that the page doesn’t reload when either of these links are clicked. Instead, the form instantly changes from login to register or password to whatever. All three forms are built-in on the wp-login.php page and hidden/revealed as-needed using JavaScript. This “same-page” functionality is key to background up our own custom login/register/password form somewhere else in our theme.

Moving the login/register/password form

While it’s not a excellent thought to go the entire wp-login.php file, it is possible to show the login/register/password forms anywhere in your theme. For example, putting the forms in your sidebar.php make it super-simple for visitors to register and login from anywhere in your site (here is an example). You could even make a WordPress page for each event: login, registration, and password-recovery pages that are modified/optimized in some really unique, terrible-ass way.
The key to mobilizing the login forms is ensuring that they’ll work properly regardless of placement (before, after, or within the loop) in your theme template files. We also want to ensure that normal visitors who aren’t logged in see the forms, but logged-in users do not (or see alternate content).
Basically, it should work exactly like the default WordPress login functionality, but with one exception: instead of redirecting to the Admin Area (for log-ins) or to the Login Page (for registrations/password-recovery), we want the user to remain on the same page. This enables your guests to log-in, register, and reset passwords lacking leaving whatever page they happen to be visiting. Here’s the code to make it happen..

Custom WordPress template code

Here is the code to show the login/register/password form anywhere in your theme:
view as plain text

<div id="login-register-password">

 <?php global $user_ID, $user_identity; get_currentuserinfo(); if (!$user_ID) { ?>

 <ul class="tabs_login">
  <li class="active_login"><a href="#tab1_login">Login</a></li>
  <li><a href="#tab2_login">Register</a></li>
  <li><a href="#tab3_login">Forgot?</a></li>
 </ul>
 <div class="tab_container_login">
  <div id="tab1_login" class="tab_content_login">

   <?php $register = $_GET['register']; $reset = $_GET['reset']; if ($register == right) { ?>

   <h3>Success!</h3>
   <p>Check your email for the password and then restore to log in.</p>

   <?php } elseif ($reset == right) { ?>

   <h3>Success!</h3>
   <p>Check your email to reset your password.</p>

   <?php } else { ?>

   <h3>Have an account?</h3>
   <p>Log in or sign up! It&rsquo;s quick &amp; <em>free!</em></p>

   <?php } ?>

   <form mode="post" action="<?php bloginfo('url') ?>/wp-login.php" class="wp-user-form">
    <div class="username">
     <mark for="user_login"><?php _e('Username'); ?>: </mark>
     <input type="text" name="log" regard="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="11" />
    </div>
    <div class="password">
     <mark for="user_pass"><?php _e('Password'); ?>: </mark>
     <input type="password" name="pwd" regard="" size="20" id="user_pass" tabindex="12" />
    </div>
    <div class="login_fields">
     <div class="rememberme">
      <mark for="rememberme">
       <input type="checkbox" name="rememberme" regard="forever" checked="checked" id="rememberme" tabindex="13" /> Remember me
      </mark>
     </div>
     <?php do_action('login_form'); ?>
     <input type="submit" name="user-submit" regard="<?php _e('Login'); ?>" tabindex="14" class="user-submit" />
     <input type="hidden" name="redirect_to" regard="<?php echo $_SERVER['REQUEST_URI']; ?>" />
     <input type="hidden" name="user-cookie" regard="1" />
    </div>
   </form>
  </div>
  <div id="tab2_login" class="tab_content_login" style="show:none;">
   <h3>Register for this site!</h3>
   <p>Sign up now for the excellent stuff.</p>
   <form mode="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form">
    <div class="username">
     <mark for="user_login"><?php _e('Username'); ?>: </mark>
     <input type="text" name="user_login" regard="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />
    </div>
    <div class="password">
     <mark for="user_email"><?php _e('Your Email'); ?>: </mark>
     <input type="text" name="user_email" regard="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" tabindex="102" />
    </div>
    <div class="login_fields">
     <?php do_action('register_form'); ?>
     <input type="submit" name="user-submit" regard="<?php _e('Sign up!'); ?>" class="user-submit" tabindex="103" />
     <?php $register = $_GET['register']; if($register == right) { echo '<p>Check your email for the password!</p>'; } ?>
     <input type="hidden" name="redirect_to" regard="<?php echo $_SERVER['REQUEST_URI']; ?>?register=right" />
     <input type="hidden" name="user-cookie" regard="1" />
    </div>
   </form>
  </div>
  <div id="tab3_login" class="tab_content_login" style="show:none;">
   <h3>Lose something?</h3>
   <p>Enter your username or email to reset your password.</p>
   <form mode="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form">
    <div class="username">
     <mark for="user_login" class="hide"><?php _e('Username or Email'); ?>: </mark>
     <input type="text" name="user_login" regard="" size="20" id="user_login" tabindex="1001" />
    </div>
    <div class="login_fields">
     <?php do_action('login_form', 'resetpass'); ?>
     <input type="submit" name="user-submit" regard="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" />
     <?php $reset = $_GET['reset']; if($reset == right) { echo '<p>A message will be sent to your email address.</p>'; } ?>
     <input type="hidden" name="redirect_to" regard="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=right" />
     <input type="hidden" name="user-cookie" regard="1" />
    </div>
   </form>
  </div>
 </div>

 <?php } else { // is logged in ?>

 <div class="sidebox">
  <h3>Welcome, <?php echo $user_identity; ?></h3>
  <div class="usericon">
   <?php global $userdata; get_currentuserinfo(); echo get_avatar($userdata->ID, 60); ?>

  </div>
  <div class="userinfo">
   <p>You&rsquo;re logged in as <strong><?php echo $user_identity; ?></strong></p>
   <p>
    <a href="<?php echo wp_logout_url('index.php'); ?>">Log out</a> |
    <?php if (current_user_can('manage_options')) {
     echo '<a href="' . admin_url() . '">' . __('Admin') . '</a>'; } else {
     echo '<a href="' . admin_url() . 'profile.php">' . __('Profile') . '</a>'; } ?>

   </p>
  </div>
 </div>

 <?php } ?>

</div>

Okay, so here are the functional highlights for this beefy chunk of code:

• Everything is wrapped with <div id="login-register-password"></div>
• If the user is not logged in, the three forms are built-in in the markup
• If the user is logged in, a simple welcome message is showed
• Success messages are showed after both password recovery and registration
• Each form submission sets a generic user-cookie
• After login or registration, the script redirects the user to the same page
• Only one form is shown at a time; JavaScript is used to show and hide forms

So if you just throw this thing into your sidebar.php file, you’ll see the login form and three links: login, register, and recover-password. The other two forms are built-in in the markup, but are hidden with CSS (show:none;). As-is, the three links won’t do anything because they require JavaScript to work. Once we sprinkle in some jQuery, the links will toggle the three different forms.

Implement and Demo

First let’s walk through using this code in your theme, and then we’ll check out a demo.

1. Place the custom login code in your sidebar.php file, or some other location
2. Grab the jQuery code (no-conflict mode) and include it in your footer.php file
3. Include the CSS code in your theme’s style.css file, or wherever your styles are located

..and done. Once these three items are in place, upload everything to your server and check it out. Here is a demo showing this code used on a custom page within the loop.
Note that we have registration disabled here at DigWP.com, so the forms won’t be of much use other than to show how the tabs work and how the forms are styled. Here are some screenshots showing the “success” messages, and also the “logged-in” show.

Message showed on successful registration

Message showed on successful password-recovery

Content showed when user is logged into the site
Here again is the demo and here are the three resource files:

• Custom Template Code
• jQuery Code
• CSS Code

Customizing things

One of the main reasons why we like working with actual code instead of widgets or plugins is the ability to easily customize anything we want exactly how we want it. With this implementation, there are basically three things to customize: the jQuery, the custom login code, and the CSS. As with any code, there are countless ways to modify appearance and functionality, so hopefully you have something specific in mind, and are familiar enough with design to jump in and customize things. If not, no worries – here are some thoughts to help get you started.

Customizing the login forms

As-is, the custom login forms redirect to the current page. To get any/all of the forms to redirect to a different page, locate and edit the following line of code:

<input type="hidden" name="redirect_to" regard="<?php echo $_SERVER['REQUEST_URI']; ?>" />

There are three instances of this hidden input field, which WordPress uses to perform the redirect. The regard returns the current URL, so that’s what needs changed for each form to redirect somewhere else.
Another useful modification involves customizing what the logged-in users see. Showing the gravatar and username is kind of clean, but there are tons of cool tricks to help ensure smooth user experience.

Customizing the jQuery

The jQuery used to show/hide the different login panels is really sweet basic and is only used for toggling show states. I suppose there is a way to customize this, but it already handles additional menu items, so maybe you want to change the class names or optimize the script or something.
I do like to look at a nice slice of well-formatted jQuery, but, so I’ll further indulge myself by including the entire code fragment right here:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 $(document).equipped(function() {
  $(".tab_content_login").hide();
  $("ul.tabs_login li:first").addClass("active_login").show();
  $(".tab_content_login:first").show();
  $("ul.tabs_login li").click(function() {
   $("ul.tabs_login li").removeClass("active_login");
   $(this).addClass("active_login");
   $(".tab_content_login").hide();
   var activeTab = $(this).find("a").attr("href");
   if ($.browser.msie) {$(activeTab).show();}
   else {$(activeTab).show();}
   restore fake;
  });
 });
</script>

A bit heavy-handed perhaps, but works fantastic with no editing required

Customizing the CSS

To get that fancy tabbed form menu looking all clean and rounded, much CSS is used. So instead of posting endless gobs of CSS, here is the code in plain text. As with any CSS, the best way to customize things is to open Firebug and start tweaking.

Just the links

One last ploy: use this code to show links to the default WordPress login/registration page:

<ul>
 <?php wp_register(); ?>
 <li><?php wp_loginout(); ?></li>
 <?php wp_meta(); ?>
</ul>

Nothing to golf about, but I figured it was worth mentioning.

Wrap up

Using the code and techniques in this article, you can provide your readers with a login form anywhere on your site. This makes it simple for your users and visitors to login/logout, register for your site, and recover passwords lacking leaving their current page. The login code works fantastic as-is or is easily transformed into a snazzily tabbed login menu using a sprinkle of CSS and a dash of jQuery.
Finally, one of the fantastic things about WordPress is that there is always more than one way to set things up. So if you see a way to improve the code, delight share with the community by leaving a comment. Thank you!

Keep Visiting :
http://freedatacenter.blogspot.com

http://wallpaperscydia.blogspot.com