Durante días que estuve buscando como poder personalizar el login de wordpress, y siempre me encontraba con guías que sólo recomendaban usar un plugins, pero cuando tienes bastantes plugins en tu wordpress ya no quieres seguir incorporando más, para que tu página no se haga más pesada . hasta que por fin encontre la solucion la cual comento ahora, pero esto no es mi solucion todo el crédito es de Javier.

A todo el mundo le gustan las webs personalizadas y que no se parezcan a ninguna otra, pero la pantalla de login de WordPress es igual en todas y, en ocasiones, nos gustaría personalizarla también. Vamos a solucionar esto de una manera sencilla y sin plugins.

¿Por qué personalizar la pantalla de Login o wp-admin de WordPress?

Seguramente alguna vez te haya hecho falta personalizar la página de login de un sitio WordPress, bien porque te lo pida el cliente o bien por hacer todas tus webs en WordPress con la misma pantalla en wp-admin, con el fin de hacer branding.

La pantalla de Login de WordPress es minimalista, lo cuál es bueno ya que, de esta manera, tarda mucho menos en cargar y apenas consume recursos. Pero si necesitas modificarla te diré cómo hacerlo sin plugins. Eso sí, es necesario tener unos mínimos conocimientos de CSS y saber manejar (que no romper) el archivo functions.php.

¿Por qué hacer la personalización del login de WordPress en un Child Theme?

Es importante que hagamos los cambios en un Tema Hijo o Child Theme ya que, de lo contrario, si hay alguna actualización del Theme sustituirá el archivo functions.php y perderemos todo nuestro trabajo. Para los que no sepan qué es y cómo se hace un Child Theme, lo explico aquí.

Además, haciéndolo en un Child Theme, si “rompemos” algo en el archivo functions.php no es tanta tragedia como si lo hiciéramos en el original.

Empezamos la personalización

Creamos un fichero de estilos para el login

Nos ponemos a trabajar, y lo primero que tenemos que hacer es crear el archivo que va a contener todas las clases y propiedades modificadas de la pantalla de login. Al archivo lo llamaremos login-style.css y lo almacenaremos en la carpeta /css/ de nuestro proyecto. Si tenemos la carpeta la creamos.

Vincular el archivo de estilos en functions.php

Ya está creado el archivo de estilos, pero no va a funcionar hasta que no modifiquemos el archivo functions.php para vincularlo. Para ello abrimos con un editor de código (yo utilizo Visual Studio Code y Atom) y añadimos una función. En esa función utilizamos el comando de WordPress ‘wp_enqueue_style‘. Dejo el enlace por si queréis informaros con más detalle.

function custom_login() {
wp_enqueue_style( ‘custom-login-css’, get_stylesheet_directory_uri() . ‘/css/login-style.css’, array(), ‘1.0’ );
}
add_action( ‘login_head’, ‘custom_login’ );

Este código lo que hace es poner en conocimiento de WordPress que hemos creado un nuevo archivo de estilos y le decimos que lo cargue en ‘login_head’, que es un Hook de WordPress.

Comprobamos que WordPress hemos hecho bien el proceso

Podemos comprobar lo hemos vinculado bien de varias maneras, una de ellas es poniendo el siguiente código CSS en el archivo login-style.css:

body {
background: #339999;
}

Si al actualizar sale la siguiente pantalla es que lo hemos hecho bien.

También podemos ver el código fuente de la página y buscar ‘custom-login-css‘, si no lo encontramos es que algo ha fallado, tendremos que revisar lo que hemos hecho.

Si lo hemos hecho bien podemos hacer toda clase de modificaciones que nos permita CSS, incluido cambiar el logotipo por el de nuestro cliente o el nuestro, cambios en el formulario, poner una imagen de background, etc…

Eso ya lo dejo a vuestra imaginación.

También podemos cambiar el enlace del logotipo

En la pantalla de login viene por defecto el logotipo de WordPress, si hacemos click sobre él nos lleva a la página https://es.wordpress.org/. Podemos cambiar este enlace por otro que nos venga bien a nosotros, como puede ser un enlace a nuestra web.

Esto se hace añadiendo esta función a nuestro archivo functions.php:

function custom_url_login() {
return ‘www.google.es’; // Ponemos la web que queramos.
}
add_filter( ‘login_headerurl’, ‘custom_url_login’ );

Y eso es todo, podemos ver como con unas líneas en el archivo functions.php y algún conocimiento de CSS podemos hacer del login de WordPress una experiencia personalizada.

Resultado final de mi personalización

Os dejo cómo me ha quedado y el código CSS que he añadido:

body {
  background-image: url('../img/backlogin.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.login h1 a {
  background-image: url('../../../uploads/2020/01/logo.png');
  background-repeat: no-repeat;
  background-size: 300px;
  width: 300px;
}

.login form {
  background: rgba( 255, 255, 255, .7 );
  border: none;
  border-radius: 5px;
  box-shadow: none;
}

.wp-core-ui .button-primary {
  background: #339999;
  border-color: #339999;
}

a, a:hover {
  color: #339999;
}

.login #backtoblog a, .login #nav a {
  text-decoration: none;
  color: #339999;
}

.login #backtoblog a:hover, .login #nav a:hover {
  text-decoration: underline;
  color: #339999;
}

.login .button.wp-hide-pw .dashicons {
  color: #339999;
}

input[type="checkbox"],
input[type="password"],
input[type="text"] {
  background: transparent !important;
}

input[type="checkbox"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  background: transparent;
  border-color: #339999;
  box-shadow: 0 0 0 1px #339999;
}

input[type="text"],
input[type="password"] {
  border-radius: 25px;
  padding: 0 15px !important;
}