Personnaliser le logo de connexion de WordPress sans plugin

Envie de personnaliser le logo de connexion à votre administration WordPress ? C’est possible en insérant quelques lignes de code dans le fichier functions.php de votre thème. Au final, un site plus professionnel et proche de votre image de marque.Le logo par défaut de WordPress est présent sur votre page de connexion lorsque vous y accédez par l’URL classique :

http://monsite.fr/wp-login.php

Guère très professionnel, vous pouvez le remplacer par celui de votre choix en intervenant au niveau de votre thème.

De fait, les mises à jour de WordPress n’auront aucun impact sur votre nouveau logo… vous auriez très bien pu, en effet, remplacer le fichier image par défaut.

Connectez-vous dans un premier temps dans votre administration WordPress, déroulez le menu Apparence puis cliquez sur Éditeur.

Dans la partie droite de votre écran, ouvrez le fichier functions.php.

N.B : vous pouvez éditer chaque fichier de votre thème à l’aide d’un éditeur PHP comme Coda pour MacOS X, Notepad++ pour Windows ou même Dreamweaver. Le gros avantage est de pouvoir annuler rapidement les modifications et de bénéficier de fonctionnalités d’édition et de mises en ligne via FTP avancées.

Étape n°1 – Édition du fichier functions.php

En début ou fin de fichier, insérez les lignes de code suivantes :

<?php // logo personnalise
function childtheme_custom_login() {
 echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login.css" />';
}

add_action('login_head', 'childtheme_custom_login');?>

Veillez à ne pas laisser de lignes vides si vous le placez en fin de fichier.

La 3e ligne de code permet d’ajouter une feuille de styles personnalisée lors du chargement de la page de connexion de WordPress. Pour l’exemple, j’ai indiqué l’URL de feuille de styles contenue par défaut dans n’importe quel thème.

Il nous faut donc soit :

  • Ajouter les styles CSS nécessaires pour la page de connexion ;
  • Créer une nouvelle feuille de styles CSS qui ne contiendra que les styles propres à la page de connexion ;

Nous retiendrons la seconde solution pour un résultat optimal – bien que, personnellement, j’ai adopté la première solution.

Etape n°2 – Création d’une feuille de styles

A l’aide d’un éditeur de texte, créez un nouveau fichier que vous nommerez login.css.

Envoyez ce dernier dans le répertoire /wp-content/themes/NOM_DU_THEME/ de votre site WordPress.

Ajoutez ensuite les lignes de code suivantes :

#login h1 a {background-image:url("http://VOTRESITE.com/wp-content/themes/NOM_DU_THEME/images/logo-perso.png") !important;}

Il ne vous reste plus qu’à envoyer dans le dossier /images de votre thème, un fichier dont le nom devra correspondre à celui que vous voyez dans le code – en l’occurrence, logo-perso.png.

Bien entendu, libre à vous de changer cet URL si votre logo n’est pas localisé dans le dossier du thème.

Pour envoyer votre logo personnalisé sur votre serveur, utilisez un client FTP tel que FileZilla ou CyberDuck.

Étape n°3 – Vérification et résultat final

Si vous n’avez rencontré aucun soucis, voici le résultat d’une page de connexion personnalisée avec, ici, le logo de WordPress Channel.

Capture d'écran - Ecran de connexion personnalisée pour WordPress
Privilégiez une image de 320 pixels par 80 maximum

Parmi les erreurs très courantes, il se peut que vous obteniez une page blanche. Vérifiez simplement qu’aucune ligne blanche ne soit présente en fin du fichier functions.php.

Contrairement à de nombreux tutoriels sur le sujet, vous ne devriez pas obtenir de problèmes de redirection vers la page d’administration de WordPress localisée dans /wp-admin.

Très important d’un point de vue marketing, la personnalisation du logo n’est qu’une première étape dans la création de votre image de marque. A l’aide votre feuille de styles, vous pouvez modifier l’intégralité de cette page et aller plus loin dans ce que les anglo-saxons appellent communément le branding. Indispensable pour vos clients notamment !

Crédits photo : ToniVC

75 commentaires

    1. David

      Tu vas voir, ça viens au bout d’un moment Faut pas trop forcer au début a mon avis. Parfois je laisse mariner les infos quelques semaines après avoir bien galéré dessus, et quand je reprends, pof, je comprends tout bien mieux et bien plus vite

  1. Hadrien

    C’est pas très cadré tout ça (si on va sur ta page wp-admin), j’ai fait la même chose sur mon site mais avec le tutos de geekeries donc je sais pas si il diffère…
    Cela dit ça reste une bonne modification à faire quand même.
    Au passage quand on clique sur le logo dans wp-admin, on est redirigé sur WordPress.org, donc faudrait changer ça ^^.

    1. Aurélien Denis auteur de l’article

      Attention ! Ne modifies jamais les fichiers du coeur de WordPress car toutes tes modifications s’effaceront à la moindre mise à jour.

      C’est tout l’intérêt de passer par un fichier functions.php qui va outrepasser les fichiers de base de WordPress.

  2. Roberto

    Bonjour,

    J’ai un p’tit problème, depuis que j’ai fais la manip’ : j’ai une erreur qui empêche la navigation dans mon site :

    Parse error: syntax error, unexpected ‘<' in /dns/com/olympe-network/LE-NOM-DE-MON-SITE/wp-content/themes/twentyten/functions.php on line 484

    Pourriez-vous m'aidez s'il vous plaît, je suis un novice.

    Merci,
    Au revoir

    1. Aurélien Denis auteur de l’article

      Comme l’indique l’erreur, le caractère ‘<' ne doit pas être présent à la ligne 484. Vérifies qu'il ne soit pas présent en double.Sinon, tu peux supprimer les lignes de code que tu viens d'ajouter pour supprimer le problème.Vu que tu utilises le thème TwentyTen, je te conseille de placer les lignes de code du tutoriel tout à fait en haut du fichier.

  3. Roberto

    Le Problème est que je n’ai plus accès à mon site; car, comme je l’ai dis vaguement en haut, lorsque je vais sur mon site, j’ai droits au fameux message …

    Merci,
    Au revoir

    1. Aurélien Denis auteur de l’article

      Dans ce cas, passes directement par ton serveur FTP en allant dans /wp-content/themes/NOM-DU-THEME/functions.php et édites ce dernier.

      La plupart des clients FTP dont FileZilla disposent d’une fonction d’édition intégrée.

  4. Roberto

    Je vous remercie énormément. Mais, maintenant ce problème corrigé, un autre se pose. J’ai beau chercher dans Google,je n’y trouve aucun solution : maintenant, c’est le message Parse error: syntax error, unexpected T_IF in /dns/com/olympe-network/LE NOM DE MON SITE/wp-content/themes/twentyten/functions.php on line 1 qui s’affiche. Voici également le début du code :

    <?php/** * TwentyTen functions and definitions * * Sets

    Merci,
    Au revoir.

    1. Aurélien Denis auteur de l’article

      Sans le fichier complet je ne peux t’aider davantage. Le plus simple est que tu écrases ce dernier (en faisant une copie du mauvais fichier au préalable) par le plus récent contenu dans l’archive de TwentyTen.

  5. Roberto

    Je vous remercie infiniment pour votre aide.

    Sinon, chez, cela pose des problèmes de redirections. Ce n’est pas grave, j’ai enlevé le code.

    Merci encore pour toute votre aide,
    Au revoir.

  6. Emmanuel

    Il y a aussi la solution présentée par http://wpmu.org/daily-tip-how-to-customize-your-wordpress-login-logo-in-under-a-minute
    sauf que cette fois il n’y a pas besoin de second fichier css.

    Et si on ajoute la fonction de http://www.geekeries.fr/snippet/modifier-hyperlien-logo-connexion-wordpress

    On arrive un morceau de code comme ça :

    function custom_login_logo() {
    echo '
    h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.png) ; }
    ';
    }
    add_action('login_head', 'custom_login_logo');

    function custom_login_url() {
    return 'http://www.monsiteperso.com';
    }
    add_filter('login_headerurl', 'custom_login_url');

    Maintenant il ne reste plus que le title= »Propulsé par WordPress »

  7. Eric

    Bjr,
    Pas moyen … Je comprends pas pour l’avoir fait sur d’autres sites et sans problèmes. Pour ce site, j’utilise GENESIS de ThemeForest
    Si quelqu’un avait une idée …
    Merci

  8. Eric

    Merci Aurélien … mais bon. En fait, ce qu’il se passe est qu’il me redirige vers « …wp-admin%2F&reauth=1 » si cela t’en dit plus ? Merci !

  9. Badabouum

    Voila le code en entier à mettre dans le footer de functions.

    Il reste le blem du Title, propulsé par…
    Bref,

    <?php // logo personnalise
    function my_custom_login_logo() {
    echo '
    h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/logo-login.gif) !important; }
    ‘;
    }
    add_action(‘login_head’, ‘my_custom_login_logo’); function custom_login_url() {
    return ‘http://www.monsite.com’;
    }
    add_filter(‘login_headerurl’, ‘custom_login_url’);
    ?>

  10. Badabouum

    De la même taille que le logo WordPress d’origine. V pas me compliquer la vie ! D’autant que la taille d’origine, me semble personnellement très correct.

        1. SamSoul

          Pour ce faire il te faut ajouter au début de ton fichier « .htaccess » à la racine de ton site la ligne suivante:
          RewriteRule ^admin/?$ /wp-login.php [NC,L]

          Tu peux changer « admin » par ce que tu veux.
          Ainsi, lorsque tu tapes http://monsite.com/admin, tu es automatiquement redirigé vers http://monsite.com/wp-login.php

          Pour ma part j’ai mis la chose suivante:
          RewriteRule ^login/?$ /wp-admin [NC,L]

          En effet, en appliquant le tuto, lorsque je tape http://monsite.com/login, la page de connexion reste celle de WP alors que si je rentre http://monsite.com/wp-admin les modifications apparaissent correctement… Donc je ne redirige pas directement vers wp-login.php mais vers wp-admin qui fait le reste
          Quelqu’un aurait-il une explication? Une objection peut-être sur cette façon de procéder?

          1. Aurélien Denis auteur de l’article

            La page wp-admin correspond à celle du tableau de bord de WordPress. Si tu n’es pas connecté c’est normal d’être redirigé vers la page de connexion wp-login.

            Le reste n’est que réécriture d’URLs…

          2. SamSoul

            Redirection oui, c’est le but de la manœuvre… Et au passage une réponse à actutechno.
            Elle fonctionne très bien, que ce soit avec ou sans la modification de l’apparence de la page de connexion.
            Seulement, pour que la modification de l’apparence de la page de connexion soit appliquée partout (login et wp-login.php) je dois rediriger login vers /wp-admin et non vers /wp-login.php
            C’est ça qui me paraissait étrange.
            -> je redirige login vers /wp-login.php: les modifications d’apparence ne sont pas prisent en compte
            -> je redirige login vers /wp-admin: les modifications d’apparence sont visibles partout.

            Je cherche juste à comprendre pourquoi je dois « ruser » pour arriver à mes fins…

  11. dimitri

    Hello!
    Je n’y arrive pas. Pour le moment, le logo « wordpress » sur la page admin a disparu mais je n’affiche pas le mien. Dois-je intégrer le code du fichier « login.css » dans mon fichier « style.css » (en modifiant les chemins) ? Dois-je plutôt créer un « styles.css » comme suggéré par guy40800 ? Merci

    1. Aurélien Denis auteur de l’article

      Difficile de t’indiquer une solution sans avoir un accès au fichier functions.php.

      Sinon, essaies ceci :

      function wpc_logo_perso() {
      echo '<style type="text/css">
      h1 a { background-image:url(https://wpchannel.com/wp-content/themes/wordpress-channel/images/logo-login.png) !important; }
      </style>';
      }
      add_action('login_head', 'wpc_logo_perso');

      Il te suffit de changer l’URL de l’image.

  12. n3o51

    Bonjour j’ai activer il y a peut la réécriture d’url via wordpress et lorsque je me déconnecte après les modification j’ai droit a une erreur 404.
    Le bouton de déconnection me redirige vers http://monsite/wordpress/wordpress/?logout=true

    Hors mon site est seulement dans wordpress peut modifier le lien de déconnection ou y a t’il une solution plus propre

    @dimitri : vérifier bien que vous allez chercher l’image dans le bon dossier.

  13. n3o51

    Salut
    En faite ce qui ce passe , oui l’url fonctionne mais depuis que je l’ai activer je me retrouve avec une redirection fausse seulement sur le lien de déconnection donc je vois ou le modifier mais c’est dans les fonction de wordpress donc mise a jour faut recommencer.Alors je me tournai vers toi savoir si y avait pas un moyen de contourner sa dans le function du thème avec un filtre si je ne me trompe pas.Sinon o pire je refait un encart méta dans la sidebar et je met le bon lien si y a rien d’autre a faire.

    Par avance merci.
    n3o51

  14. gnuoulipo

    J’arrive un peu tard et peut-être hors sujet…En fait je ne veux pas modifier le logo de connexion admin mais tout simplement rajouter un style dans la feuille de style de mon thème : style.css. Vous écrivez vous-même qu’il y a deux méthodes et que vous aviez utilisé, personnellement, la première : «Ajouter les styles nécessaires pour la page de connexion ».
    Personnellement je cherche à rajouter un style dans le fichier style.css que je vousdrais utiliser dans des articles ou des pages. Ce style est une classe .cattention que j’ai testé dans une page html créée sur un site perso fait main. Il fonctionne.
    Je l’ai donc intégré au fichier style.css. J’ai vérifié le code source produit par wordpress ; il y a bien un lien dans head qui pointe sur le fichier style.css. Si, en passant par le code source, html, de l’éditeur, je crée un paragraphe , cela ne fonctionne pas. Si dans ce même éditeur je place en tête de ma page copie du style intégré à style.css, cela fonctionne mais n’a pas grand intérêt…
    Une idée ?
    Merci.

  15. gnuoulipo

    J’ajoute que l’éditiondu style dans l’éditeur html de wordpress pose un autre problème car si l’on passe en mode visuel tout ce qui avait été édité balise et style est effacé.

  16. Ludovic

    Bonjour,
    d’abord merci pour ce post qui m’a bien aidé. Reste un dernier souci : le titre. Lorsque je laisse trainer ma souris sur le nouveau logo, j’ai toujours l’ancien titre qui apparait, que dois-je rajouter dans le code ici pour le changer ?
    Merci de votre réponse,
    Amicalement,
    Ludovic

  17. GraphicMB

    Bonsoir,
    Je vous remercie, votre article ma aider à compléter mon code

    // logo personnalise
    function childtheme_custom_login() {
    echo  »;
    }
    add_action(‘login_head’, ‘childtheme_custom_login’);

    // Filtre qui permet de changer le lien sous le logo
    function connection_logo_link()
    {
    return get_bloginfo( ‘siteurl’ );
    }
    add_filter(‘login_headerurl’, ‘connection_logo_link’);

    // Filtre qui permet de changer le titre
    function connection_login_title()
    {
    return get_option( ‘blogname’ );
    }
    add_filter(‘login_headertitle’, ‘connection_login_title’);

  18. coco777123

    Bonjour,
    Tout d’abord merci bcp de ces codes.
    Malheureusement je n’arrive pas faire les fonctionner.
    Je travaille sous 127.0.0.1 .J’ai un thème enfant dans lequel j’ai un fichier fonctions.php et c’est là que je crée le fichier login.css
    Mon logo se trouve dans le thème enfant (dans le dossier images).
    Dans mon fichier css j’ai fait le chemin suivant:

    #login h1 a {background-image:url(« http://127.0.0.1/Projet/blog2/wp-content/themes/Theme_fils_twentyten/images/logoP.png ») !important;}

    Le problème c’est que il se passe rien quand je vais sur la page de connexion.
    Je me demande si le chemin que je fait c’est le bon???
    Merci d’avance de votre aide

  19. aamara

    Moi j’ai modifier le lien d’image dans (wp-admin.min.css).
    Avant c’été .login form .input,.login input[type= »text »]{ ../images/wordpress-logo.png?ver=123xxx’ ( j’ai juste supprimer le bazard ?ver=??????)..
    biensur il faut modifier l’image avec un éditeur d’image)

  20. Constantin

    Bonjour, le poste date un peu et j’ai essayé de trouver dans les commentaires quelque chose qui pourrait m’aider un peu mais malheureusement pas.

    Tout d’abord merci pour votre site sur lequel on trouve énormément d’informations très très utiles à la bonne utilisation de wordpress. Trouvant la plupart du temps la réponse à mes questions, je n’ai pas encore eu l’occasion de commenter.

    Voilà, je sèche aujourd’hui sur la modification du logo de la page d’accueil Admin.
    Mon thème utilise une première page « fonction.php » visible via « éditeur/apparence » dans laquelle il n’y a que des liens qui redirigent vers une autre page « functions.php » dans un sous dossier du thème, dans laquelle on trouve toutes les fonctions.
    J’ai essayé d’ajouter la fonction permettant de changer le logo de plusieurs façons mais sans résultat. Directement dans le 2eme function.php – mu-plugin – thème enfant mais rien ne se passe

    comment dois-je m’y prendre dans ce cas ?

    Merci,

  21. aralar

    Bonjour

    Je me trouve face à un problème un peu bête. J’avais changé sur la page de connexion d’un de mes sites le logo, en suivant la fonction sugerie par Enmanuel (message 11 de ce fil). Cela à très bien marche, sauf qu’après une des dernières mises à jour de WordPress, le logo apparait ridiculement comprimé.

    http://www.berrocales.org/wp-login.php?redirect_to=http%3A%2F%2Fwww.berrocales.org%2F

    J’ai fait la preuve en changeant la taille de l’image png, rien n’y fait.

    Quelqu’un a trouvé le même petit problème ?

    Quelqu’un connait une solution ?

    D’avance merci à tous les amis de WordPress Channel.

    1. aralar

      Rebonjour

      Bon, j’ai compris que la fenêtre pour le logo a changé. WordPress a évolué vers un logo plus petit et circulaire. La fenêtre, donc, est plus petite et carrée. Certains fureteurs compriment le logo complet dans la fenêtre, autres montrent seulement une partie du logo avec sa véritable taille.

      Ma question, en conséquence, est plus simple encore. Comment modifier la taille de la fenêtre ? J’ai vu que WordPress Channel montre en sa page de connexion un logo bien plus grand que le logo WordPress d’origine. Il doit y avoir un procédé.

      D’avance merci.

  22. ital2013

    Voici le fichier qui fonctionne : login.css

    #login h1 a {background-image:url(« http://VOTRE_SITE/wp-content/themes/VOTRE_THEME/images/logo-perso.png ») !important;}
    #login h1 a { background-size:269px 62px;width:269px;height:62px;}

    Merci Aralar
    PS : les deux fichiers login.css+functions.php sont dans le répertoire de VOTRE_THEME
    Merci Aurélien aussi !!

  23. Erick

    Juste pour info je suis sur google chrome (derniere version) et l’encart « Partager » est vide juste en dessous de l’article, les boutons n’apparaissent pas cependant ils sont present juste en dessous du textarea ou j’ecris ce message.
    Cordialement

  24. Simon Wyckaert (@simwyck)

    Bonjour,

    Merci pour ce tuto qui permis de mieux appréhender ma modification du logo.

    Pour info, je n’ai pas réussi avec le code dans l’article mais j’ai trouvé dans le Codex (http://codex.wordpress.org/Customizing_the_Login_Form) ce code qui fonctionne :

    function my_login_logo() { ?>

    body.login div#login h1 a {
    background-image: url(/images/site-login-logo.png);
    padding-bottom: 30px;
    }

    <?php }
    add_action( 'login_enqueue_scripts', 'my_login_logo' );

  25. Bastien

    Bonjour,

    Pour ma part ça marche bien, mais ça me fait planter les feuilles de styles du site.

    Sur les navigateurs récents, mon graphisme est pousser de 30px vers le bas.
    Pour ie9, les feuilles de styles sont accessible via le html, mais elles ne s’applique pas, le site deviens 100% que html.

    Help, il y a quelqu’un pour m’aider ?

    1. Aurélien Denis auteur de l’article

      L’URL de connexion n’a aucun impact sur l’application de cette technique qui repose sur un hook. Exemple : une utilisation conjointe avec le plugin SF Move Login est parfaitement fonctionnelle.

  26. Pierre

    Bonjour et merci pour cet article….
    Une question qui n’est pas liée au logo mais à la barre d’administration de votre site (la fameuse toolbar) : je n’arrive pas à obtenir ce que vous avez fait : centrer les items de la barre d’administration (ils restent désespérément à gauche ou à droite, selon).
    Pourriez-vous nous donner quelques indications sur ça svp ? je crois que ça aiderait pas mal de lecteurs….
    Merci d’avance

    1. Aurélien Denis auteur de l’article

      Bonjour Pierre,

      je ne vois pas bien à tu fais référence… En CSS, tu peux centrer des éléments en appliquant un margin:0 auto si l’élément parent dispose d’une width définie.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX