Comment créer et installer un thème enfant dans WordPress (sans prise de tête)

Vous avez choi­si un thème Word­Press qui vous plaît, mais vous sou­hai­tez le per­son­na­li­ser sans ris­quer de perdre vos modi­fi­ca­tions à la pro­chaine mise à jour ? C’est pré­ci­sé­ment la fonc­tion du thème enfant.

⚠️ Cet article concerne uni­que­ment les thèmes Word­Press clas­siques, et non les thèmes FSE (Full Site Edi­ting) comme Twen­ty Twen­ty-Four. Si vous uti­li­sez un thème FSE, ren­dez-vous direc­te­ment à la sec­tion Et si vous uti­li­sez un thème FSE.

Dans cet article, on vous explique à quoi il sert, com­ment le créer, et com­ment l’installer pas à pas, même si vous débu­tez sur WordPress.

Un thème enfant, à quoi ça sert ?

Un thème enfant est un thème Word­Press qui hérite de tous les styles et fonc­tion­na­li­tés d’un autre thème : le thème parent.

Son uti­li­té est à la fois simple et essen­tielle : il vous offre la pos­si­bi­li­té de per­son­na­li­ser votre site sans modi­fier direc­te­ment les fichiers du thème prin­ci­pal. De cette manière, vos modi­fi­ca­tions ne seront pas per­dues lors de la mise à jour du thème parent.

📌 À savoir avant de com­men­cer
Il est cru­cial de créer et acti­ver votre thème enfant au début de la créa­tion du site, avant d’avoir com­men­cé à confi­gu­rer vos menus, vos wid­gets ou votre per­son­na­li­sa­tion via le menu Per­son­na­li­ser.
Si vous bas­cu­lez vers un thème enfant après avoir déjà per­son­na­li­sé le thème parent, cer­tains réglages visuels peuvent être per­dus.

Les différentes étapes à suivre pour la création de votre thème enfant

Étape 1 – Créez un dossier pour votre thème enfant

1. Connec­tez-vous à votre héber­ge­ment via FTP ou via le Ges­tion­naire de fichiers cPa­nel si vous êtes chez o2switch.
2. Accé­dez au dos­sier : /wp-content/themes/
3. Créez un dos­sier que vous nom­me­rez avec le nom du thème parent sui­vi de -child.
4. Par exemple, si vous uti­li­sez le thème Twen­ty Twen­ty-One, créez un dos­sier : twentytwentyone-child

Étape 2 – Créez le fichier style.css

Dans ce dos­sier, créez un fichier appe­lé style.css et collez‑y ce code de base :

/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
*/

/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
*/

Vous pou­vez aus­si uti­li­ser une ver­sion plus com­plète de style.css

/*
Theme Name: Blog o2switch
Theme URI: https://blog.o2switch.fr/
Description: Blog o2switch : conseils d'experts en hébergement web, WordPress, sécurité et optimisation. Tutoriels pratiques, actualités tech et bonnes pratiques pour développeurs et webmasters.
Author: Éric Martin
Author URI: https://eric-martin.fr
Template: twentytwentyone
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
Theme Name: Blog o2switch
Theme URI: https://blog.o2switch.fr/
Description: Blog o2switch : conseils d'experts en hébergement web, WordPress, sécurité et optimisation. Tutoriels pratiques, actualités tech et bonnes pratiques pour développeurs et webmasters.
Author: Éric Martin
Author URI: https://eric-martin.fr
Template: twentytwentyone
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Ce que vous devez obli­ga­toi­re­ment adap­ter dans votre fichier style.css :

• Theme Name : nom de votre thème enfant (qui sera affi­ché à plu­sieurs endroits dans l’in­ter­face d’ad­mi­nis­tra­tion de WordPress)
• Template : nom exact du dos­sier du thème parent (atten­tion aux majus­cules et tirets)

Ce qui s’af­fiche lorsque l’on regarde dans Appa­rence > votre_theme > Détails du thème (en pas­sant la sou­ris au-des­sus de votre thème) sui­vant ce que vous avez ren­sei­gné dans style.css

Étape 3 – Créez le fichier functions.php

Créez un fichier functions.php dans le même dos­sier, avec ce code :

<?php
add_action( 'wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles' );
function twentytwentyone_child_enqueue_styles() {
    // Charge la feuille de style du thème parent
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Charge ensuite celle du thème enfant (pour écraser certains styles si besoin)
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
}

<?php
add_action( 'wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles' );
function twentytwentyone_child_enqueue_styles() {
    // Charge la feuille de style du thème parent
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Charge ensuite celle du thème enfant (pour écraser certains styles si besoin)
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
}

Cette méthode per­met de char­ger les feuilles de style pro­pre­ment, sans uti­li­ser @import, qui est décon­seillé pour des rai­sons de performance.

Bon à savoir :
Le fichier functions.php du thème enfant ne sert pas seule­ment à char­ger les styles. C’est aus­si l’endroit idéal pour :

• Ajou­ter des fonc­tions per­son­na­li­sées en PHP,
• Décla­rer des short­codes,
• Ajou­ter des hooks et filtres WordPress.

Les fonc­tions du thème parent res­tent actives, et celles du thème enfant s’ajoutent ou les complètent.

N’oubliez pas le fichier screenshot.png !

Pour que votre thème enfant ait une vignette visible dans l’administration, vous pou­vez ajou­ter une image appe­lée screenshot.png dans le dos­sier du thème enfant. For­mat PNG ou JPG, cela fonc­tion­ne­ra tout aus­si bien.
Taille recom­man­dée : 1200 × 900 px.
Ce n’est pas obli­ga­toire, mais c’est tel­le­ment plus agréable pour visua­li­ser vos thèmes dans l’interface.

Ce que vous devriez avoir dans le dossier de votre thème enfant

Étape 4 – Activez votre thème enfant

1. Dans Word­Press, allez dans Appa­rence > Thèmes
2. Cli­quez sur Acti­ver en des­sous de votre thème enfant

C’est tout ! Féli­ci­ta­tions 🎉
Votre thème enfant est acti­vé : vous pou­vez main­te­nant per­son­na­li­ser votre site en toute tranquilité.

Alternative : créer un thème enfant avec une extension

Pas à l’aise avec les fichiers ? Il existe des exten­sions gra­tuites qui vous per­mettent de créer un thème enfant en un clic. Ces outils génèrent auto­ma­ti­que­ment les fichiers.

Child Theme Configurator (lien)

Le géné­ra­teur de thème enfant le plus com­plet. Inter­face en fran­çais. Vous avez même la pos­si­bi­li­té d’importer les réglages du thème parent pour évi­ter les pertes. Ce qui veut dire que vous pou­vez géné­rer un thème enfant même si vous avez déjà tra­vaillé sur votre site ou qu’il est terminé.

WP Child Theme Generator (lien)

Géné­ra­teur de thème enfant un peu plus basique. Atten­tion, c’est en anglais, mais si vous avez lu le cha­pitre sur le style.css, cela ne devrait pas vous poser de problème.

À savoir : il existe aus­si des géné­ra­teurs de thème enfant en ligne, pas besoin d’ex­ten­sion, par exemple, celui de WPMarmite

Astuce : utiliser un thème enfant prêt à l’emploi (si disponible)

Si vous uti­li­sez un thème popu­laire comme Astra, OceanWP, Gene­ra­te­Press, ou encore Hel­lo Ele­men­tor, sachez qu’il existe sou­vent des thèmes enfants pré­con­fi­gu­rés par le déve­lop­peur du thème, quoi de plus sûr ? 🙂

Par exemple, vous pou­vez faire une recherche sur Google avec sim­ple­ment : OceanWP child theme

Vous trou­ve­rez sou­vent un fichier .zip à télé­char­ger et ins­tal­ler via Appa­rence > Thèmes > Ajou­ter > Télé­ver­ser un thème.

C’est encore plus rapide, sur­tout si vous ne vou­lez pas mani­pu­ler les fichiers à la main.

Et si on n’utilisait pas de thème enfant ?

Aujourd’hui, cer­taines approches per­mettent d’éviter com­plè­te­ment les thèmes enfants, notam­ment si vous ne sou­hai­tez que modi­fier un peu de CSS ou ajou­ter des fonc­tions PHP.

Des exten­sions comme, par exemple, WPCode ou Code Snip­pets vous per­mettent d’ajouter du code :

• Direc­te­ment depuis l’admin WordPress,
• Avec des sau­ve­gardes et un contrôle d’activation (on active ou pas le code ajouté),
• Sans tou­cher aux fichiers du thème.

Avan­tages :

• Pas besoin de FTP,
• Pas de risque de faire « plan­ter » le site en cas d’erreur,
• Le code reste actif même si vous chan­gez de thème.

Et si vous utilisez un thème FSE (Full Site Editing) ?

Depuis Word­Press 5.9, de nou­veaux thèmes appe­lés FSE (Full Site Edi­ting) vous per­mettent de per­son­na­li­ser entiè­re­ment l’ap­pa­rence du site (en-tête, pied de page, pages, articles) direc­te­ment depuis l’éditeur de site, sans tou­cher au code.

Ces thèmes modernes (comme Twen­ty Twen­ty-Four, Tove, Spec­tra One, Frost…) fonc­tionnent dif­fé­rem­ment des thèmes classiques.

→ Avez-vous besoin d’un thème enfant avec un thème FSE ?

Non, pas dans la plu­part des cas. Vous pouvez :

• Modi­fier l’apparence de votre site dans l’éditeur (bloc par bloc),
• Créer des modèles de page ou d’article personnalisés,
• Et ajou­ter du CSS ou du code PHP via des exten­sions comme WPCode ou Code Snip­pets.

Un thème enfant n’est utile que si vous sou­hai­tez modi­fier en pro­fon­deur le fonc­tion­ne­ment du thème, comme ses modèles HTML (templates) ou son fichier theme.json.

Thème enfant ou pas ? Petite synthèse 🙂

• Si vous uti­li­sez un thème Word­Press clas­sique et sou­hai­tez modi­fier du code, ajou­ter du CSS per­son­na­li­sé ou sur­char­ger un fichier (footer.php, single.php, etc.), le thème enfant est la bonne solu­tion.
• Si vous uti­li­sez un thème Full Site Edi­ting (FSE), vous pou­vez sou­vent vous pas­ser de thème enfant. L’éditeur de site inté­gré ou une exten­sion comme WPCode suf­fi­ra dans la majo­ri­té des cas.
• Si vous avez juste besoin d’ajouter quelques fonc­tions PHP ou du CSS, sans tou­cher aux fichiers de thème, des outils comme Code Snip­pets ou WPCode sont sou­vent plus simples et plus sûrs.

Choi­sis­sez l’approche adap­tée à votre thème et à votre niveau : le thème enfant reste une solu­tion robuste pour les sites clas­siques, mais les outils modernes comme le Full Site Edi­ting ou WPCode peuvent suf­fire dans bien des cas.

Pho­to de l’image mise en avant : mer­ci à Web­Fac­to­ry Ltd