Personnaliser le logo de connexion WordPress avec le logo du thème

Quand on arrive sur la page de connexion d’un site WordPress, on tombe presque toujours sur le logo par défaut de WordPress. C’est pratique, mais sur un site client, un intranet ou même un blog personnel, cela casse un peu la continuité visuelle. J’ai eu ce besoin sur plusieurs projets : garder une interface propre, cohérente avec le thème actif, sans installer une extension de plus.

Le petit bout de code ci-dessus répond justement à ce cas. Il récupère automatiquement le logo défini dans les options du thème via le personnalisateur, puis remplace celui de la page de connexion. Le lien du logo est lui aussi modifié pour renvoyer vers la page d’accueil du site, ce qui rend l’ensemble plus logique pour vos utilisateurs.

Dans cet article, je vais vous montrer comment intégrer ce snippet dans votre site, ce qu’il fait exactement, et quelques ajustements utiles pour adapter la taille du logo selon votre charte graphique. L’idée est de vous proposer une solution simple, propre et facile à réutiliser sur n’importe quel projet WordPress.

La page de connexion est souvent l’un des premiers écrans vus par un administrateur, un client ou un rédacteur. Laisser le logo natif de WordPress n’est pas bloquant, mais cela donne une impression un peu générique, surtout si tout le reste du site a déjà été personnalisé.

Dans mes projets, j’aime bien harmoniser aussi cette partie. Cela permet de prolonger l’identité visuelle du site jusque dans l’administration. Sur un site d’entreprise, un espace membre ou un extranet, ce petit détail fait souvent la différence.

L’autre avantage de cette méthode, c’est qu’elle s’appuie directement sur le logo défini dans le thème. Si vous changez le logo depuis Apparence > Personnaliser, la page de connexion suivra automatiquement, sans devoir retoucher le code.

Vous pouvez placer ce snippet dans le fichier functions.php de votre thème enfant ou dans votre extension dédiée aux personnalisations.

Voici le code complet à utiliser :

<?php// Changer le logo de la page de connexion
add_action('login_head', function () {
    // On récupère le Logo
    $custom_logo_id = get_theme_mod( 'custom_logo' );    if ($custom_logo_id) {
        // On récupère l'URL du logo
        $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );        // On écrase le logo de WordPress par le notre
        echo '<style type="text/css">
        h1 a { background-image:url('.$image[0].') !important; height: 150px !important; background-size: 450px !important; width: inherit !important; }
    </style>';
    }});// Changer le lien du logo
add_filter( 'login_headerurl', function () {
    return get_bloginfo( 'url' );
} );

Ce code fait deux choses très simplement :

• il évite l’ajout d’une extension dédiée juste pour cette tâche
• il remplace le logo WordPress par celui enregistré dans le thème
• il modifie le lien du logo pour pointer vers l’accueil du site
• il applique une taille personnalisée pour éviter un affichage trop petit

La première partie utilise le hook login_head. Cela permet d’injecter du CSS directement dans l’en-tête de la page de connexion.

Le script va chercher l’identifiant du logo enregistré dans le thème avec get_theme_mod('custom_logo'). Si un logo existe, WordPress récupère son URL grâce à wp_get_attachment_image_src().

À partir de là, le CSS remplace l’image de fond du sélecteur h1 a, qui correspond au logo affiché sur l’écran de connexion.

Le second hook, login_headerurl, sert à modifier le lien appliqué sur ce logo. Par défaut, WordPress renvoie vers son propre site. Ici, le clic ramène simplement vers votre page d’accueil.

Selon le format de votre logo, vous aurez sans doute besoin d’ajuster cette ligne :

background-size: 450px !important;

Sur certains logos horizontaux, 450 px fonctionne très bien. Sur un logo carré ou plus compact, une valeur plus petite sera souvent plus propre.

Je vous conseille de jouer principalement sur ces trois propriétés :

• height
• background-size
• width

Le but est de garder un rendu net sans déformer l’image.

Dans quels cas utiliser cette personnalisation

J’utilise souvent cette astuce dans plusieurs situations :

• création de sites vitrines pour des clients
• espaces privés avec plusieurs comptes utilisateurs
• boutiques WooCommerce avec accès vendeur ou gestionnaire
• sites de formation avec espace membre
• réseaux multisites WordPress

C’est un ajout léger, facile à maintenir, et qui reste compatible avec la plupart des thèmes modernes.

Ce genre de personnalisation ne change pas le fonctionnement du site, mais rend l’ensemble plus cohérent. Quand un utilisateur retrouve le même logo entre la partie publique et la connexion, l’expérience paraît plus homogène.

Sur un blog orienté WordPress et développement, ce sont justement ces petits snippets qui font gagner du temps au quotidien. Une fois en place, on n’y pense plus, et le résultat reste propre sur tous les futurs projets.