Only a few days after launching my new blog design, I’ve already received a couple of e-mails from other WordPress users asking me how I implemented the registration and login function of my blog from the front page, and the answer couldn’t be any simpler. Using a few simple preset PHP functions and a couple of specific name values, we can let users register, login and log out from anywhere we want.

Overview

Both functions rely on a set of specific form and input names, sent to a specific parser. For example, since my domain is steelfrog.com, my login and registration requests are parsed on http://www.steelfrog.com/wp-login.php.

Demonstration

You can try it out right here! Just scroll up and check out the top-left portion of your screen. Click the question mark icon to register, or if you’ve already done so, simply login right at the top of the page.

Login/Logout

WordPress has a built-in function to return your site’s login and logout URLs. They are:

wp_login_url()

wp_logout_url()

Using those functions, we can easily create a customized login form and by checking if the user is already logged in, we can present the logout button. Let’s take a look at an example form, and then decipher it.

<?php if ( is_user_logged_in() ) { ?>
	<a href="<?php echo wp_logout_url(get_permalink()) ?>">Logout</a>

<?php } else { ?>
	<form id="login" method="post" action="<?php echo wp_login_url( get_permalink() ) ?>">
		<fieldset>
			<label>Username
			<input type="text" value="" name="log" /></label>
			<label>Password</label>
			<input type="password" value="" name="pwd"  /></label>
			<input type="submit" />
		</fieldset>
	</form>

The first thing we do is check if the user is logged in by running if ( is_user_logged_in() ). If the user is logged in, then we present the logout button. If he’s not logged in, then we present the login form. I’ve added the get_permalink() function to the parameters, which will redirect users to the current page once they hit submit and their credentials are checked.

The form itself is quite simple. The parser checks for specific name values, so it’s important to keep the form and label names. That’s all their is to the login form, and logout button.

Registration

Registration, much like the login and logout form, is quite simple and relies on a few key elements.

<form name="registerform" action="http://www.steelfrog.com/wp-login.php?action=register" method="post">
	<fieldset>
		<label>Username
		<input type="text" name="user_login" value="" /></label>
		<label>E-mail
		<input type="text" name="user_email" value="" /></label>
		<input type="hidden" name="redirect_to" value="" />
		<input type="submit" name="wp-submit" />
	</fieldset>
</form>

The form’s action points to your blog’s login URL, with the action=register parameter. The rest of the form functions like the login and checks for name sets.

That’s all there is to it. Implement to your sidebar, header or in your content, style accordingly and enjoy.

Follow-up

I’ve noticed that WordPress 3.0 also implemented a function that does this. I’m still looking into the best way to use this.

<?php wp_login_form( $args ); ?>