This is the Ultimate Custom Login/Register Form Tutorial

Let's do away with the plain old, not very cool, default WordPress login/register form page for once, what do you say? I'm going to show you how to change the way you login to your site, and the way others join and login to your site too.

Okay, so you may be thinking what's so great about this tutorial compared to all the other one's posted on the internet. I've seen this a million times, and the all end the same, blah blah blah.

I can pretty much guarantee that there is nothing quite like this posted online, at least not available for free. You may be able to find a similar tut on the Tuts+ network, if you have a premium membership, which is great and all, but how many people actually do. Trust me, this is not like any other tutorial you may have "seen" before. There isn't anything as complete, or useful, or just plain awesome. I know because I have scoured the internet in search of how to create this when I was trying to first make it myself. It's just not out there, until now!

What you will learn from this tutorial

How to:

• create a sidebar jQuery UI Tabs widget
• create a custom form to show under each tab
  • a WordPress 3.0 Login form
  • a custom register form
  • a custom password reset form
• check if the visitor is logged in
• change the content of the tabs if user is logged in
• finally love yourself for knowing how to do this.

What you will need:

You will need to have some understanding of HTML5, CSS and jQuery or jQueryUI, though it's not required, but it does help. You will also need to either have a self-hosted copy of jQuery and/or jQuery UI on your website, if you choose to not use the Google CDN version of these, which I will be using here. If you don't know why I am using the Google hosted copies, then you need to read up on the great advantages of linking to a CDN hosted script.

Basically, CDN hosted files are faster and stuff etc. etc. It's cached on most anyone's computer who has access the internet sometime since the dawn of the modern world and the invention of the internet. Since 90% of sites out there link to a CDN copy of jQuery already, it's a pretty good chance most visitors to your site have the scripts saved already in the cache. Anyways, let's get going shall we.

1: The HTML5 Tabs Markup

I'm going to start off slow and show you how I would write the HTML for the jQuery tabs, using the new HTML5 format. You will notice that instead of the <div> tag which you may be used to, I am using the new <nav> which is a more semantic way of referring to a part of your site that is considered a form of navigation.

What I have below is how you would write it if you wanted to have some unordered lists within your tabs for example. We will be removing these lists later when we create the forms that will go in place of them. But you should keep a copy of this just as a sample of code, in the case that even later in this tutorial, you may want to show list items, for when the user is logged in and there is no need to show the login/register forms.

The HTML5 Tab Markup

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First Tab</a></li>
		<li><a href="#tabs-2">Second Tab</a></li>
		<li><a href="#tabs-3">Third Tab</a></li>
	</ul>

	<nav id="tabs-1">
		<ul>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
			<li>This is the first tab</li>
		</ul>
	</nav>
	<nav id="tabs-2">
		<ul>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
			<li>Second tab this is</li>
		</ul>
	</nav>
	<nav id="tabs-3">
		<ul>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
			<li>Tab three here buddy!</li>
		</ul>
	</nav>
</div><!-- // Tabs -->

You may have noticed that the first unordered list was not preceded by a <nav> element, and this is because this just happens to be how I wrote it here. You could choose to do that if you want, I just kept the tabs and the actual list items separate, so I know that the tabs aren't a navigable list of items, which link to other pages, just other lists.

They are a sort of navigation, just not what I would consider a navigation menu, personally. Also, you might have noticed that the first unordered list elements link to the #tabs-tabnumber. This is so that, 1. the tabs will match and show the correct tab to which you click on to see the content of, and 2. so that if the user has JavaScript disabled they will still be able to access the content of the tabs because of these anchors. They won't have the cool switcheroo like you would with JavaScript, but you can still see what's there and use it at least. Good practice for keeping your site progressively enhanced.

2: Styling The Tabs With CSS

The great thing about using jQuery UI to create the tabs is that it does all the styling for you, Woohoo! If you went the route of downloading jQuery UI which by the way can be customized to your needs, to host the files on your website yourself, then you also got the CSS Stylesheet that came with it in the zip file. That CSS file contains all the styles you need for the tabs to work as you want them to, ... tabs.

You can easily customize the styling as far as color and general appearance goes simply by defining a class which you can apply to the <div id="tabs"> or just use the #tabs ID attribute as your CSS selector, and apply your styling to it with that.

Although, with jQuery UI, there is the Theme Roller, which you can use any of the already created/rolled themes, or roll your own theme right on the site. It's really neat, and you should at least try it out. I didn't give it as much credit before as I should have long ago. Then I tried it, and wow... I said, now that's fresh. Check out the theme I created, which you can use it if you want.

Now, if you chose to use a CDN hosted copy of jQuery UI not to worry, you can easily en-queue the script that WordPress comes pre-packaged with out of the box. Whichever way you decided to use, here's how you can link to the CSS Stylesheet file you need for styling up your tabs.

En-queue the Stylesheet in functions.php file:

You need to link or en-queue the jQuery UI Styleseet, depending on whether you're using the jQuery UI download pack or the Google CDN copy.
(Note: If you just upload the jQueryUI.js file from the download, you will need to do the second option here to ensure that the Stylesheet is linked.)

Linking to the Stylesheet directly:

/*
 * Link to the CSS source file in your <head> of your site.
 */
function loadStyles() {
	echo '<link href="'. bloginfo('template_directory') .'/css/jquery-ui-1.8.1.custom.css" />';
}
add_action('wp_head', 'loadStyles');

/*
 * You can add the javascript file to the footer
 * With this too if you want.
 */
function loadScripts() {
	echo '<script src="'. bloginfo('template_directory') .'/js/jquery-1.4.2.min.js"></script>'; // needed if jQuery isnt loaded
	echo '<script src="'. bloginfo('template_directory') .'/js/jquery-ui-1.8.1.custom.min.js"></script>';
}
add_action('wp_foot', 'loadScripts');

Link to the scripts on the Google Content Distribution Network by doing the following instead:

/*
 * OR DO THIS if you want to use the Google
 * CDN Hosted scripts
 */
function loadScripts() {
	echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
	echo '<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>';
}
add_action('wp_foot', 'loadScripts');

En-queue the jQuery UI CSS Stylesheet included in WordPress:

Another way you can choose to load the Stylesheet, jQuery, or jQuery UI is by using the WordPress wp_enqueue_style() and wp_enqueue_script() functions.

Here you will find a list of all the scripts WordPress comes bundled with by default should you be interested to use them in your site for anything else. You would use the same word for en-queuing the style of a particular script too for most all of them if there is a Stylesheet included for any other one you may want to use.

function loadStyles() {
	wp_enqueue_styles( 'jqueryui' );
}
add_action('wp_head', 'loadStyles');

/*
 * Embed the jQuery UI javascript file in your
 * Footer using this if you choose to
 */
function loadScripts() {
	wp_enqueue_script( 'jquery' ); // You only need to add this if you do not already have jQuery embedded
	wp_enqueue_script( 'jqueryui' );
}
add_action('wp_foot', 'loadScripts')

Do keep in mind that many WordPress plugins, and even many themes do already load jQuery, most commonly anyways, though I have seen plugins embed other scripts and Stylesheets for them. Before you add the jQuery script (as well as jQueryUI script), I would highly recommend you view the source code of your site to see if you already have these loaded. Just right click on the page when viewing the site, and go to "view page source" in Firefox, or in IE it's just "view source". Check to see whether jQuery.js is in the source code either in the <head> or near the bottom of the page source code within the <footer> of the site. More than likely it already is at least once, if not more. Removing them all and leaving just one is a tutorial for another day though.

3: Initializing the Tabs For Takeoff

So now that we have the scripts and the styles and the HTML for the tabs all set up, lets test that they at least work before we start putting content in. To do this though, we need to still add one little bit of code which will initialize the tabs. Think of it like this, we set up all the pieces which make up a go kart (or tabs in this case), now we just need to put the key in and turn it on (random analogy I know, but it works right?).

To turn on our tabs you will need to add this line of code, AFTER the jQuery and jQuery UI scripts are loaded. If you have your own custom.js file for things like this, you could put it in there. If not, the way I would do it for now is to open your footer.php, find , and put it below that. This ensures it will run after the scripts we embedded using the above functions are loaded.

<script type="text/javascript">
$(function() {
	$('#tabs').tabs(); // initialize the tabs
});
</script>

4: Testing The Tabs To Tickle Them Pink

Now that you have this set up, try testing it out by dropping the first chunk of HTML5 code I gave you into your sidebar.php file, and see if these babies work! Make sure everything is doing dandy before you move onto the rest, and if there happens to be any issues, now would be the best time to resolve them before things start to get more complex. TRUST ME!!! I learned this the hard way, repeatedly, far more than I would've liked to that's for sure.

5: Getting Down And Dirty With The Forms

To start this part off, I'd like to point out that this tutorial assumes that you are currently using WordPress 3.0. If you are not, then you will need to create your own custom login form. I am going to be using the all-new WordPress 3.0 wp_login_form() function, which is a great addition to the new version of WordPress, only thing is they didn't make a function for the other forms. For anyone still using WP 2.9.x or earlier, I will show you a quick way to make a login form at the end of this tutorial. (I'm a softy, what can I say)

First thing we need to do is

Check if the user is already logged in! To do that, we start by writing the following:

<?php
/*
 * If user not logged in display forms
*/
if (!is_user_logged_in()) :
?>

If the user is already logged in, we can then show them a totally different set of tabs and tabbed content. This is a great way to customize your site even more for your members, and to show them different content since they are a member of your awesomely coolio site of hottness!

6: Next on the list is the tabs HTML

Nothing new here from what I showed you in the beginning, except that the list items now say Login, Register, and Lost Password. This is a self-explanatory I think, I would hope so at least.

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Login</a></li>
		<li><a href="#tabs-2">Register</a></li>
		<li><a href="#tabs-3">Lost Password</a></li>
	</ul>

7: Now for the first tab, the Login Form

This is the easiest tab of the three. All you have to do is put <?php wp_login_form(); ?> in the div for the first tab. Must simpler than the other two as you will see next.

	<div id="tabs-1"><!-- Login Form -->
		<?php wp_login_form(); ?>
	</div>

8: Custom Coding The Register Form

That last part will seem like a breeze compared to this one. Here we create the register form and throw in a couple of PHP functions you may not have seen before, and add the content of the second tab on our list.

	<div id="tabs-2"><!-- Register Form -->
		<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" id="registerform" name="registerform">
			<p>
				<label>Username<br />
				<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="user_login" />
				</label>
			</p>
			<p>
				<label>E-mail<br />
				<input type="text" tabindex="20" size="25" value="" class="input" id="user_email" name="user_email" />
				</label>
			</p>
			<p id="reg_passmail">A password will be e-mailed to you.</p>
			<br class="clear">
			<p class="submit">
				<?php do_action('login_form', 'register'); ?>
				<input type="submit" tabindex="100" value="Register" class="button-primary" id="wp-submit" name="wp-submit"											 />
				<input type="hidden" name="redirect_to" value="/" />
				<input type="hidden" name="cookie" value="1" />
			</p>
		</form>
	</div>

Lets review the above code. Nothing special as far as HTML forms go right? Just a basic HTML form, nothing you can't handle, or haven't seen in your web site making career I hope (if this part is news to you then you may want to check out the W3 for some beginners HTML tutorials). As for the new stuff the part <?php site_url('wp-login.php?action=register', 'login_post'); ?> is making use of the new WordPress 3.0 site_url() function which is a replacement of the get_option('site_url') function in previous versions of WordPress. Here we just add in the URL path of the register form along with scheme of login_post to give the site URL some context. Neither of these arguments are required by default, but in this case, they are. You could just write it like this <?php site_url(); ?>/wp-login.php?action=register but that's not as fun is it?

One thing I am not quite sure of though think you may want to leave as is, is whether the form element ID's and name attributes as I have here are required to use these or if you can assign your own names. I just assume keeping the default register form attributes the same, so to keep it from potentially not working (because these work as is I know), and for consistency sake.

The other strange and unusual part of the register form code is the <?php do_action('login_form', 'register'); ?>. This is the meatballs of the entire form. With out this Chicken Little would be quivering in his little chicken.... coup? Because the sky would be falling.

If you want the form to actually do something useful upon being submitted, then it needs to run this function. It tells WordPress that you want to register a new user account, as well as, the sending out of the confirmation email with the crazy randomly auto-generated password you receive when joined a WordPress site. If you have a firm grasp on that we can move on...

9: Anyone Here Lose A Password?

This is a form that is many times neglected I think, but just as important to keeping the members of your site which have already registered. I mean, I personally register an account on at LEAST one new site A DAY!! And out of all the sites which I am a registered member of and visit randomly choose to login to on any given day, I have to reset my password on average, TWICE A DAY on 2 different sites, almost without fail. For every site I sign up on each day, I have to reset my password on two other sites which I have forgotten the password for since last visiting it. It's quite annoying, but what the hell can I really do about it at this point?

It's not that unsurprising is it? It seems that every site on the internet now requires you to have an account, and not nearly enough use the Facebook Connect, Google Friend Connect or some other equivalent API available from various sites. So if you want to keep your members as part of your site, you better damn well make it easy for them to reset their passwords should they forget it amidst the library of passwords we all now must keep cataloged. The less steps they have to take to log back into your site, the more likely they even will at all.

10: Let's make a password reset form

	<div id="tabs-3"><!-- Lost Password Form -->
		<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" id="lostpasswordform" name="lostpasswordform">
			<p>
				<label>Username or E-mail:<br />
				<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="user_login" />
				</label>
			</p>
			<p class="submit">
				<?php do_action('login_form', 'resetpass'); ?>
				<input type="submit" tabindex="100" value="Get New Password" class="button-primary" id="wp-submit" name="wp-submit" />
				<input type="hidden" name="redirect_to" value="/" />
				<input type="hidden" name="cookie" value="1" />
			</p>
		</form>
	</div>
</div>

That wasn't so bad now was it? This isn't all that dis-similar from the register form either. You already know about the site_url() function. The only difference here is it's pointing to the URL wp-login.php?action=lostpassword instead of action=register. Also, the meatballs as I called it earlier, (the do_action() function) is just doing <?php do_action('login_form', 'resetpass'); ?>. EUREKA!!!!

That's what I said when I figured this out for this and the register form. It just all of a sudden came to me one day, and I was finally able to make my forms work, and then in-turn, write this amazing tutorial for you. This will send the user a password reset link, which they can click to have a new auto-generated password emailed to them so they can login to their account, and set their password to something a little more memorable.

11: Finishing Up - Or Are We...?

We could just end this here and close out the if(user is logged in){ or not } statement that started before making the tabs, and that's fine if you've had enough and can't take it any longer. I am not easy on the ears, or eyes. I won't take it personal if you decide to not go any further, just go play with your new tabs and forms. Bye!

For those that want to keep going, lets add a new set of tabs for the users that are logged in so they can have some custom coolioness as a registered, AND logged in member of your site.

Remember that first chunk of HTML5 code I gave you at the beginning, which I told you to save for later? Well it's later. Grab that code, and paste it after this else statement:

Do it... or Else...!!

<?php
else : // if they are logged in show submit form
?>

This says, well tickle me purple, this person is logged in!! In that case, lets show them a cooler set of tabs with some exclusive members only content only the registered and logged in visitors can see!

12: Only Showing Logged In Members Exclusive Tabs And Content

Here's what I have done to that chunk of code I told you to grab and paste here after the else statement. Did you do that? Or did you fail to follow my directions, again... It's okay, just copy this and use it instead of you want ;)

<div id="tabs">
	<ul>
		<li><a href="#m-pages">Members Only</a></li>
		<li><a href="#m-tuts">Members Tuts</a></li>
		<li><a href="#m-chat">Chat</a></li>
	</ul>
	<div id="m-pages">
		<ul>
			<li>For The Members</li>
			<li>My Members Rule</li>
			<li>Members Must Read</li>
			<li>I Do re-Members</li>
		</ul>
	</div>
	<div id="m-tuts">
		<ul>
			<li>Special Tut (like this one but private)</li>
			<li>A premium tutorial</li>
			<li>Something special</li>
			<li>Make a mustache man? wtf</li>
		</ul>
	</div>
	<div id="m-chat"><!-- Post Form -->
		<div id="doyoulikechats">
			You could chuck a <a href="http://chatango.com" target="_blank" rel="nofollow">Chatango.com</a> chat or something
			like that up in here, up in here, up in here.
		</div>
	</div>

</div>

Now maybe you want to have a list of privately published pages which you set up so only visitors that are logged in can access them. If not, here is another way to create WordPress members only pages, which you could set up, and list in the space for the first tab. Create some privately posted, members only tutorials on how to do some crazy super cool and insane shit. Yeah kinda like this tutorial, actually, exactly like this tutorial, only privately viewable to registered users.

Unlike this tutorial, but just as good. :P Last, maybe you want to have a chat for chitting away with your chatter-tat-tatters and sons. Or someone else that is registered on your site and likes talking to you. The possibilities to what these new members only tabs can hold is endless. All that we have left to do though, is END THIS!!!

13: Let's End This Schnitzel

So we need to put an endif; we plan to ever end this. Ha! Did ya get it?!?! Clever bastard, I am, eh? Okay...

<?php
endif;
?>

That's All Folks

Hope you liked this super custy amazed ation, makes me crave some more sensational stuff...

How About A Bonus

As promised,

For Those, Less Up-to-Date WordPress Nuts

Making a custom coded login form, is simple. You may already know how to do it just in making the register and password reset forms, but if not here we go.

<form name="loginform" id="loginform" action="<?php echo site_url('wp-login.php', 'login_post') ?>" method="post">
	<p>
		<label>Username<br>
		<input name="log" id="user_login" class="input" value="" size="20" tabindex="10" type="text"></label>
	</p>
	<p>
		<label>Password<br>

		<input name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" type="password"></label>
	</p>
	<p class="forgetmenot"><label><input name="rememberme" id="rememberme" value="forever" tabindex="90" type="checkbox"> Remember Me</label></p>
	<p class="submit">
		<?php do_action('login_form', 'login'); ?>
		<input name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" type="submit">
		<input name="redirect_to" value="<?php bloginfo('template_directory').'/page-your_members_home_page.php'); ?>" type="hidden">
		<input name="testcookie" value="1" type="hidden">
	</p>

</form>

Finally That's it!!

We made it through this long and drawn-out tutorial. You know, this is all readily open and available for you to view anytime you want had you just taken a second to think about it, you might have already thought about it and known. Then you wouldn't have needed to come follow my shenanigans here and you could've created this on your own. Just go check out the wp-login.php file, and see for yourself. It has all the greatness I have gone through here, aside from the mustache reference Oh, and the tabs of course.

For those who are going to ask me if I have a demo set up, please check out my test site here for a working example demonstration. I have created a tabbed dialog box that displays the login/register and password reset forms which I am using on the theme I am currently developing. Click the Login button in the top right corner, and test the login out by using the following information:

Username: themedemo
Password: themedemo

Any questions??? Post a comment, let me know what you're thinking, or what you've thought already. Enjoy!