Как да направим дизайн на WordPress Login screen

Влезте в папката на Вашата тема и отворете с редактор файла functions.php
Поставете следният код, който ще добави специфичният CSS код в login хедъра:

<?
/**
 * @desc attach custom admin login CSS file
 */
function custom_login_css() { 

  echo '<link rel="stylesheet"  href="'.get_bloginfo('template_directory').'/inc/login.css" />';

}
add_action('login_head', 'custom_login_css');

?>

Сега вече може да предефинирате всички стилове, които искате. За примера аз ще използвам моят login screen:

.locale-bg-bg {
    background-color: #f7f7f7 !important;
    background-image: none !important;
    background-image: url('bg-5.jpg')  !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
    background-attachment: fixed !important;
}

#backtoblog{
	display:none !important;
	}

.login form {
    margin-top: 20px !important;
    padding: 16px 17px 18px !important;
    background: #fff !important;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13) !important;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.13) !important;
}

.login #nav {
    margin: 10px 0 0 !important;
}
.login #backtoblog, .login #nav {
    padding: 0px !important;
}




#nav a {
	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	padding:2px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
#nav a:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
#nav a:active {
	position:relative;
	top:1px;
}
.login label {
    color: #000000 !important;
    font-size: 12px !important;
}
.wp-core-ui .button-primary {
	-moz-box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	background-color:#e4685d !important;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #ffffff !important;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px !important;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35 !important;
	
}
.wp-core-ui .button-primary:hover {
	background-color:#eb675e !important;
}
.wp-core-ui .button-primary:active {
	position:relative;
	top:1px;
}

#loginform p label #user_login, #loginform p label #user_pass { 
font-weight: normal;
padding: 8px 9px;
font-style: normal;
border-right-color: #dadada;
border-bottom-color: #dadada;
color: #999 !important;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
outline: none;
text-shadow: 0px 1px 0px #fff;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottombottom, from(#f9f9f9), to(#ffffff)) !important;
background: -webkit-linear-gradient(top, #f9f9f9, #ffffff) !important;  
background: -moz-linear-gradient(top,  #f9f9f9,  #ffffff) !important;
background: -ms-linear-gradient(top, #f9f9f9, #ffffff) !important;
background: -o-linear-gradient(top, #f9f9f9, #ffffff);
}

#loginform p label #user_login:focus, #loginform p label #user_pass:focus, #loginform p label #user_login:hover, #loginform p label #user_pass:hover { 
	color: #777 !important;
	background: #fff !important;
}

#loginform p label #user_login:-webkit-autofill, #loginform p label #user_pass:-webkit-autofill {
	background-color: #fff !important;
}

#login h1 { display: block; position: relative; height: 99px; margin-top: 10px; }
#login h1 a {
    background: #fff url('logo.png') no-repeat top center;
    display: block;
    position: relative;
    right: 55px;
    top: -50px;
    width: 419px;
    height: 160px;
}