Tuto : créer un thème enfant wordpress pas à pas

Dans SEA | Site Internet | Temps de lecture : 9 minutes

WordPress est l’une des plateformes les plus utilisées pour créer et gérer un site web, notamment grâce à la variété de thèmes disponibles et aux possibilités de personnalisation. Le problème, c’est que modifier directement un thème parent (le thème principal) est rarement une bonne idée : au moment d’une mise à jour, vos fichiers modifiés peuvent être écrasés. Vous perdez alors vos ajustements CSS, vos changements de templates, ou vos ajouts dans functions.php. Pour éviter ce scénario classique, la solution propre est de créer un thème enfant. Un thème enfant vous permet d’appliquer vos modifications sans toucher au thème parent, tout en profitant des mises à jour de celui-ci. Dans ce tutoriel, vous allez voir la méthode complète, étape par étape, avec les bonnes pratiques actuelles.

Qu’est-ce qu’un thème enfant wordpress ?

Un thème enfant wordpress est un thème “satellite” qui dépend d’un thème parent et en hérite automatiquement les fichiers, le design et les fonctionnalités. Concrètement, si un fichier n’existe pas dans le thème enfant, wordpress va le chercher dans le thème parent et l’utilise à sa place. Dès que vous ajoutez un fichier dans le thème enfant avec le même nom qu’un fichier du parent, c’est votre version qui prend la priorité. Cela rend la personnalisation beaucoup plus sûre, car vos modifications sont isolées dans un dossier dédié. Vous gardez ainsi une base stable (le parent) et un espace de travail propre (l’enfant), ce qui simplifie aussi la maintenance et le débogage.

Pourquoi utiliser un thème enfant ?

Le premier avantage, c’est la protection de vos personnalisations : une mise à jour du thème parent ne touche pas aux fichiers du thème enfant, donc vos modifications restent en place. Le second avantage, c’est la maintenance : vous pouvez continuer à appliquer les correctifs de sécurité et d’amélioration du parent sans hésiter, ce qui est crucial pour un site durable. Troisième point, l’organisation : votre code personnalisé est concentré dans un seul endroit, ce qui évite de “patcher” un peu partout dans le thème principal. Enfin, c’est une bonne pratique de développement : si plusieurs personnes travaillent sur le site, un thème enfant rend le projet plus clair, plus propre, et plus facile à reprendre.

Avant de commencer : ce qu’il vous faut

Pour créer un thème enfant, vous devez avoir accès aux fichiers de votre site, soit via FTP (FileZilla par exemple), soit via le gestionnaire de fichiers de votre hébergeur, soit via un environnement local (type LocalWP, XAMPP, MAMP). Il est aussi important de connaître le nom exact du dossier du thème parent, car wordpress s’appuie dessus pour faire le lien entre parent et enfant. Pensez également à faire une sauvegarde avant toute manipulation, même si l’opération est simple, surtout si vous intervenez sur un site en production. Enfin, si vous utilisez un thème très spécifique ou un framework (comme un builder), vérifiez la documentation du thème : certains imposent des conventions particulières, même si le principe du thème enfant reste le même.

Étape 1 : créer le dossier du thème enfant

La première étape consiste à créer un nouveau dossier dans le répertoire des thèmes de wordpress. Rendez-vous dans /wp-content/themes/ et repérez le dossier de votre thème parent (par exemple “twentytwentyfour” ou le nom du thème que vous utilisez). Créez ensuite un dossier pour le thème enfant, en suivant une convention simple, par exemple en ajoutant “-child” à la fin : “twentytwentyfour-child”. Ce nom de dossier n’est pas visible pour les visiteurs, mais il doit rester lisible et cohérent pour vous aider à vous y retrouver. Une fois le dossier créé, vous avez la structure minimale pour commencer à déclarer le thème enfant à wordpress.

Étape 2 : créer le fichier style.css du thème enfant

Dans le dossier de votre thème enfant, créez un fichier nommé style.css. Ce fichier a deux rôles : il contient l’en-tête de déclaration du thème (obligatoire) et il peut contenir vos règles CSS personnalisées. L’en-tête sert à informer wordpress du nom du thème, du thème parent utilisé, et de quelques métadonnées. Point important : la valeur du champ Template doit correspondre exactement au nom du dossier du thème parent, sinon wordpress ne pourra pas relier les deux. Vous pouvez ajouter ensuite vos styles en dessous, par exemple pour modifier une couleur, une typographie ou l’espacement de certains éléments.

Évitez d’utiliser la méthode @import pour charger le CSS du parent, car elle est moins performante et peut créer des problèmes d’ordre de chargement. La bonne pratique actuelle est de charger les feuilles de style via functions.php, ce que vous allez faire à l’étape suivante. Gardez donc style.css principalement pour l’en-tête et vos personnalisations CSS. Cela vous donne un contrôle propre et compatible avec les optimisations de performance de wordpress.

Étape 3 : créer le fichier functions.php et charger les styles correctement

Créez maintenant un fichier functions.php dans le dossier du thème enfant. Ce fichier va vous permettre de charger la feuille de style du parent et celle de l’enfant via wp_enqueue_style. Cette méthode est recommandée car elle respecte le fonctionnement de wordpress, gère mieux les dépendances, et évite les effets secondaires liés à @import. L’idée est simple : on charge d’abord le style du parent, puis le style du thème enfant, qui pourra surcharger certaines règles si nécessaire. Faites attention à bien copier le code ci-dessous, notamment l’ouverture PHP, et à enregistrer le fichier en UTF-8 sans ajouter de caractères invisibles.

Une fois ce fichier en place, votre thème enfant est déjà fonctionnel : il hérite du thème parent, charge ses styles, puis applique vos règles. Si vous ne voyez pas le style du parent, c’est souvent un indice que le champ Template dans style.css ne correspond pas au bon dossier. Dans certains thèmes modernes, le fichier CSS principal peut avoir un autre nom, ou le thème peut utiliser des styles générés ; dans ce cas, adaptez le chemin, mais gardez la logique d’enqueue. À partir de là, vous pouvez ajouter vos propres fonctions, hooks, et filtres dans functions.php, sans risquer d’écraser les fichiers du parent.

Étape 4 : activer le thème enfant et vérifier que tout fonctionne

Rendez-vous dans l’administration wordpress, puis Apparence, puis Thèmes. Vous devriez voir apparaître votre thème enfant avec le nom défini dans l’en-tête de style.css. Cliquez sur Activer, puis ouvrez votre site pour vérifier que l’affichage est identique à celui du thème parent. Si le site semble “sans style”, c’est généralement un problème de chargement de CSS, donc retournez vérifier l’enqueue dans functions.php et le Template dans style.css. Pensez aussi à vider le cache si vous utilisez un plugin de cache ou un système de cache côté serveur. Une fois que tout est bon, vous pouvez commencer à personnaliser en toute sécurité.

Étape 5 : personnaliser proprement sans casser le thème parent

Pour les changements simples de design, commencez par ajouter vos règles dans le style.css du thème enfant. Travaillez de manière progressive : une modification, un test, puis la suivante, afin de comprendre ce qui impacte quoi. Pour des modifications de templates, vous pouvez copier un fichier du thème parent vers le thème enfant en conservant exactement le même chemin et le même nom, puis l’éditer. Par exemple, si vous copiez header.php dans le thème enfant, wordpress utilisera votre version. Attention toutefois : plus vous surchargez de fichiers, plus vous devrez surveiller les évolutions du parent lors des mises à jour, car un fichier parent peut changer et votre copie peut devenir obsolète. Pour les fonctions, privilégiez les hooks et filtres lorsque c’est possible, car c’est souvent plus stable que de dupliquer des templates entiers.

Erreurs fréquentes et astuces utiles

L’erreur la plus courante est un Template incorrect dans style.css : il doit pointer vers le nom exact du dossier du thème parent, pas le nom “marketing” du thème. Autre piège : créer un functions.php qui contient une erreur de syntaxe, ce qui peut afficher une erreur critique ; pour éviter ça, éditez avec un éditeur fiable et vérifiez bien les accolades et les points-virgules. Pensez aussi à ne pas copier-coller du code avec des caractères spéciaux invisibles, surtout si vous travaillez depuis un traitement de texte. Enfin, si vous utilisez un thème basé sur un framework ou un builder, vérifiez comment il gère les styles et les dépendances, car certains thèmes ne s’appuient pas uniquement sur style.css. Dans tous les cas, le thème enfant reste la base propre pour travailler sans compromettre l’évolutivité du site.

Conclusion : un réflexe simple pour un site wordpress durable

Créer un thème enfant wordpress est une étape clé dès que vous souhaitez personnaliser un site de façon sérieuse. Vous protégez votre travail des mises à jour, vous gardez une structure claire, et vous facilitez la maintenance sur le long terme. Avec un dossier, un style.css bien déclaré, et un functions.php qui charge correctement les styles, vous obtenez une base solide et professionnelle. Ensuite, vous pouvez avancer : CSS personnalisé, hooks, surcharges ciblées de templates, et évolutions progressives sans stress. Si vous avez un site en production, ce petit investissement de départ vous évite beaucoup de pertes de temps et de mauvaises surprises plus tard.