Cómo personalizar el logo de wp-admin en WordPress (sin plugin)

¡Buenos días! En este vídeo vamos a ver cómo personalizar el logo de la página de login de WordPress, o wp-admin, sin utilizar plugins. ¡Vamos allá!

Veamos los pasos que hemos seguido en el vídeo y aprovecho para compartiros el código que he utilizado

Paso 1: cambiamos el logo de WordPress

Para cambiar el logo insertamos el siguiente código en el archivo functions.php en el directorio de nuestro tema o en el plugin de Snippets.

Si trabajáis con el functions.php aseguraos de hacerlo en un child theme ya que si insertáis el código en theme normal y luego actualizáis el theme, los cambios se perderán.

El código para personalizar el logo es el siguiente, donde sólo le faltaría insertar la URL del logo entre los paréntesis de url().

//Cambiamos el logo
add_action( 'login_enqueue_scripts', 'bs_change_login_logo' );
function bs_change_login_logo() { ?> 

<style type="text/css"> 
  
#login h1 a {
background-image: url();
} 
					  
</style>
					  
<?php }

Paso 2: personalizamos la URL del logo

El siguiente paso sería cambiar la URL del logo ya que por defecto nos lleva a wordpress.org. Para hacerlo simplemente añadimos el siguiente código debajo del anterior:

			  					  
//Cambiamos la URL del logo			  
add_filter( 'login_headerurl', 'bs_login_logo_url' );
function bs_login_logo_url($url) {
    return '#';}

Una vez insertado podemos personalizar el la URL indicándola entre las comillas del return o dejando el símbolo del hashtag para que la URL no lleve a ningún sitio.

Paso 3: cambiamos o quitamos el título del logo

Hacemos mismo que en el paso dos pero en este caso personalizamos el título de la URL del logo (texto que aparece cuando pasamos el ratón por encima del logo) y lo hacemos con este código.

//Cambiamos el título de la URL del logo
add_filter( 'login_headertitle', 'bs_login_logo_url_title' );
function bs_login_logo_url_title() {
    return '';}

Igual que antes, indicamos el texto en el return o lo dejamos en blanco para que no aparezca nada.

Opcional: desactivamos la URL del logo

Si no queremos que el logo nos lleve a ningún sitio y sea simplemente decorativo podemos añadir la siguiente línea al CSS de la primera función para que quede así:

#login h1 a {
background-image: url();
pointer-events:none
}

¡Y ya lo tenemos! Yo soy muy fan de hacer las cosas en WordPress sin utilizar plugins (siempre que sea práctico) así que ya hay varios vídeos en el blog donde enseño a hacerlo. Si te interesa puedes echarle un vistazo al blog y ver cómo puedes prescindir de plugins para hacer que tu WordPress sea más ligero 🙂