kevinleary.net

Customizing the WordPress Login

Word­Press has robust login sys­tem built in that is often under used because of it’s design restraints. Any­one that create’s an account and edit’s their pro­file info may be con­fused when they see the Word­Press back­end. It would be ideal to have your login, cre­ate account, and edit pro­file screens look like the rest of your site. This is eas­ier to do than you think.

Recently I worked with a client that requested a sim­i­lar fea­ture. Because of their less than tech savvy audi­ence, they wanted to have a local avatar sys­tem that was dead sim­ple. Here’s a video expla­na­tion of the sys­tem I setup to han­dle the sit­u­a­tion. Even though I am address­ing the client directly, this pro­vides a great intro­duc­tion to how every­thing works.

I achieved this setup with the help of 3 great lit­tle plu­g­ins cre­ated by Jeff Far­thing:

With these plu­g­ins installed you can eas­ily style the Word­Press login screen, the Word­Press cre­ate an account screen and the pro­file edi­tor screen so that your web­site users never have to see the Word­Press back­end. They’re all pretty self explana­tory, aside from maybe the Redi­rect My Login plu­gin. This plu­gin allows you to con­trol the page a user is redi­rected to after they login. This is handy for sit­u­a­tions when the login box is on mul­ti­ple pages and you want users to be redi­rected back to the page they logged in from.

Once you’ve installed the plugin’s and tweaked the set­tings in Word­Press you can cus­tomize the look and feel with CSS. These are the styles I used in the demon­stra­tion above. Please under­stand that these may not look exactly the same as the demo due to the cas­cad­ing 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 peo­ple are at all inter­ested in this sort of thing please let me know, I’d be happy to cre­ate a bet­ter how-to video show­ing how it was all done.

1 Comment ↓

  1. David / 6.24.10 / 5:23 PM

    is it pos­si­ble to make it so I have to approve reg­is­tra­tions before peo­ple can access cer­tain pages?

Leave a comment

will not be published

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where LANGUAGE is a GeSHi supported language syntax.