Styliser la page de connexion WordPress en CSS et PHP

Si votre page /wp-login.php affiche encore le logo WordPress bleu et un bouton “Se connecter” sans personnalité, vous avez déjà le même point faible que je vois sur beaucoup de sites : l’écran de connexion trahit votre marque, et parfois même des détails inutiles (URL de retour, style du thème, etc.).

WordPress 6.9.4 (avril 2026) permet de personnaliser proprement l’écran de login sans toucher au cœur (core) et sans plugin “usine à gaz”, avec quelques hooks (crochets) et un fichier CSS bien chargé.

Le problème / Le besoin

La page de connexion WordPress (wp-login.php) est souvent la première chose que voient vos clients, vos auteurs, ou vous-même plusieurs fois par semaine. Par défaut, elle n’a pas vos couleurs, pas votre logo, et le lien du logo renvoie vers wordpress.org.

Le besoin est simple :

Changer le logo et son lien (vers votre site, pas vers WordPress).
Appliquer du CSS (couleurs, typographie, fond, boutons) sans casser la page.
Rester compatible avec WordPress 6.9.4+ et PHP 8.1+, et éviter les snippets fragiles.

À la fin, vous saurez :

charger un fichier CSS uniquement sur l’écran de login, via un hook dédié ;
modifier le lien et le titre du logo ;
ajouter une classe CSS sur la balise body du login pour cibler votre style ;
optionnel : rendre le CSS “administrable” (logo et couleurs via le Customizer), sans plugin.

Où coller le code (avant le premier bloc de code) :

Option recommandée : créez un mu-plugin (plugin “must-use”) : /wp-content/mu-plugins/bpcab-login-branding.php. Il sera chargé automatiquement, même si vous changez de thème.
Option acceptable : dans le functions.php d’un thème enfant (jamais le thème parent).
Évitez de coller ça dans un plugin de “snippets” si vous débutez : j’ai souvent vu des snippets désactivés après une mise à jour, et la personnalisation “disparaît” sans explication.

Fonctions et hooks WordPress utilisés (avec docs officielles) :

Action login_enqueue_scripts : exécute du code quand WordPress charge scripts/styles sur la page de login. Doc : login_enqueue_scripts
Filtre login_headerurl : modifie l’URL du lien du logo. Doc : login_headerurl
Filtre login_headertext : modifie le texte alternatif / title du logo. Doc : login_headertext
Filtre login_body_class : ajoute des classes à body sur la page de login. Doc : login_body_class
API d’enqueue wp_enqueue_style() : charge un fichier CSS correctement (cache-busting, dépendances). Doc : wp_enqueue_style

Résumé rapide

Vous créez un fichier CSS dédié au login (ex : /wp-content/mu-plugins/assets/login.css).
Vous chargez ce CSS uniquement sur wp-login.php via login_enqueue_scripts.
Vous remplacez l’URL et le texte du logo via login_headerurl et login_headertext.
Vous ajoutez une classe bpcab-login sur le body du login pour éviter les sélecteurs CSS trop fragiles.
Optionnel : vous rendez le logo/couleurs configurables via le Customizer (avancé mais encore “simple”).

Quand utiliser cette solution

Vous voulez un login aligné avec votre charte (logo, couleurs, bouton).
Vous gérez un site client et vous voulez éviter le “WordPress everywhere”.
Vous avez plusieurs auteurs et vous voulez un écran plus lisible (contraste, taille).
Vous souhaitez une solution durable, compatible mises à jour, sans modifier le core.
Vous utilisez un page builder (Divi 5, Elementor, Avada) mais vous comprenez que la page de login est hors builder : on la personnalise via hooks/CSS, pas via le constructeur.

Quand ne PAS utiliser cette solution

Vous cherchez à cacher votre page de login pour la sécurité. Le branding ne remplace pas une politique de sécurité (2FA, limitation tentatives, etc.).
Vous voulez une page de connexion complètement custom sur une URL différente (ex : /connexion/). Là, on parle plutôt d’une page front (shortcode + wp_login_form()) et de redirections contrôlées, ou d’un SSO.
Vous êtes sur un multisite où chaque site doit avoir un branding différent : il faudra adapter (variante plus bas).
Vous avez un plugin de sécurité qui remplace l’écran de login (certains plugins injectent leurs propres styles). Dans ce cas, commencez par vérifier la compatibilité.

Prérequis / avant de commencer

Versions et environnement

WordPress : 6.9.4 ou plus récent.
PHP : 8.1 minimum (recommandé). Référence : PHP Supported Versions
Accès FTP/SFTP ou gestionnaire de fichiers, ou un accès SSH si vous êtes à l’aise.

Sauvegarde et sécurité

Faites une sauvegarde (fichiers + base) avant de modifier du code.
Testez si possible sur une staging. J’ai souvent vu un simple point-virgule oublié bloquer l’accès admin, et c’est stressant quand c’est en production.
Ne modifiez jamais les fichiers du core WordPress (ex : wp-login.php). Vous perdrez vos changements à la prochaine mise à jour et vous augmentez les risques de sécurité.

Outils utiles

Un plugin de debug type “Query Monitor” peut aider, mais n’est pas obligatoire.
Activez WP_DEBUG sur staging si vous savez ce que vous faites. Doc : Debug WordPress

L’approche naïve (et pourquoi l’éviter)

Ce que je vois souvent chez les débutants : ils ouvrent wp-login.php, remplacent le HTML/CSS du logo, ajoutent un <style> en dur, et ça “marche”. Jusqu’à la mise à jour suivante.

Exemple typique (à ne pas faire)

<?php
// ❌ Exemple à ne pas reproduire : modification du core (wp-login.php).
// À la prochaine mise à jour WordPress, tout est écrasé.

echo '<style>
  body.login { background: #111; }
  .login h1 a { background-image:url(/mon-logo.png) !important; }
</style>';
?>

Problèmes concrets :

Mises à jour : WordPress écrase wp-login.php.
Sécurité : toucher au core complique les audits et peut introduire des failles.
Maintenance : impossible de versionner proprement, difficile à diagnostiquer.
Cache : vous ne contrôlez pas le versioning du CSS ; le navigateur peut garder un vieux style.

La bonne approche — tutoriel pas à pas

La logique : on laisse WordPress générer la page de login, et on se branche au bon moment via des hooks.

Définition rapide :

Un hook est un point d’extension. Une action exécute du code à un moment donné. Un filtre modifie une valeur et doit la retourner.

Étape 1 — Créer un mu-plugin (recommandé)

Créez le dossier s’il n’existe pas :

mkdir -p wp-content/mu-plugins
mkdir -p wp-content/mu-plugins/assets

Puis créez ce fichier :

Fichier : wp-content/mu-plugins/bpcab-login-branding.php

Étape 2 — Ajouter le code PHP de personnalisation

Ce code fait 4 choses : charger un CSS, changer le lien du logo, changer le texte du logo, ajouter une classe au body.

<?php
/**
 * Plugin Name: BPCAB - Branding Login
 * Description: Personnalisation simple de l'écran de connexion (CSS + logo) sans toucher au core.
 * Version: 1.0.0
 * Author: Votre Nom
 * Requires PHP: 8.1
 *
 * Emplacement: /wp-content/mu-plugins/bpcab-login-branding.php
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Sécurité : empêche l'accès direct au fichier.
}

/**
 * Charge le CSS uniquement sur wp-login.php.
 *
 * Hook (action) : login_enqueue_scripts
 * Doc : https://developer.wordpress.org/reference/hooks/login_enqueue_scripts/
 */
add_action( 'login_enqueue_scripts', function (): void {

	// URL vers le CSS dans mu-plugins/assets/login.css
	$css_url  = content_url( 'mu-plugins/assets/login.css' );

	// Chemin disque pour gérer le cache-busting via filemtime().
	$css_file = WP_CONTENT_DIR . '/mu-plugins/assets/login.css';

	$version = file_exists( $css_file ) ? (string) filemtime( $css_file ) : '1.0.0';

	wp_enqueue_style(
		'bpcab-login-branding',
		$css_url,
		array(),
		$version
	);
}, 20 );

/**
 * Remplace l'URL du logo (le clic sur le logo).
 *
 * Hook (filtre) : login_headerurl
 * Doc : https://developer.wordpress.org/reference/hooks/login_headerurl/
 */
add_filter( 'login_headerurl', function ( string $url ): string {
	return home_url( '/' );
} );

/**
 * Remplace le texte (attribut title/aria) du logo.
 *
 * Hook (filtre) : login_headertext
 * Doc : https://developer.wordpress.org/reference/hooks/login_headertext/
 */
add_filter( 'login_headertext', function ( string $text ): string {
	return get_bloginfo( 'name' );
} );

/**
 * Ajoute une classe sur le <body> de l'écran de login pour cibler le CSS sans fragilité.
 *
 * Hook (filtre) : login_body_class
 * Doc : https://developer.wordpress.org/reference/hooks/login_body_class/
 */
add_filter( 'login_body_class', function ( array $classes ): array {
	$classes[] = 'bpcab-login';
	return $classes;
} );

Étape 3 — Créer le fichier CSS du login

Créez :

Fichier : wp-content/mu-plugins/assets/login.css

Exemple CSS volontairement simple, lisible, et facile à adapter. Il ne dépend pas d’un thème (Astra, Avada, etc.) parce que l’écran de login n’utilise pas votre front.

/* Emplacement : /wp-content/mu-plugins/assets/login.css */

/* On cible notre classe ajoutée via login_body_class */
body.bpcab-login {
	background: radial-gradient(1200px 800px at 20% 10%, #1f2937 0%, #0b1220 55%, #050914 100%);
}

/* Conteneur principal */
body.bpcab-login #login {
	width: 360px;
	padding: 6% 0 0;
}

/* Carte du formulaire */
body.bpcab-login .login form {
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.35);
	background: rgba(17, 24, 39, 0.72);
	backdrop-filter: blur(6px);
}

/* Labels + liens */
body.bpcab-login .login label,
body.bpcab-login .login #backtoblog a,
body.bpcab-login .login #nav a {
	color: rgba(255,255,255,0.86);
}

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

/* Champs */
body.bpcab-login .login input[type="text"],
body.bpcab-login .login input[type="password"] {
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	color: #ffffff;
}

body.bpcab-login .login input[type="text"]:focus,
body.bpcab-login .login input[type="password"]:focus {
	border-color: rgba(99, 102, 241, 0.9);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

/* Bouton principal */
body.bpcab-login .wp-core-ui .button-primary {
	border-radius: 10px;
	border: 0;
	background: linear-gradient(90deg, #6366f1 0%, #22c55e 100%);
	box-shadow: 0 10px 24px rgba(34, 197, 94, 0.12);
	text-shadow: none;
}

body.bpcab-login .wp-core-ui .button-primary:hover {
	filter: brightness(1.05);
}

/* Logo : WordPress applique un background-image sur .login h1 a */
body.bpcab-login .login h1 a {
	background-image: url("../assets/logo-login.png");
	background-size: contain;
	width: 220px;
	height: 80px;
}

/* Message d'erreur / info */
body.bpcab-login .login .message,
body.bpcab-login .login #login_error {
	border-radius: 12px;
}

Étape 4 — Ajouter votre logo

Ajoutez un fichier image :

wp-content/mu-plugins/assets/logo-login.png

Conseil pratique : utilisez un PNG transparent ou un SVG si vous maîtrisez. Si vous utilisez un SVG, testez bien (certains environnements filtrent les SVG pour des raisons de sécurité). Pour débuter, un PNG est le plus simple.

Étape 5 — Tester

Ouvrez :

https://votre-site.tld/wp-login.php

Si le CSS ne s’applique pas, le premier réflexe est de faire un “hard refresh” (Ctrl+F5) ou de vider le cache navigateur. Sur des sites avec cache agressif/CDN, j’ai vu le navigateur garder l’ancien CSS même après modification.

Code complet

Vous pouvez copier-coller tel quel. Il suppose :

un mu-plugin bpcab-login-branding.php
un CSS mu-plugins/assets/login.css
un logo mu-plugins/assets/logo-login.png

Fichier 1 — mu-plugin

<?php
/**
 * Plugin Name: BPCAB - Branding Login
 * Description: Personnalisation simple de l'écran de connexion (CSS + logo) sans toucher au core.
 * Version: 1.0.0
 * Author: Votre Nom
 * Requires PHP: 8.1
 *
 * Emplacement: /wp-content/mu-plugins/bpcab-login-branding.php
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Retourne l'URL du fichier CSS de login.
 */
function bpcab_login_css_url(): string {
	return content_url( 'mu-plugins/assets/login.css' );
}

/**
 * Retourne la version du CSS (cache-busting).
 */
function bpcab_login_css_version(): string {
	$file = WP_CONTENT_DIR . '/mu-plugins/assets/login.css';
	return file_exists( $file ) ? (string) filemtime( $file ) : '1.0.0';
}

/**
 * Enqueue du CSS sur l'écran de connexion uniquement.
 */
function bpcab_login_enqueue_branding_assets(): void {
	wp_enqueue_style(
		'bpcab-login-branding',
		bpcab_login_css_url(),
		array(),
		bpcab_login_css_version()
	);
}
add_action( 'login_enqueue_scripts', 'bpcab_login_enqueue_branding_assets', 20 );

/**
 * URL du logo sur l'écran de login.
 */
function bpcab_login_logo_url( string $url ): string {
	return home_url( '/' );
}
add_filter( 'login_headerurl', 'bpcab_login_logo_url' );

/**
 * Texte du logo (accessibilité).
 */
function bpcab_login_logo_text( string $text ): string {
	return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'bpcab_login_logo_text' );

/**
 * Ajoute une classe body dédiée pour un CSS plus robuste.
 */
function bpcab_login_body_class( array $classes ): array {
	$classes[] = 'bpcab-login';
	return $classes;
}
add_filter( 'login_body_class', 'bpcab_login_body_class' );

Fichier 2 — CSS

/* Emplacement : /wp-content/mu-plugins/assets/login.css */

body.bpcab-login {
	background: radial-gradient(1200px 800px at 20% 10%, #1f2937 0%, #0b1220 55%, #050914 100%);
}

body.bpcab-login #login {
	width: 360px;
	padding: 6% 0 0;
}

body.bpcab-login .login form {
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.35);
	background: rgba(17, 24, 39, 0.72);
	backdrop-filter: blur(6px);
}

body.bpcab-login .login label,
body.bpcab-login .login #backtoblog a,
body.bpcab-login .login #nav a {
	color: rgba(255,255,255,0.86);
}

body.bpcab-login .login input[type="text"],
body.bpcab-login .login input[type="password"] {
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	color: #ffffff;
}

body.bpcab-login .login input[type="text"]:focus,
body.bpcab-login .login input[type="password"]:focus {
	border-color: rgba(99, 102, 241, 0.9);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

body.bpcab-login .wp-core-ui .button-primary {
	border-radius: 10px;
	border: 0;
	background: linear-gradient(90deg, #6366f1 0%, #22c55e 100%);
	text-shadow: none;
}

body.bpcab-login .login h1 a {
	background-image: url("logo-login.png");
	background-size: contain;
	width: 220px;
	height: 80px;
}

body.bpcab-login .login .message,
body.bpcab-login .login #login_error {
	border-radius: 12px;
}

Note importante : dans ce deuxième CSS “complet”, j’ai volontairement simplifié l’URL du logo en url("logo-login.png"). Ça suppose que logo-login.png est dans le même dossier que login.css (donc mu-plugins/assets/). C’est souvent le plus simple et le moins fragile.

Explication du code

Ce qui se passe en coulisses (version simple)

WordPress a un écran de login séparé du thème. Il charge ses propres styles. Pour ajouter les vôtres, vous devez utiliser un hook prévu pour ça.

Le hook login_enqueue_scripts est déclenché au bon moment : juste avant l’affichage, quand WordPress est prêt à “enquêter” (enqueue) des CSS/JS sur la page de login.

Ce qui est technique (mais utile)

wp_enqueue_style() : enregistre et charge votre CSS proprement. WordPress gère la balise <link> et la version.
filemtime() : récupère la date de modification du fichier. On s’en sert comme version pour forcer le navigateur à recharger quand vous modifiez le CSS. C’est un petit détail, mais c’est exactement ce qui évite le “j’ai modifié le CSS et rien ne change”.
Filtres login_headerurl et login_headertext : ils reçoivent une valeur (URL/texte), vous la modifiez et vous la retournez. Si vous oubliez le return, le logo peut se retrouver sans URL ou avec une valeur vide.
login_body_class : ajoute une classe. Ça permet un CSS robuste, car les sélecteurs natifs du login peuvent évoluer.

Pourquoi un mu-plugin plutôt que functions.php ?

Un thème peut être changé (ou mis à jour). Un mu-plugin reste en place. Sur des sites clients, c’est souvent la différence entre “ça marche encore dans 18 mois” et “personne ne sait où était le code”.

Doc officielle mu-plugins : Must-Use Plugins

Variantes et cas d’usage

Variante 1 — Changer le message du pied de page (privacy policy) proprement

WordPress peut afficher des liens (ex : politique de confidentialité). Si vous voulez guider vos utilisateurs vers une page “Support”, vous pouvez ajouter un lien via login_message (filtre) ou injecter du HTML via CSS/JS. Je préfère rester simple : un message au-dessus du formulaire.

Doc : login_message

<?php
// À ajouter dans le même mu-plugin.

add_filter( 'login_message', function ( string $message ): string {
	// On ajoute un message HTML simple. Pas de donnée utilisateur ici, donc risque faible.
	// Si vous injectez des données dynamiques, échappez-les avec esc_html() / esc_url().
	$support_url = home_url( '/contact/' );

	$custom = '<div class="message">'
		. '<p><strong>Besoin d’aide ?</strong> '
		. 'Contactez-nous : <a href="' . esc_url( $support_url ) . '">page de support</a>.</p>'
		. '</div>';

	return $custom . $message;
} );

Variante 2 — Forcer une couleur différente selon le site (multisite)

En multisite, j’ai souvent besoin d’un branding par site. Le plus simple : ajouter une classe basée sur l’ID du blog, puis faire du CSS conditionnel.

<?php
add_filter( 'login_body_class', function ( array $classes ): array {
	if ( function_exists( 'get_current_blog_id' ) ) {
		$classes[] = 'bpcab-blog-' . (int) get_current_blog_id();
	}
	return $classes;
}, 20 );

Dans votre CSS :

body.bpcab-blog-2 { background: #0b1020; }
body.bpcab-blog-3 { background: #20100b; }

Variante 3 — Charger un CSS depuis votre thème enfant (si vous préférez)

Si vous ne voulez pas de mu-plugin, vous pouvez mettre le CSS dans votre thème enfant. Ça reste correct, mais gardez en tête que changer de thème fera disparaître le branding.

Emplacement : /wp-content/themes/mon-theme-enfant/assets/login.css

<?php
// Dans functions.php du thème enfant.

add_action( 'login_enqueue_scripts', function (): void {
	wp_enqueue_style(
		'mon-login-css',
		get_stylesheet_directory_uri() . '/assets/login.css',
		array(),
		'1.0.0'
	);
} );

Doc get_stylesheet_directory_uri() : get_stylesheet_directory_uri

Compatibilité Divi 5 / Elementor / Avada

Divi 5, Elementor et Avada gèrent surtout le front (vos pages publiques). L’écran de login WordPress est une page système, indépendante du builder.

Divi 5

Vous ne personnalisez pas wp-login.php via le Visual Builder.
La solution mu-plugin est la plus stable, surtout si le site change de thème (Divi vers autre chose).
Si vous avez déjà un thème enfant Divi, l’option functions.php fonctionne aussi.

Elementor

Elementor Pro propose des modèles de “Login” pour une page front, mais ce n’est pas la même chose que wp-login.php.
Pour garder le comportement natif (reset password, cookies, redirections), je recommande de personnaliser l’écran natif avec les hooks ci-dessus.

Avada (Fusion Builder)

Avada a ses options de design, mais elles ne s’appliquent pas à wp-login.php.
Le mu-plugin évite les conflits si vous migrez un jour vers un autre thème.

Si votre objectif est une page “Connexion” designée au pixel près (builder), faites-le, mais gardez wp-login.php comme fallback. C’est souvent ce qui évite de bloquer des utilisateurs quand un cache/minify casse un script front.

Vérifications après mise en place

Allez sur /wp-login.php et vérifiez :
- logo affiché et correctement dimensionné ;
- clic sur le logo : redirection vers la home ;
- styles appliqués (fond, bouton, champs) ;
- affichage correct sur mobile (largeur du bloc login).
Ouvrez l’inspecteur du navigateur :
- onglet Réseau (Network) : votre login.css est-il chargé ? statut 200 ?
- si statut 404 : chemin incorrect (souvent un dossier mu-plugins mal nommé).
Testez le reset mot de passe et l’écran “mot de passe oublié” : votre CSS ne doit pas masquer les messages.

Tableau de diagnostic rapide

Symptôme	Cause probable	Vérification	Solution
Le CSS ne s’applique pas	Mauvais hook ou fichier non chargé	Inspecteur > Network > login.css (200 ?)	Utiliser `login_enqueue_scripts` et vérifier l’URL/chemin
Logo invisible	Chemin image incorrect	Inspecteur > Styles : URL du background-image	Mettre `logo-login.png` au même endroit que `login.css` ou corriger l’URL
Changements CSS non visibles	Cache navigateur/CDN	Le fichier CSS a-t-il une version qui change ?	Utiliser `filemtime()` (déjà inclus) + hard refresh
Erreur 500 après ajout du code	Erreur PHP (point-virgule, parenthèse)	Logs serveur / mode debug sur staging	Corriger la syntaxe, revenir à une sauvegarde
Le lien du logo ne change pas	Conflit plugin / hook non exécuté	Désactiver temporairement plugins de login	Changer la priorité du filtre, ou supprimer le plugin en conflit

Si ça ne marche pas

Procédure que j’utilise quand un branding login “ne prend pas”, étape par étape.

1) Vérifier l’emplacement des fichiers

Le fichier PHP est bien dans /wp-content/mu-plugins/ (pas /wp-content/plugins/).
Le dossier s’appelle exactement mu-plugins (sans faute, sans majuscule).
Le CSS est bien dans /wp-content/mu-plugins/assets/login.css.

2) Vérifier que le mu-plugin est chargé

Les mu-plugins ne s’affichent pas comme des plugins classiques avec bouton activer/désactiver. Pour vérifier :

Allez dans Extensions : vous devriez voir une section “Extensions indispensables” (Must-Use) selon l’interface admin.
Sinon, faites un test simple : dans le mu-plugin, ajoutez temporairement un error_log() (sur staging) et regardez les logs.

3) Vérifier le hook

Si vous avez utilisé wp_enqueue_scripts (hook front), ça ne marchera pas sur wp-login.php. Il faut login_enqueue_scripts.

4) Vérifier la console et le réseau

Un 404 sur login.css = URL incorrecte.
Un 200 mais pas d’effet = CSS trop faible (spécificité), ou un autre style écrase le vôtre.

5) Conflits fréquents

Plugins de sécurité/branding qui chargent leur propre CSS sur le login.
Plugins de cache qui minifient et re-combinent, parfois en excluant wp-login.php.

Pièges et erreurs courantes

Erreur	Cause	Solution
Copier le code dans le mauvais fichier	Mis dans un article, dans “CSS additionnel”, ou dans le thème parent	Utiliser un mu-plugin ou le `functions.php` du thème enfant
Écran blanc / erreur 500	Point-virgule manquant, accolade en trop	Revenir via FTP, corriger, activer debug sur staging
Utiliser `wp_enqueue_scripts` au lieu de `login_enqueue_scripts`	Copie d’un ancien tuto front	Remplacer par le hook login dédié
CSS non chargé (404)	`content_url()` pointe vers un fichier inexistant	Vérifier le chemin exact et les permissions fichiers
CSS chargé mais “ne change rien”	Cache navigateur/CDN ou CSS écrasé	Hard refresh + vérifier la spécificité (ex : `body.bpcab-login ...`)
Logo flou	Image trop petite, mauvaise résolution	Utiliser une image plus grande (2x) et ajuster `background-size`
Snippet cassé après mise à jour	Plugin de snippets désactivé ou conflit	Préférer mu-plugin pour le branding login
Erreur “Parse error: syntax error”	Copie d’un code PHP incomplet	Vérifier `<?php`, parenthèses, virgules, et coller le code complet
Version PHP trop ancienne	Hébergement en PHP 7.x	Passer en PHP 8.1+ (sinon, adapter le code en retirant les types)
Code d’un ancien tutoriel incompatible	Anciennes fonctions/approches, ou chargement direct de fichiers	Utiliser l’API d’enqueue et les hooks documentés

Conseils sécurité, performance et maintenance

Sécurité

Le branding ne sécurise pas le login. Pour la sécurité, pensez : mots de passe forts, 2FA, limitation tentatives, et mises à jour.
Ne mettez pas de données utilisateur non échappées dans login_message. Si vous affichez une URL, utilisez esc_url(). Si vous affichez du texte, utilisez esc_html(). Doc : Escaping (WordPress)
Évitez d’ajouter du JS sur le login sans raison. C’est une surface d’attaque inutile.

Performance

Vous chargez un seul petit CSS sur une seule page : impact négligeable.
Le filemtime() fait une lecture filesystem. Sur la page login, c’est acceptable. Si vous êtes très strict, vous pouvez remplacer par une version fixe en production, mais vous perdrez le cache-busting automatique.

Maintenance

Gardez vos assets dans un dossier clair (mu-plugins/assets/).
Si vous utilisez un CDN agressif, vérifiez que /wp-login.php n’est pas mis en cache côté HTML.
Après une grosse mise à jour WordPress, testez vite l’écran de login : c’est rare, mais certains sélecteurs CSS peuvent évoluer.

Ressources

Hook login_enqueue_scripts : developer.wordpress.org
Filtre login_headerurl : developer.wordpress.org
Filtre login_headertext : developer.wordpress.org
Filtre login_body_class : developer.wordpress.org
Fonction wp_enqueue_style() : developer.wordpress.org
Must-Use Plugins : developer.wordpress.org
Escaping (sécurité) : developer.wordpress.org
Debug WordPress : developer.wordpress.org
Dépôt WordPress (pour référence et recherche de hooks) : github.com/WordPress/wordpress-develop
Versions supportées PHP : php.net

FAQ

Est-ce que cette personnalisation peut empêcher la connexion ?

Le CSS non. Le PHP peut, si vous faites une erreur de syntaxe (parenthèse, point-virgule). D’où l’intérêt de tester sur staging et d’avoir un accès FTP pour corriger.

Pourquoi mon logo n’apparaît pas alors que le CSS est chargé ?

Dans 90% des cas : URL d’image incorrecte. Ouvrez l’inspecteur, cliquez sur l’URL du background-image et vérifiez qu’elle répond en 200. Le plus simple : mettre logo-login.png dans le même dossier que login.css et utiliser url("logo-login.png").

Je peux faire ça depuis “Apparence > Personnaliser > CSS additionnel” ?

Non, ce CSS cible généralement le front (thème). L’écran de login est en dehors. Il faut un enqueue via login_enqueue_scripts.

Est-ce compatible avec un plugin de sécurité (2FA, reCAPTCHA) ?

Oui en général. Mais certains plugins injectent du HTML supplémentaire ou des styles. Si votre mise en page casse, réduisez votre CSS (moins de règles sur form) et testez.

Peut-on changer aussi le logo sur l’admin (wp-admin) ?

Ce n’est pas le même hook. Pour l’admin, on utilise plutôt admin_enqueue_scripts et parfois des filtres sur l’admin bar. Ne mélangez pas : login et admin sont deux contextes différents.

Pourquoi utiliser `content_url()` dans le mu-plugin ?

Parce que content_url() produit l’URL correcte vers /wp-content, même si votre installation a un dossier content personnalisé. Doc : content_url()

Est-ce que je peux charger aussi une police Google Fonts sur le login ?

Oui, via wp_enqueue_style() sur login_enqueue_scripts. Attention : c’est une requête externe sur une page sensible. Sur des sites soumis à des contraintes RGPD strictes, hébergez la police localement.

Le CSS se charge, mais mes règles ne s’appliquent pas (bouton inchangé)

C’est un problème de spécificité CSS. Préfixez vos règles avec body.bpcab-login (comme dans l’exemple). Ça évite aussi de “trop” impacter des éléments inattendus.

J’ai mis le code dans functions.php et après une mise à jour tout a disparu

Vous avez probablement modifié le thème parent, ou un thème qui a été remplacé. Utilisez un thème enfant ou, mieux, un mu-plugin.

Comment tester ce code proprement sans risquer de me bloquer ?

Faites-le sur staging, puis :

ouvrez une session admin dans un onglet ;
ouvrez /wp-login.php dans un autre ;
si vous cassez tout, retirez le fichier mu-plugin via FTP ;
retestez, puis remettez le fichier corrigé.

Peut-on changer le texte “Connexion” / “Se connecter” ?

Pas via CSS/PHP “simple” sans toucher à la traduction. Pour changer les libellés, on passe par les traductions (fichiers .po/.mo) ou un filtre sur les chaînes (souvent via un plugin de traduction). Pour un débutant, je conseille de ne pas le faire : ça devient vite fragile.