« Ma règle CSS est bien écrite, mais elle ne s’applique pas » : ce constat revient régulièrement chez les développeurs qui débutent avec les thèmes enfants. Le code semble correct, la spécificité des sélecteurs paraît suffisante, et pourtant le style du parent continue à s’afficher. Le coupable, dans une large majorité des cas, n’est ni une erreur de syntaxe ni un problème de spécificité : c’est l’ordre de chargement des feuilles de style.
Symptôme
Un développeur crée un thème enfant, copie style.css, y ajoute une règle qui modifie la couleur d’un titre déjà stylée dans le thème parent. À l’affichage, rien ne change : la couleur reste celle définie par le parent, comme si la règle de l’enfant n’existait pas.
/* style.css du thème enfant */
.site-title {
color: #1a1a2e;
}
Le code semble irréprochable. Aucune erreur dans la console, aucun message dans les journaux PHP. Pourtant, dans l’inspecteur du navigateur, la règle du thème enfant apparaît bien barrée, remplacée par celle du parent chargée après.
Diagnostic
La cause se trouve dans functions.php du thème enfant, à l’endroit où les feuilles de style sont enregistrées. Un enregistrement incomplet, sans déclaration de dépendance, ne garantit aucun ordre précis entre le style parent et le style enfant : WordPress charge chaque feuille dans l’ordre où les extensions et le thème les ont enregistrées, sans lien logique entre elles.
// Version incomplète, source du problème
function monthème_enfant_styles() {
wp_enqueue_style( 'style-enfant', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'monthème_enfant_styles' );
Ici, rien n’indique à WordPress que style-enfant doit se charger après le style du thème parent. Selon l’ordre d’exécution interne, ou selon qu’une extension enregistre elle-même une feuille de style du parent séparément, le style de l’enfant peut se retrouver chargé avant celui du parent, et donc être écrasé par lui dans la cascade CSS.
Correctif
La solution consiste à déclarer explicitement le style du parent comme dépendance du style de l’enfant, via le deuxième argument de wp_enqueue_style(), qui accepte un tableau de handles dont le chargement doit précéder celui du style en cours de déclaration.
function monthème_enfant_styles() {
wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
wp_enqueue_style(
'style-enfant',
get_stylesheet_uri(),
array( 'style-parent' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'monthème_enfant_styles' );
Avec cette déclaration, WordPress garantit que style-parent est chargé avant style-enfant dans le document final, quel que soit l’ordre réel des appels à wp_enqueue_style() ailleurs dans le code. Le quatrième argument, la version, mérite aussi l’attention : utiliser wp_get_theme()->get('Version') évite de servir une version en cache du fichier après chaque mise à jour du thème enfant.
Prévention
Pour éviter de retomber dans ce piège sur un futur projet, quelques réflexes simples :
- Toujours déclarer explicitement la dépendance entre le style enfant et le style parent, même si l’ordre semble correct au moment du test.
- Vérifier l’ordre réel de chargement dans le code source de la page, pas seulement dans le résultat visuel qui peut masquer le problème selon le navigateur.
- Éviter de recopier
get_stylesheet_uri()pour le parent : cette fonction retourne toujours le style de l’enfant actif, il faut utiliserget_template_directory_uri()pour cibler le parent.
Un contrôle rapide qui évite bien des recherches inutiles : ouvrir l’onglet réseau du navigateur et vérifier, dans l’ordre d’apparition des requêtes CSS, lequel des deux styles arrive réellement en second.
En résumé
Une règle CSS qui semble ignorée dans un thème enfant n’est presque jamais un problème de spécificité mal calculée : c’est le plus souvent un ordre de chargement non maîtrisé. Déclarer la dépendance entre les deux feuilles de style avec wp_enqueue_style() règle ce genre de situation en quelques minutes, une fois le vrai diagnostic posé.
