A client asked me recently to style the login/registration and create a simple membership site. Although I spent quite a few hours looking at potential plugins, I felt that a lot of them didn’t fit the bill. I just needed something quick and easy to style, which eventually let me to the Theme My Login WordPress plugin. With over 900.000 downloads, I figured it would be worth a shot.

However, the documentation wasn’t that great, there was a lot of information to find but it was scattered across forums, StackExchange and Jeff Farthing’s own website. Therefore, I decided to write a guide on how to tackle the registration and login pages with Theme my Login.

Picking the right settings

This is probably the most straightforward part, I will quickly mention which ones are relevant to this guide. I won’t be going into the User Moderation, Custom User Links, Custom E-mail, and AJAX modules (AJAX might be discontinued in future updates of Theme my Login anyway) for now.

Stylesheet

This setting is turned off, we will be writing our own CSS.

E-mail Login

I find it a good user experience to be able to use their email as login name.

Custom Redirection

This is a really nice feature if you have multiple account types. You can redirect members after login based on user role.

reCAPTCHA

Pick up your key at Google reCAPTCHA, will help to stop bots from signing up to your site.

Security

Disable your wp-login page and set the max logins to a reasonable amount to stop bots from crashing your site with brute force hacks. You can also make your site private here which is great if you plan to create a members-only website.

Customising the Theme my login template files

So head on to your plug-ins and browse to the Theme-my-Login folder in which you will see templates (wp-content/plugins/theme-my-login/templates). This is where you can pick up the templates that you want to customize. The first one we will customize is the “login”. Download the login-form.php. And open it with your favorite editor.

Login Template

The original template is quite basic, has a few form fields and a login button. Here is what I did with it:

The code is as follows

<?php
/*
If you would like to edit this file, copy it to your current theme's directory and edit it there.
Theme My Login will always look in your theme's directory first, before using this default template.
*/
?>
<h2>Login to your account <i class="fa fa-lock"></i></h2>
<div class="login-form" style="width:100%;" id="theme-my-login<?php $template->the_instance(); ?>">
<div class="three-sixths first">
<h6>Please fill in your username and password</h6>
	<?php $template->the_action_template_message( 'login' ); ?>
	<?php $template->the_errors(); ?>
	<form name="loginform" id="loginform<?php $template->the_instance(); ?>" action="<?php $template->the_action_url( 'login' ); ?>" method="post">
                <div class="form-group full-width">		
			<input type="text" class="form-control login-field" name="log" placeholder="Username or Email" id="user_login<?php $template->the_instance(); ?>" class="input " value="<?php $template->the_posted_value( 'log' ); ?>" size="20" />
		        <label class="login-field-icon fui-user" for="reg-name"></label>
		</div>
                <div class="form-group full-width">	
			<input type="password" class="form-control login-field" name="pwd" placeholder="Password" id="user_pass<?php $template->the_instance(); ?>" class="input" value="" size="20" />
			<label class="login-field-icon fui-password" for="reg-name"></label>
		</div>

		<?php do_action( 'login_form' ); ?>

		<p class="forgetmenot">
			<input name="rememberme" type="checkbox" id="rememberme<?php $template->the_instance(); ?>" value="forever" />
			<label for="rememberme<?php $template->the_instance(); ?>"><?php esc_attr_e( 'Remember Me' ); ?></label>
		</p>
		<p class="submit">
			<input type="submit" name="wp-submit" id="wp-submit<?php $template->the_instance(); ?>" value="<?php esc_attr_e( 'Log In' ); ?>" />
			<input type="hidden" name="redirect_to" value="<?php $template->the_redirect_url( 'login' ); ?>" />
			<input type="hidden" name="instance" value="<?php $template->the_instance(); ?>" />
			<input type="hidden" name="action" value="login" />
		</p>
	</form>
	<?php $template->the_action_links( array( 'login' => false ) ); ?>
</div>
<div class="two-sixths" style="float:right;">
<h5>Not a member yet? Get <a href="<?php echo get_site_url(); ?>/register/">your account.</a></h5>
</div>
</div>

And here is the CSS, btw I’m also using Twitter bootstrap responsive css which is awesome.

.login-form {
	background-color: #eff2f3;
	padding: 24px 23px 20px;
	position: relative;
	border-radius: 6px;
	float:left;
	width:100%;
}

.login-form .login-field-icon {
	color: #bfc9ca;
	font-size: 22px;
	position: absolute;
	right: 10px;
	top: 12px;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}

.login-form .control-group {
	margin-bottom: 6px;
	position: relative;
}

.login-form .login-field {
	border-color: transparent;
	font-size: 17px;
	text-indent: 3px;
	position: relative;
	float: left;
}

.loginform .login-field:focus, .login-form .login-field:focus {
	border-color: #1abc9c;
}

.fui-user:before {
	-webkit-font-smoothing: antialiased;
	content: "\f007";
	font-family: 'fontawesome';
}

.fui-password:before {
	-webkit-font-smoothing: antialiased;
	content: "\f084";
	font-family: 'fontawesome';
} 

.login-form .login-field:focus + .login-field-icon {
	color: #1abc9c;
}

.login-form .login-field-icon {
	color: #bfc9ca;
	font-size: 22px;
	position: absolute;
	right: 10px;
	top: 12px;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}

.full-width {
	width: 100%;
}

As for the CSS you probably get the idea. I’m adding icons to fields and placing the text inside the fields rather than outside. I’m also using “clear-search-form.js” to remove the placeholder text. It’s a small jQuery plugin, I will write a simple tutorial on how to use that later.

Register Template

I extended the register template into the following:

The code is as follows

<?php
/*
If you would like to edit this file, copy it to your current theme's directory and edit it there.
Theme My Login will always look in your theme's directory first, before using this default template.
*/
?>
<h2>Create a free account <i class="fa fa-lock"></i></h2>
<div class="four-sixths first login-form" id="theme-my-login<?php $template->the_instance(); ?>">
<div class="one-half first"><h4>Community</h4><p>Inspiring fitness community, the number one stop to find healthy things to do.</p></div>
<div class="one-half"><h4>Membership</h4><p>Would you like to earn our special <a href="/membership-card/">Membership card?</a> Its simple, just get your health club involved in our network.</p>
</div>
	<?php $template->the_errors(); ?>
	<form name="registerform" id="registerform<?php $template->the_instance(); ?>" action="<?php $template->the_action_url( 'register' ); ?>" method="post">
                <div class="form-group one-half first">		
			<input type="text" name="first_name" placeholder="First Name" id="first_name<?php $template->the_instance(); ?>" class="form-control login-field" value="<?php $template->the_posted_value( 'first_name' ); ?>" size="20" tabindex="20" />
                    <label class="login-field-icon fui-user" for="first-name"></label>		
		</div>
                <div class="form-group one-half">		
			<input type="text" name="last_name" placeholder="Last Name" id="last_name<?php $template->the_instance(); ?>" class="form-control login-field" value="<?php $template->the_posted_value( 'last_name' ); ?>" size="20" tabindex="20" />
                    <label class="login-field-icon fui-user" for="last-name"></label>		
		</div>
                <div class="form-group full-width">		
			<input type="text" name="city" placeholder="City" id="city<?php $template->the_instance(); ?>" class="form-control login-field" value="<?php $template->the_posted_value( 'city' ); ?>" size="20" tabindex="20" />
                    <label class="login-field-icon fui-location" for="city"></label>		
		</div>

                <div class="form-group full-width">
			<select id="country" name="country" class="input">
		<option value="" disabled selected>Please select your Country</option>
		<option value="">Please select your Country</option>
		<option value="AF">Afghanistan</option>
		<option value="AX">Åland Islands</option>
		<option value="AL">Albania</option>
		<option value="DZ">Algeria</option>
		<option value="AS">American Samoa</option>
		
// etc. I wasn't able to get a complete list from WooCommerce via PHP so I had to work with my own list. Anyway it worked and when people select a field here its gets latched to their account so when they checkout the option is there.

			</select>
			</label>
		</div>

                <div class="form-group full-width">		
			<input type="text" name="user_login" placeholder="Username" id="user_login<?php $template->the_instance(); ?>" class="form-control login-field" value="<?php $template->the_posted_value( 'user_login' ); ?>" size="20" />
                    <label class="login-field-icon fui-user" for="reg-name"></label>
		</div>
                <div class="form-group full-width">
			<input type="text" name="user_email" placeholder="Email" id="user_email<?php $template->the_instance(); ?>" class="form-control login-field" value="<?php $template->the_posted_value( 'user_email' ); ?>" size="20" />		
                    <label class="login-field-icon fui-email" for="reg-email"></label>
		</div>

		<?php do_action( 'register_form' ); ?>
		<p id="reg_passmail<?php $template->the_instance(); ?>"><?php echo apply_filters( 'tml_register_passmail_template_message', __( 'A password will be e-mailed to you.' ) ); ?>
		<p class="submit">
			<input class="button btn-block" type="submit" name="wp-submit" value="<?php esc_attr_e( 'Register' ); ?>" />
			<input type="hidden" name="redirect_to" value="<?php $template->the_redirect_url( 'register' ); ?>" />
			<input type="hidden" name="instance" value="<?php $template->the_instance(); ?>" />
			<input type="hidden" name="action" value="register" />
		
</form>	
<hr>
<p><a href="#">Create a page</a> or do something else</p>
<?php $template->the_action_links( array( 'register' => false ) ); ?>
</div>

All these fields are customised with FontAwesome with an icon. (See the previous section on how to customise it with CSS. I’m a bit lazy to find and post up all the CSS code :). If you set up Google reCAPTCHA in the option settings of Theme-my-login. Then you will have a lovely reCAPTCHA at the bottom of the form stopping account spam.

As there are some new fields in the register page, I had to cook up some new validation and I wanted to connect the fields to data in WooCommerce. I did this by creating a “theme-my-login-custom.php” and placing it with the following contents in my main plugin folder located here “/wp-content/plugins”.

<?php 

function tml_registration_errors( $errors ) {
	if ( empty( $_POST['first_name'] ) )
		$errors->add( 'empty_first_name', '<strong>ERROR</strong>: Please enter your first name.' );
	if ( empty( $_POST['last_name'] ) )
		$errors->add( 'empty_last_name', '<strong>ERROR</strong>: Please enter your last name.' );
	if ( empty( $_POST['city'] ) )
		$errors->add( 'empty_city', '<strong>ERROR</strong>: Please enter your current city.' );
	if ( empty( $_POST['country'] ) )
		$errors->add( 'empty_country', '<strong>ERROR</strong>: Please enter your current country.' );
	return $errors;
}
add_filter( 'registration_errors', 'tml_registration_errors' );

function tml_user_register( $user_id ) {
	if ( !empty( $_POST['first_name'] ) )
		update_user_meta( $user_id, 'first_name', $_POST['first_name'] );
	if ( !empty( $_POST['last_name'] ) )
		update_user_meta( $user_id, 'last_name', $_POST['last_name'] );
	if ( !empty( $_POST['first_name'] ) )
		update_user_meta( $user_id, 'shipping_first_name', $_POST['first_name'] );
		update_user_meta( $user_id, 'billing_first_name', $_POST['first_name'] );
	if ( !empty( $_POST['last_name'] ) )
		update_user_meta( $user_id, 'shipping_last_name', $_POST['last_name'] );
		update_user_meta( $user_id, 'billing_last_name', $_POST['last_name'] );
	if ( !empty( $_POST['city'] ) )
		update_user_meta( $user_id, 'shipping_city', $_POST['city'] );
		update_user_meta( $user_id, 'billing_city', $_POST['city'] );
	if ( !empty( $_POST['country'] ) )
		update_user_meta( $user_id, 'shipping_country', $_POST['country'] );
		update_user_meta( $user_id, 'billing_country', $_POST['country'] );
	if ( !empty( $_POST['club_choice'] ) )
		update_user_meta( $user_id, 'club_choice', $_POST['club_choice'] );

}
add_action( 'user_register', 'tml_user_register' );

That concludes this guide for customising the login/register experience with Theme-my-login. I will add some information about how people can select their type of membership later if it gets requested in the comments. Good luck building and awesome register/login page!