WordPress has robust login system built in that is often under used because of it’s design restraints. Anyone that create’s an account and edit’s their profile info may be confused when they see the WordPress backend. It would be ideal to have your login, create account, and edit profile screens look like the rest of your site. This is easier to do than you think.

Recently I worked with a client that requested a similar feature. Because of their less than tech savvy audience, they wanted to have a local avatar system that was dead simple. Here’s a video explanation of the system I setup to handle the situation. Even though I am addressing the client directly, this provides a great introduction to how everything works.

I achieved this setup with the help of 3 great little plugins created by Jeff Farthing:

With these plugins installed you can easily style the WordPress login screen, the WordPress create an account screen and the profile editor screen so that your website users never have to see the WordPress backend. They’re all pretty self explanatory, aside from maybe the Redirect My Login plugin. This plugin allows you to control the page a user is redirected to after they login. This is handy for situations when the login box is on multiple pages and you want users to be redirected back to the page they logged in from.

Once you’ve installed the plugin’s and tweaked the settings in WordPress you can customize the look and feel with CSS. These are the styles I used in the demonstration above. Please understand that these may not look exactly the same as the demo due to the cascading nature of the CSS used on this site.

/* Custom Login */
html #profile,
html #login
{
	padding:0;
}
#your-profile h3
{
	font-size: 13px;
	color: #333;
}
div#login #loginform
{
	background:#eee;
	float:left;
	padding:18px;
	font:12px/18px Georgia, Times, serif;
}
div#login #registerform
{
	background:#e9e8ba;
	float:left;
	padding:18px;
	font:12px/18px Georgia, Times, serif;
}
div#login #loginform p.submit,
div#login #registerform p.submit
{
	margin-bottom:0;
}
div#login label
{
	font-weight:bold;
}
div#login label input
{
	font-weight:normal;
}
div#login input#rememberme
{
	vertical-align:bottom;
}
table.form-table
{
	text-align:left;
}
table.form-table img.avatar
{
	margin-right:20px;
}
#content #avatar-data a
{
	border-bottom:none;
}
#avatar_file
{
	margin:10px 0 15px 0;
}
#pass2
{
	margin-top:10px;
}
#description,
#pass2,
#pass1
{
	margin-bottom:4px;
}
table.form-table label
{
	width:300px;
	display:block;
}
table.form-table th,
table.form-table td
{
	padding:4px 0;
}
table.form-table th
{
	color:#424242;
	font:13px/18px Georgia, Times, serif;
	vertical-align:top;
	width:300px;
}
table.form-table td
{
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
	color:#9A9897;
	vertical-align:top;
}
table#avatar-data td
{
	vertical-align:top;
}
table.form-table td input
{
	margin-right:5px;
}
body ul.links,
body #login ul.links
{
	list-style:none;
	margin:0;
	padding:0;
	clear:both;
	font-family:Helvetica, Arial, sans-serif;
}
body p.message,
body #login .error
{
	font-size:10px;
	padding:9px 10px 7px 10px;
	font-weight:bold;
	text-transform:uppercase;
	font-family:Helvetica, Arial, sans-serif;
	border:none;
}
body p.message strong,
body #login .error strong
{
	font-weight:bold;
	color:#111;
}
div#login ul.links a,
body #login ul.links a
{
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
	border-bottom:none;
}
body ul.links li,
body #login ul.links li
{
	display:inline;
	margin-right:10px;
}

If people are at all interested in this sort of thing please let me know, I’d be happy to create a better how-to video showing how it was all done.