# wp_enqueue_style et une dépendance oubliée : l’ordre qui casse un enfant

> Un style d'un thème enfant qui semble ignoré n'est souvent qu'une question d'ordre de chargement mal déclaré. Symptôme, diagnostic et correctif détaillés.

- Auteur : WordPress Développement
- Publié le : 2021-03-09
- Mis à jour le : 2021-03-09
- Catégorie : Thèmes
- URL : https://www.wpmoderne.fr/themes/wp-enqueue-style-dependance-oubliee-ordre-casse-enfant/

## L’essentiel

- Une règle CSS enfant peut être écrasée par le parent chargé après
- La dépendance déclarée dans wp_enqueue_style() règle l'ordre
- Vérifier l'ordre réel dans la source plutôt que de supposer

« 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.

> L'essentiel à retenir : Une règle CSS enfant peut être écrasée par le parent chargé après ; La dépendance déclarée dans wp_enqueue_style() règle l'ordre ; Vérifier l'ordre réel dans la source plutôt que de supposer

## 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 utiliser `get_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é.