Para quem é apaixonado por esta ferramenta maravilhosa, aí vai um mini tutorial pra você alterar o visual padrão de sua página de login do WordPress.

Se você tem acesso aos arquivos do seu tema wordpress vai precisar somente adicionar um pequeno código. No meu caso optei por fazer apenas algumas mudanças nas cores, e troca de logotipo, não quis colocar uma imagem de background que é perfeitamente possível. No nosso exemplo, estaremos alterando a logomarca e colocando cores gradientes na nossa página de login, alterado a página padrão do wordpress.

Primeiro visite o site Webkit Gradiente para criar seu próprio estilo de cores, deixando a pagina com a cara de seu blog ou site. Depois que gerar seu esquema de cores, que poderá também ser outras conforme cores definidas no css de sua preferência, vá para o próximo passo.

Pois bem, abra o arquivo functions.php do seu tema e adicione as seguintes linhas em seu código:
OBS: em h1 a {background:url(coloque a url da sua logomarca, atentando para o espaço que não deve ultrapassar 250px de largura).

function meu_login_logo() {
echo '
<style>
h1 a {background:url(https://auranet.com.br/fotos/banner-250x100.png) 50% 50% no-repeat !important;}
body.login { background-image: linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -o-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -moz-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -webkit-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -ms-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.21, rgb(45,163,119)),
color-stop(0.61, rgb(72,196,155))
);
}
body:before {
content: “Desenvolvido por Auranet para WordPress”;
position: absolute;
left: 25px;
bottom: 10px;
}

#login form {   background-image: linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -o-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -moz-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -webkit-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);
background-image: -ms-linear-gradient(bottom, rgb(45,163,119) 21%, rgb(72,196,155) 61%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.21, rgb(45,163,119)),
color-stop(0.61, rgb(72,196,155))
);
}
#login form:hover, #login form:active {
background-image: linear-gradient(bottom, rgb(232,184,41) 29%, rgb(255,221,70) 65%);
background-image: -o-linear-gradient(bottom, rgb(232,184,41) 29%, rgb(255,221,70) 65%);
background-image: -moz-linear-gradient(bottom, rgb(232,184,41) 29%, rgb(255,221,70) 65%);
background-image: -webkit-linear-gradient(bottom, rgb(232,184,41) 29%, rgb(255,221,70) 65%);
background-image: -ms-linear-gradient(bottom, rgb(232,184,41) 29%, rgb(255,221,70) 65%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.29, rgb(232,184,41)),
color-stop(0.65, rgb(255,221,70))
);
}
.login #nav a, .login #backtoblog a {
color: #222 !important;
text-shadow: 0 1px 0 #bbb;
-moz-text-shadow: 0 1px 0 #bbb;
-webkit-text-shadow: 0 1px 0 #bbb;
-khtml-text-shadow: 0 1px 0 #bbb;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #000 !important;
}
label {
color: #093 !important;
text-shadow: 0 1px 0 #000;
-moz-text-shadow: 0 1px 0 #000;
-webkit-text-shadow: 0 1px 0 #000;
-khtml-text-shadow: 0 1px 0 #000;
}

</style>’;
}
add_action(‘login_head’, ‘meu_login_logo’);

Espero ter contribuído de alguma forma com este post. Qualquer dúvida deixe sua mensagem.