by Chris Coyier & Jeff Starr

Posted on: December 15, 2010 by Jeff Starr 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 explain 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

Tis the season to sit by the warm glow of your monitor, drink a cup of hot chocolate, and learn about the world's most popular publishing platform. Save some bucks during our limited-time holiday sale!

G O T O B

Grab the Feed for free updates!

Out of the box, WordPress uses w p-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, its 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 doesnt 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 included on the w p-login.php page and hidden/revealed as-needed using JavaScript. This same-page functionality is key to setting up our own custom login/register/password form elsewhere in our theme.

Admin HTAccess PHP SEO Theme

CSS

Design Links

JavaScript Security

Plugins Site News

Testing XHTML

Upgrade

... loading ... While its not a good idea to move the entire w p-login.php file, it is possible to display the
Refresh

converted by Web2PDFConvert.com

login/register/password forms anywhere in your theme. For example, putting the forms in your sidebar.php make it super-easy for visitors to register and login from anywhere in your site (here is an example ). You could even create a WordPress page for each event: login, registration, and password-recovery pages that are customized/optimized in some really unique, bad-ass way. HTML 4.01 The key to mobilizing the login forms is ensuring that theyll 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 arent 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 without leaving whatever page they happen to be visiting. Heres the code to make it happen.. HTML 5 XHTML 1.0 XHTML 1.1 Something else / not sure
Vote View Results

Top

Here is the code to display 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 == true) { ?> <h3>Success!</h3> <p>Check your email for the password and then return to log in.</p> <?php } elseif ($reset == true) { ?> <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 fast &amp; <em>free!</em></p> <?php } ?> <form method="post" action="<?php bloginfo('url') ?>/wp-login.php" class="wp-user-form"> <div class="username"> <label for="user_login"><?php _e('Username'); ?>: </label> <input type="text" name="log" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="11" /> </div> <div class="password"> <label for="user_pass"><?php _e('Password'); ?>: </label> <input type="password" name="pwd" value="" size="20" id="user_pass" tabindex="12" /> </div> <div class="login_fields"> <div class="rememberme"> <label for="rememberme"> <input type="checkbox" name="rememberme" value="forever" checked="checked" id="rememberme" tabindex="13" /> Remember me </label> </div> <?php do_action('login_form'); ?> <input type="submit" name="user-submit" value="<?php _e('Login'); ?>" tabindex="14" class="user-submit" />

converted by Web2PDFConvert.com

<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /> <input type="hidden" name="user-cookie" value="1" /> </div> </form> </div> <div id="tab2_login" class="tab_content_login" style="display:none;"> <h3>Register for this site!</h3> <p>Sign up now for the good stuff.</p> <form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form"> <div class="username"> <label for="user_login"><?php _e('Username'); ?>: </label> <input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" /> </div> <div class="password"> <label for="user_email"><?php _e('Your Email'); ?>: </label> <input type="text" name="user_email" value="<?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" value="<?php _e('Sign up!'); ?>" class="user-submit" tabindex="103" /> <?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" /> <input type="hidden" name="user-cookie" value="1" /> </div> </form> </div> <div id="tab3_login" class="tab_content_login" style="display:none;"> <h3>Lose something?</h3> <p>Enter your username or email to reset your password.</p> <form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form"> <div class="username"> <label for="user_login" class="hide"><?php _e('Username or Email'); ?>: </label> <input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" /> </div> <div class="login_fields"> <?php do_action('login_form', 'resetpass'); ?> <input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" /> <?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" /> <input type="hidden" name="user-cookie" value="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() . '">' . __('A dmin') . '</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 hefty chunk of code: Everything is wrapped with <div id="login-register-passw ord"></div>
converted by Web2PDFConvert.com

If the user is not logged in, the three forms are included in the markup If the user is logged in, a simple welcome message is displayed Success messages are displayed 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, youll see the login form and three links: login, register, and recover-password. The other two forms are included in the markup, but are hidden with CSS (display:none;). As-is, the three links wont do anything because they require JavaScript to work. Once we sprinkle in some jQuery, the links will toggle the three different forms.

First lets walk through using this code in your theme, and then well 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 themes 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 wont 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 display.

Message display ed on successful registration

converted by Web2PDFConvert.com

Message display ed on successful password-recovery

Content display ed 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

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 ideas to help get you started.

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" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

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

The jQuery used to show/hide the different login panels is actually pretty basic and is only used for toggling display 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 love to look at a nice slice of well-formatted jQuery, however, so Ill further indulge myself by including the entire code snippet 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).ready(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() {

converted by Web2PDFConvert.com

$("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();} return false; }); }); </script>

A bit heavy-handed perhaps, but works great with no editing required ;)

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.

One last trick: use this code to display 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.

Using the code and techniques in this article, you can provide your readers with a login form anywhere on your site. This makes it easy for your users and visitors to login/logout, register for your site, and recover passwords without leaving their current page. The login code works great 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 great 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, please share with the community by leaving a comment. Thank you!

Call a Widget with a Shortcode WordPress Custom functions.php Template, Part 2 WordPress functions.php Template with 15 Essential Custom Functions Add Classes to post_class Change Quick Action Button in Admin

Posted in: Theme T ags: Admin, Theme Discussion: 17 Comments

Lukasz Waszczuk said on December 16, 2010: Just what I was looking for thanks. Are you gong to have this in the new book update?
converted by Web2PDFConvert.com

#1 Reply

Jeff Starr said on December 16, 2010: No plans to do so at this point, but we do have some new ideas/projects that may include this technique. Thanks for the idea ;)
#1.1 Reply

Thao said on December 16, 2010: Great resource! Thanks for making it available. Does anyone know if this could/would work with WordPress MultiSite?
#2 Reply

Alpha Project Studios said on December 16, 2010: Really nice writeup. This will be useful for some of my clients that run WordPress sites.
#3 Reply

Thao said on December 16, 2010: The Tabs werent working for me. So I asked Denzel who suggested changing $j to jQuery. There is nothing called $j. The tabs work for me now. Thanks Denzel and digWP.
#4 Reply

Jeff Starr said on December 20, 2010: Thats just for noconflict mode you can actually use anything you want, or nothing at all, but the j is totally fine for working in noconflict mode in WordPress. http://docs.jquery.com/Using_jQuery_with_Other_Libraries
#4.1 Reply

Eric said on December 17, 2010: Very cool! I wonder if it would be possible to allow users to use their Facebook account to login using WP-FB AutoConnect or another plugin?
#5 Reply

Kirby said on December 17, 2010: I copied the code into my single.php file. I see all the links but only the login works. The register does not work and so is the other. what else do I need to do? Please help me
#6 Reply

Kennyboy7 said on December 18, 2010: Im suffering the same, tried the suggesation above of changing $j to $jQuery but still the same. This is a great idea and could really do with a fix cos I need to use this on site I have. Anyone got any ideas how to fix this prob ?
#6.1 Reply

Kennyboy7 said on December 18, 2010: Sorry my bad I should learn to read its not $jQuery to just need to remove $j and put jQuery instead.
jQuery(document).ready(function() { jQuery(".tab_content_login").hide(); jQuery("ul.tabs_login li:first").addClass("active_login").show (); jQuery(".tab_content_login:first").show ();
converted by Web2PDFConvert.com

jQuery("ul.tabs_login li").click(function() { jQuery("ul.tabs_login li").removeClass("active_login"); jQuery(this).addClass("active_login"); jQuery(".tab_content_login").hide(); var activeTab = jQuery(this).find("a").attr("href"); if (jQuery.brow ser.msie) {jQuery(activeTab).show ();} else {jQuery(activeTab).show ();} return false; }); }); #6.1.1 Reply

Lee said on December 17, 2010: Excellent and very useful I just wonder one thing though, is there some code we use to redirect the login to this page? for example if we put this in a a page template and set it up on /login can we stop users seeing the standard WordPress login screen and redirect it to the new one?
#7 Reply

Jeff Starr said on December 20, 2010: I think I covered how to do redirects in the last section, but I may not be understanding correctly..
#7.1 Reply

hakanfolkesson said on December 17, 2010: I dont get this:

As far as understand it does the same in both cases I also wonder about the practice of putting jQuery in the footer. Isnt it better to have it in a separate file or in the header? Thats how I learnt it. I have seen some examples of Javascript or jQuery in the footer lately. Is that a new standard? Id be very happy if someone could explain that. Thanks/Hkan
#8 Reply

Matthijs said on December 18, 2010: The example code is vulnerable to XSS, because you echo out $_SERVER['REQUEST_URI'] directly without escaping, in several places See http://markjaquith.w ordpress.com/2009/09/21/php-server-vars-not-safe-in-forms-or-links/ For the same reason, I would probably also escape $user_identity. Another, minor, issue is that it might be preferable to code for E_STRICT. Like when you have
$register = $_GET['register'];

I would do
if(isset($_GET['register'])) { $register = $_GET['register']; } else { $register = false; }

But other then this, very nice method of user login/registration. And thanks for writing this.
#9 Reply

Jeff Starr said on December 20, 2010: Thanks Matthijs! I will update the code next available opportunity. Cheers :)
#9.1 Reply

rami said on December 19, 2010:

I think it would be easier to use if it will be a shortcode instead of a theme template.

Brad Trivers said on December 20, 2010: I agree (without doing any research). Include as plugin that adds functionality using shortcodes. What are the drawbacks of this? re: Customizing Things If want to customize then just customize the plugin code. This seems just as easy to me. Just have to watch that plugin updates dont overwrite customizations. Heck maybe a well-designed plugin could allow input of custom code? (Im writing a reservation system plugin that has custom login/password/register code that is added via shortcodes wish Id read this article a few months ago great work!)
#10.1 Reply

Name (required) Mail (will not be published) (required) Website

You can use these tags: <a href=""> <blockquote> <pre><code> <em> <strong>
S U B M I T C O M M E N T

Subscribe to responses via Email

Jeff Starr has been designing & dev eloping WordPress-powered sites since 2005 . He dev elops WordPress plugins, creates WordPress themes, and writes lots of articles about WordPress, web security , and designing with Web Standards. More.. Chris Coy ier is a real-world web designer who has been reaching for WordPress to power client sites for many y ears. He subscribes to the theory that not only is WordPress capable of powering any website it is almost alway s the right choice. More..

Contact About Site Advertising Archives

converted by Web2PDFConvert.com