Tout savoir sur WordPress
Tutoriel WordPress

Personnaliser la page de connexion de WordPress

Ce guide permet de connaître tous les trucs et astuces à savoir au sujet de la personnalisation de la page de connexion sur WordPress.

La page de connexion à l’administration WordPress est accessible à l’adresse nom-du-site/wp-login.php et contient un formulaire pour se connecter, le logo de WordPress et un lien permettant de retourner sur l’index du site Internet.

Pour de multiples raisons, vous avez certainement envie de personnaliser cette page à votre image ou à celle de votre client.

Par chance (ou plutôt que les développeurs de WordPress pensent à tout), il existe quelques hooks et filtres à connaître pour personnaliser la page de connexion à votre image.

Ci-dessous, un aperçu de la page proposée par défaut :

Page de connexion WordPress

Lors de la personnalisation de la page, nous allons pouvoir modifier 4 paramètres :

  • le css
  • le lien sur le logo
  • l’attribut “title” du logo
  • ajouter du contenu

Attention : Toutes les modifications et ajouts de code doivent se faire dans votre fichier “functions.php” présent à la racine de votre thème.

Modifier le CSS

Pour modifier le css de cette page, nous allons surcharger les id et class présents par défaut et insérer notre fichier css à l’intérieur de la balise.

Créez un dossier “design” à la racine de votre thème et créez ensuite un fichier “style-login.css”. C’est cette feuille de style qui contiendra notre CSS qui surchargera celui d’origine. Pour stocker votre logo et vos images supplémentaires, créez un dossier “images” dans “design”.

Le code ci-dessous permet d’insérer l’appel du fichier CSS dans la balise <head> de la page de connexion.
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

// Fonction qui insere le lien vers le css qui surchargera celui d'origine
function custom_login_css()  {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/design/style-login.css" />';
}
add_action('login_head', 'custom_login_css');

[/pastacode]
Vous trouverez ci-dessous un exemple de fichier CSS qui surcharge quelques unes des class et id :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

body {
    background-image: url(images/body.jpg) !important;
}

h1 a{
    background: url(images/logo.png) no-repeat !important;
    width: 325px !important;
    height: 93px !important;
}

#backtoblog {
    background-color: #666;
    box-shadow: 0 1px 3px #666;
    left: 0;
    margin: 0 !important;
    padding: 10px !important;
    position: fixed;
    text-align: left;
    text-shadow: 0 0 0 !important;
    top: 0;
    width: 100%;
}

.login #backtoblog a {
    color: #FFFFFF !important;
}

[/pastacode]

Modification de l’attribut href du logo

Par défaut, si vous cliquez sur le logo WordPress, celui-ci vous renvoie à l’adresse wordpress.org. Ce détail peut être fâcheux si le site est destiné à l’un de vos clients.

Il est possible de modifier la destination du lien en modifiant le contenu du filtre login_headerurl.
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

// Filtre qui permet de changer l'url du logo
function custom_url_login()  {
    return get_bloginfo( 'siteurl' ); // On retourne l'index du site
}
add_filter('login_headerurl', 'custom_url_login');

[/pastacode]

Modification de l’attribut title du logo

Un autre détail est assez gênant, il s’agit de l’attribut “title” de ce lien qui est par défaut “Propulsé par WordPress”. Cet attribut est visible lorsque vous laissez un petit instant votre souris sur l’image concernée.

Là aussi, un filtre va nous permettre de modifier le contenu de cet attribut.
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

// Filtre qui permet de changer l'attribut title du logo
function custom_title_login($message) {
    return get_bloginfo('description'); // On retourne la description du site
}
add_filter('login_headertitle', 'custom_title_login');

[/pastacode]

Ajouter du contenu

Pour ajouter du contenu après le formulaire de connexion, le hook login_footer va nous permettre d’injecter notre code juste en dessous de la balise fermante

Voici un exemple de code :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

// Fonction qui permet d'ajouter du contenu juste au dessus de la balise 
function add_footer_login()  {
    echo '<p id="contact">En cas de problème de connexion, veuillez contacter le webmaster au numéro suivant : 00.00.00.00.00 ou par adresse mail : contact@geekpress.fr</p>'; 
} 
add_action('login_footer','add_footer_login');

[/pastacode]
Ci-dessous, un aperçu du résultat final de notre personnalisation :

Personnaliser la page connexion de WordPress

2 plugins indispensables pour personnaliser votre page de connexion

Pour les personnes qui n’ont pas ou très peu de connaissances en PHP ou qui ont peur d’aller faire un tour dans le code, j’ai recueilli 2 plugins qui permettent de réaliser les astuces que nous venons d’apprendre.

Uber Login Logo

Uber Login Logo est THE plugin si vous souhaitez modifier le logo de votre page de connexion sans vous prendre la tête avec d’autres options inutiles. Il est tellement facile à utiliser qu’il possède uniquement un bouton pour télécharger votre logo.

Le plugin utilise le gestionnaire de média de WordPress et une fois que vous avez cliquer sur “Insérer dans l’article”, on vous propose de voir un aperçu du logo. Le résultat sur la page de connexion est instantané !

Uber Login Logo est le plugin pour installer son logo sur la page de connexion en 10 secondes top chrono !

Aperçu de l'administration d'Uber Login Logo
Aperçu de l’administration d’Uber Login Logo

Télécharger Uber Login Logo

Custom Login Screen

Custom Login Screen est THE plugin à avoir si on souhaite personnaliser sa page de connexion de WordPress à partir de l’interface d’administration. Ce plugin permet tout simplement de modifier l’intégralité des éléments qui compose la page de connexion. C’est-à-dire que vous avez la possibilité de modifier le fond, le lien de retour, le logo, le formulaire, les messages d’informations et d’erreurs. Que ce soir le fond ou encore le lien de retour vers votre site, vous allez pouvoir personnaliser votre page avec une facilité déconcertante.

Custom Login Screen est divisé en plusieurs onglets. Chacun d’entre eux est réservé à un élément précis de la page et vous disposez d’une multitude d’options pour par exemple le positionner ou colorer comme bon vous semble.

Administration de Custom Login Screen

Télécharger Custom Login Screen

Cet article a été mis à jour il y a 4718 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

63 Commentaires

  1. Salut,
    tuto sympa et accessible. Tout a fonctionné sauf le changement de logo, je ne parviens pas à remplacer le logo wordpress par le mien. J’ai pourtant enregistré le fichier sous le nom “logo.png” dans mon dossier image, ça ne change rien. Un peu d’aide ? Merci ! ;-)

  2. Avez-vous bien insérer ce code dans le fichier functions.php ?

    function custom_login_css()
    {
      	echo '
    <link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/design/style-login.css">';
    }
    add_action('login_head', 'custom_login_css');
  3. Ok ! ça marche ! le code était incomplet. Je ne comprenais pas pourquoi je n’avais pas de chemin d ‘accès vers le fichier css. Petite précision autour de laquelle j’ai tourné un bon moment. Il faut créer un dossier “images”dans le dossier “design” dans lequel on met le nouveau logo. N’est-ce pas ? Encore merci pour ce tuto !

  4. @ Micky : mettre les images dans un dossier “images” qui se trouve lui même dans un dossier “design” n’est pas obligatoire. C’est uniquement dans un but de séparer les images et les fichiers de code.

    Par contre, je me rend compte de vote confusion pour que je n’ai pas mentionné la création du dossier “images”. Je me modifie l’article en conséquence !

  5. Super, c’est clair, c’est sympa… Merci…

    Au fait, je voudrais rajouter un bouton radio avec trois choix possibles d’accès au site à l’inscription ?

    J’ai trois types d’abonnés et chacun doit voir les espaces qui lui sont réservés… Amicalement, Vincent

  6. Je découvre le blog Geekpress et je dois dire que c’est le coup coeur ! :)

    La présentation est claire et attrayante, c’est tout ce que j’aime. Bon courage pour la suite !

  7. Bonjour, bravo et merci pour cet article très clair. Savez comment il est possible que lorsqu’un membre se connecte il soit redirigé, non pas vers l’interface d’administration (le back office) du site mais directement vers la home, le front office ?

  8. Salut et merci pour ttes ces infos.
    Cependant je me demande pourquoi sortir du modèle WP anglophone, si c’est au prix de manip complexes (les balises, etc…)
    Je n’ai pas trop envie d’investir au delà de ce qui est nécessaire pour publier mon blog.Pouvez vous me conforter.
    Amicalement.

  9. Bonsoir,

    Ce tutoriel est vraiment bien fait. Avant j’utilisai un plugin pour faire cela. Je l’ai finalement abandonné au profit de la page standard de l’installation.

    @BLIN : Si c’est pour ton site personnel et que tu es l’unique admin, peu importe je te rejoins sur ce point. Mais s’il s’agit du site d’un client, celui-ci souhaitera surement avoir chacune des pages de son site dans la charte de sa société. C’est là que la personnalisation prend tout son intérêt.

  10. Je précise que le code d’appel de la page CSS ne fonctionne pas dans le cas de l’utilisation d’un thème enfant.

  11. Merci pour ce Tuto,
    Je souhaite néanmoins aller plus loin et configurer l’interface d’admin en fonction du type d’utilisateur qui ce connecte. Par exemple laisser un accès uniquement à un plug-in ? Auriez-vous une piste pour moi ? Merci

  12. Sympa ce petit “Trick” ! .. et très simple et si rapide à mettre en oeuvre :) il y à effectivement une petite mise à jour à effectuer dans le code et le mettre à jour par celui du commentaire ci-dessus.

  13. Super tutorial, pour moi ça a fonctionné sans soucis en adaptant. Après avoir modifié cette page d’admin et la page 404 par défaut ça donne un ensemble entièrement cohérent avec l’allure des thèmes sur mes différents WordPress. Merci pour l’astuce !

  14. Tip top, tout ce que je cherchais.

    Un point cependant, j’aurai besoin de placer un logotype assez gros, plus gros que celui dédié à l’espace du logo wordpress…

    Le soucis, il s’aligne sur le bord gauche du formulaire, comment puis-je forcer à centrer mon logo par rapport à la largeur de la page ?

    Merci !

  15. hello,
    c’est exactement ce que je cherchais, mais par contre est-ce que ces modification affectent que la page login?
    Par exemple, quand l’user est envoyé sur le password forgot(suite au mail) Est-ce qu’il y a les mêmes changements?
    Enfin, je vais aller tester tous cela. :D
    Thx
    anna

  16. Merci pour ce super tuto !

    Pour un noob comme moi, je mentionnerai pour chaque fonction qu’il faut l’insérer dans le fichier function.php. Aussi, il n’est pas stipulé si nous devons les mettre à la fin ou au début du fichier (de préférence) et surtout entre des balises ou non, saut de ligne ou non.

    J’ai une petite question : que dois-je rajouter pour obtenir le logo et le texte “en cas de problème …” centrés svp ? Car pour le moment, rien n’est centré malheureusement.

    Merci beaucoup,

    Cédric

  17. Bonjour,
    Comment utiliser votre astuce avec un thème enfant ?
    Le dossier “design” doit-il être placé dans le thème parent ?

  18. Bonjour,

    Quelqu’un peut me dire ou et comment modifier la page d’identification pour les membres? Comme dans l’image de l’exemple ci-dessus j’ai visuellement:

    Identifiant:
    “ici la cellule”
    Mot de passe:
    “ici la cellule”
    Se souvenir de moi [x] – Valider

    Et je recherche simplement à mettre tout sur la même ligne,
    exemple:

    Identifiant: “cellule” Mot de passe: “cellule” Se souvenir.. [x] Valider

    j’ai tester quelques modifications sans succès sur wp_login..
    j’ai la dernière version de WordPress et aucun plugin..

    Merci d’avance :)

  19. bonjour,
    il y a aussi le plugin A5 Custom Login Page.
    tiens une question bête et si on n’aimes pas avoir les champs les une en dessous des autres, on peut les aligner ?
    merci

  20. @Deamon et soulfree: Cela peut se faire via le CSS. Par contre, n’étant pas le cadre de WordPress, je ne pourrais pas vous en dire plus à ce sujet.

  21. Bonjour et merci pour toutes ces propositions et astuces.
    Je cherche à personnaliser ma page de connexion mais l’anglais n’est pas ma tasse de thé !! Est-ce que “Custom Login Screen” est en français. Est-il compatible avec la dernière version de wordpress : 3.6.1
    Merci

  22. @mafmaf: tout n’est pas forcément traduit sur ce plugin (voir la capture d’écran dans l’article ;))

  23. Merci Jonathan,
    C’est justement cette capture d’écran avec du français qui m’avait interressée mais je me demandais s’il n’y avait que cette partie en français ?
    J’ai essayé Custom Login et là c’est anglais pur donc trop compliqué !!!
    Je vais tenter celui-là !

  24. Jonathan, est-ce que si je n’arrive pas au bout de mes modifs je peux faire marche arrière et revenir à l’écran de base facilement ?
    Merci

  25. Merci pour ce tuto

    Comment faire pour faire apparaitre une zone d’inscription (avec validation de l’admin) sur cette page de connexion ?

  26. @Marie: Il faut autoriser les inscriptions à votre site. Pour cela, vous devez cocher la case ” Tout le monde peut s’enregistrer” dans “Réglages” => “Général”.

  27. Merci, j’ai réussi à faire ce que je voulais : avoir un site privê, avec possibilité de s’inscrire et validation des inscriptions. 2 plugins :private only et pie register
    Iln’y a plus qu’à customizer la page d’inscription

  28. Bonjour,

    pour que ça fonctionne avec un thème enfant, il suffit de modifier le chemin vers votre css, dans la fonction comme ceci : wp_enqueue_style( 'login_css', get_stylesheet_directory_uri() . '/css/login.css' );

    En revanche, je n’arrive pas à modifier le background du body de la page de connection (WP 3.8)

    A+

  29. Bonjour,

    Je suis ravi d’être tombé sur ce sujet qui répond à un de mes besoins.

    Cependant, je rencontre un souci pour le mettre en place. J’aimerais savoir si cette astuce fonctionne avec un thème enfant ?

    Et si oui, y’a-t-il quelque chose de précis à faire de différent ?
    J’ai remarqué que le fichier functions.php de mon thème enfant fonctionne bien mais c’est le chargement de la feuille .css qui ne s’effectue pas.

    Du coup, pas de logo et pas possible de modifier couleur, taille etc du texte en footer.

    Avez-vous une information pour rendre fonctionnelle cette astuce avec un thème enfant ?

    En vous remerciant d’avance, je vous souhaite une bonne année 2014 !

    Cordialement,

    Cyril

  30. @Cyril: “mais c’est le chargement de la feuille .css qui ne s’effectue pas” Vous avez vérifié que le fichier CSS est bien intégré dans le code ? ;)

  31. Bonjour Jonathan et Jean-Michel,

    Merci d’avoir pris le temps de répondre déjà :) !

    —————–

    @Johnatan : Il me semble que oui. Voici le début du code php avec le chemin vers la feuille css :

    <?php // Fonction qui insere le lien vers le css qui surchargera celui d'origine
    function custom_login_css() {
    echo '’;
    }

    —————–

    @Jean-Michel : J’avais bien vu cette syntaxe mais je ne l’ai pas tenté car je ne sais tout simplement pas où la placer dans le code php !

    Si vous pouvez me l’indiquer, c’est génial :) !

    —————–

    Merci à tout les deux en tous cas.
    Bonne journée !

  32. Bonjour Jonathan,

    Désolé pour le retour tardif.

    Voici mon post précédent avec le code PasteBin (mais je ne suis pas sûr de savoir l’utiliser car le rendu de mon code est identique).

    —————————————————
    Bonjour Jonathan et Jean-Michel,

    Merci d’avoir pris le temps de répondre déjà :) !

    —————–

    @Johnatan : Il me semble que oui. Voici le début du code php avec le chemin vers la feuille css. Et la feuille css se trouve bien au chemon indiqué :

    <?php // Fonction qui insere le lien vers le css qui surchargera celui d'origine
    function custom_login_css() {
    echo '’;
    }
    add_action(‘login_head’, ‘custom_login_css’);

    —————–

    @Jean-Michel : J’avais bien vu cette syntaxe mais je ne l’ai pas tenté car je ne sais tout simplement pas où la placer dans le code php !

    Si vous pouvez me l’indiquer, c’est génial :) !

    —————–

    Merci à tout les deux en tous cas.
    Bonne journée !

    ———-

  33. Bonjour Jonathan,

    Merci pour ces tutos.

    J’ai mis un lien vers tout ceci sur mon site et une mise à jour de la méthode pour changer le logo de la page de connexion à l’espace administrateur pour la version 3.9.+ de WordPress.

    //////////

    http://www.becaneweb.net/personnaliser-page-connexion-wordpress/

    //////////

    Il suffit maintenant d’intervenir sur le fichier /wp-admin/css/login.min.css
    Si tu as des critiques sur cette méthode, je suis preneur.

    Cédric

  34. Salut Jonathan, merci pour le tuto. Avez-vous une idée de comment avoir la connexion et l’inscription sur la même page (wp-login.php), comme la page de connexion de badoo ou twitter? Merci.

  35. Bonjour

    Je rencontre un problème pour afficher mon logo à la place de celui de WP. Il semble que le css n’est pas pris en compte. Voici comment j’ai fait :

    1) J’ai créer et placé le fichier “style-login.css ” à la racine du thème enfant.

    2) J’ai placé les codes php dans le fichier function.php créer à la racine du thème enfant. Les codes concernant “Modification de l’attribut href du logo” et “Modification de l’attribut title du logo” fonctionnent.

    3) Dans le code php qui appelle le fichier CSS dans la balise de la page de connexion, j’ai mis ceci comme chemin :

    ****************
    // Fonction qui insere le lien vers le css qui surchargera celui d’origine
    function custom_login_css() {
    echo ”;
    }
    add_action(‘login_head’, ‘custom_login_css’);
    ****************

    4) Dans le fichier css, pour l’image du logo j’ai mis :

    ************************
    h1 a{
    background: url(http://www.monste.com/wp-content/themes/twentytwelve-child/images/logo.jpg) no-repeat !important;
    width: 325px !important;
    height: 93px !important;
    border:5px solid red;
    }
    ************************

    Mais rien de ce que je modifie dans la feuille de style ne se répercute sur la page.

    Avez-vous une idée de où ça coince ?

    Merci ;-)
    F.

  36. Merci pour tes tutos, je suis en train de me faire un blog aux petits oignons.

    N’ayant pour le moment aucun logo, j’aurais aimé remplacer celui de wp-login par du texte. As-tu un morceau de code sous la main ?

    Une fois encore, merci :-).

  37. Bonjour Jonathan,

    J’ai bien l’impression que ce guide ne fonctionne plus complètement avec WP4. Si ?
    En ce qui me concerne, seul le filtre qui permet de changer l’url du logo fonctionne.

    Suis-je le seul ?

    Merci

    Romain

  38. bonsoir

    je souhaite savoir comment personnaliser la couleur du texte et rajouter un background blanc “mot de passe oublié” car avec une photo il n’est tjrs pas visible, merci

  39. Merci Jonathan pour ce tuto, toujours d’actualité en 2016.

    Comme je débute avec WordPress, je suis parti sur un Child Theme.
    J’ai juste modifié l’ appel de la CSS dans la fonction custom_login_css : j’ai remplacé ‘get_bloginfo(‘template_directory’)’ par ‘get_stylesheet_directory_uri()’.

    • Bonjour @cedric, en effet, get_stylesheet_directory_uri est plus approprié maintenant !

    • Bonjour,

      J’ai bien suivi le tuto, qui est super (merci J-M)

      par contre je ne parviens pas à insérer pour un thème enfant le code vers le css (qui ne fonctionne pas)
      voici ma configuration avec la modification que vous avez proposée :
      Je dois avoir fais une erreur , MERCI pour votre aide
      // Fonction qui insere le lien vers le css qui surchargera celui d’origine
      function custom_login_css() {
      echo ”;
      }
      add_action(‘login_head’, ‘custom_login_css’);

      bonne journé