Chapitre 6.3 — Le thème enfant

⏱️ TL;DR — Un thème enfant hérite d’un thème parent et permet de le personnaliser sans jamais le modifier — donc sans perdre ses mises à jour. Il suffit d’un dossier avec un style.css déclarant Template: theme-parent et un functions.php. WordPress cherche alors chaque template dans l’enfant d’abord, puis dans le parent : vous surchargez uniquement ce que vous voulez. C’est la seule façon correcte de modifier un thème tiers (ou de dériver un thème de base).

🎯 Objectifs

• Comprendre pourquoi on ne modifie jamais un thème parent directement.
• Créer un thème enfant (deux fichiers).
• Surcharger templates et fonctions du parent.
• Charger correctement les styles parent/enfant.

1. Le problème que ça résout

Vous achetez/installez un thème et voulez changer son single.php ou ajouter du CSS. Si vous éditez le thème directement, la prochaine mise à jour du thème écrase vos changements. Un thème enfant isole vos modifications dans un dossier séparé qui survit aux updates du parent.

⚠️ Piège — modifier le parent. Éditer directement un thème tiers est l’équivalent thème du « core hack » (ch. 4.4) : écrasé à chaque mise à jour, et vous perdez les correctifs de sécurité du parent si vous cessez de le mettre à jour. Toujours passer par un enfant.

2. Créer un thème enfant (2 fichiers)

Dans wp-content/themes/mon-enfant/ :

style.css — la ligne Template est ce qui fait l’héritage :

/*
Theme Name: Mon Thème Enfant
Template: twentytwentyfive
Version: 1.0.0
Text Domain: mon-enfant
*/
 
/* Vos styles additionnels ici */

• Template: doit valoir le nom du dossier du thème parent (ici twentytwentyfive). C’est obligatoire et sensible à la casse.

functions.php — pour charger les styles et ajouter du code :

<?php
add_action( 'wp_enqueue_scripts', 'monenfant_styles' );
function monenfant_styles() {
    // Charge la feuille du parent (si le parent l'expose sous ce handle)
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // Puis celle de l'enfant, dépendante de la précédente
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

⚠️ Piège — get_template_directory() vs get_stylesheet_directory(). Dans un enfant : get_template_directory() pointe vers le parent, get_stylesheet_directory() vers l’enfant. On charge le CSS du parent avec get_template_directory_uri() et celui de l’enfant avec get_stylesheet_directory_uri(). Les confondre casse le chargement des styles.

3. Surcharger un template

WordPress cherche chaque template dans l’enfant d’abord, puis dans le parent. Pour surcharger single.php :

1. Copiez single.php du parent vers l’enfant.
2. Modifiez la copie dans l’enfant.

→ WordPress utilisera votre single.php (enfant) au lieu de celui du parent, tout en gardant les autres templates du parent. Vous ne surchargez que ce que vous copiez.

Idem pour un partial : recréer le même chemin dans l’enfant (ex. partials/card.php) le surcharge — à condition que le parent utilise get_template_part() (qui respecte la hiérarchie enfant→parent).

⚠️ Piège — surcharger un fichier inclus « en dur ». Si le parent inclut un fichier avec include get_template_directory() . '/x.php' (chemin en dur vers le parent), votre copie dans l’enfant ne sera pas prise. Seuls get_template_part(), get_header/footer/sidebar et la template hierarchy respectent la surcharge enfant. C’est une limite quand le parent est mal écrit.

4. Ajouter/retirer du comportement

Le functions.php de l’enfant est chargé en plus de celui du parent (pas à la place). Vous pouvez donc :

• Ajouter des hooks (nouveaux supports, menus, enqueue) ;
• Retirer ceux du parent avec remove_action/remove_filter (attention à la priorité et au bon hook de timing) ;
• Surcharger une fonction du parent uniquement si elle est déclarée if ( ! function_exists() ) (fonction « pluggable ») — sinon vous ne pouvez pas la redéfinir (collision de noms fatale).

// Retirer une action du parent (souvent branché plus tard pour être sûr qu'elle existe)
add_action( 'after_setup_theme', function () {
    remove_action( 'wp_head', 'parent_fonction_inutile' );
}, 20 );

5. Thème enfant vs thème « de base » (starter)

Deux usages distincts :

• Personnaliser un thème tiers (Boost… pardon, un thème acheté) → enfant obligatoire.
• Développer votre propre thème → vous partez d’un starter (ex. _s/Underscores, ou un thème bloc vierge) que vous faites évoluer directement (pas besoin d’enfant, c’est votre code).

Pour un thème bloc (FSE, ch. 6.5), le principe d’enfant existe aussi, mais le theme.json et les templates/*.html se surchargent selon la même logique enfant→parent.

💡 Pour un dev React — Un thème enfant, c’est de la surcharge par composition/priorité de résolution : votre couche est consultée avant la base, et « retombe » sur elle pour ce que vous n’avez pas redéfini (comme un système de override de fichiers, ou l’ordre de résolution des modules). Vous n’éditez jamais la dépendance ; vous la superposez.

✏️ Exercices

1. Pourquoi créer un thème enfant plutôt que modifier le thème acheté directement ?
2. Quelle ligne du style.css établit le lien avec le parent, et que doit-elle contenir ?
3. Vous voulez surcharger uniquement le footer.php du parent. Quelle est la démarche ?

🧠 Quiz de révision

Chapitre suivant : Charger CSS & JS (enqueue).