Créer un thème enfant avec WordPress (child theme)

Comment et Pourquoi créer un theme enfant dans WordPress
WordPress Lecture 6 minutes • 21 avril 2017

Les thèmes WordPress que l'on trouve sur Internet sont fantastiques et leur force est aussi dans leur personnalisation. Changer une couleur, une taille de police d'écriture. Et si vous modifiez ce bouton un peu trop gros ?
Cependant tout n'est pas possible à personnaliser depuis l'espace d'administration de WordPress et du "theme builder" : Divi, Elementor... Arrive alors le besoin d'ajouter son propre style CSS ou créer quelques fonctions PHP qui nous permettent de personnaliser complètement le site selon nos envies.
Savez-vous que modifier les fichiers PHP et CSS d'un thème que vous avez téléchargé, même rien qu'un tout petit peu, et bien ça vous bloque dans la mise à jour d'une nouvelle version ?
Et oui, lors de la prochaine mise à jour du thème, bam ! Toutes vos modifications auront disparus.
Si vous voulez assurer la pérennité de votre site, il faut absolument créer un Thème Enfant au début de votre projet, avant d'ajouter une quelconque ligne de CSS ou de PHP.
 

Comment marche un Thème Enfant et Pourquoi l'utiliser

WordPress vérifie d'abord le Thème Enfant et applique les fonctionnalités existantes. S'il n'y en a pas, il utilise alors le Thème Parent. Cela permet d'assurer une pérennité à vos modifications de Thème (CSS notamment).
En bref, il y' a deux raisons incontestables d'utiliser les Thèmes Enfants : la stabilité des mises à jour et l'organisation claire et propre de vos modifications du thème.
 

Cas des mises à jour sans thème enfant

Modifier un thème sans utiliser un Theme Enfant vous laisse 2 choix :

  • Soit vous ne faites aucune mise à jour du thème dans le futur
  • Soit vous faites les mises à jour et perdez tout les changements enregistrés auparavant

Avouez que perdre des minutes ou des heures à tout remettre en ordre, c'est vraiment navrant pour rester poli.
Et si vous avez la bonne idée de ne pas mettre à jour votre thème. Alors les hackers s'en frottent les mains. Les mises à jour existent pour combler des failles de sécurité. En gros, autant laisser votre nouvelle télé sur le siège de votre voiture, portes ouvertes et clés sur le contact.
Plus sérieusement, ne négligez surtout pas les mises à jour de thème ET d'extensions WordPress.
 

Cas de l'organisation du développement sans thème enfant

En ajoutant du code à votre thème existant, vous nourrissez une base globale de code, composée de milliers de lignes. Les développeurs qui travaillent sur votre site (et bien-sur, vous même) auront bien du mal à remettre les mains dedans et retrouver vos changements.
Plus de temps pour le développement = plus d'argent sur la facture finale.
Puisque le Thème Enfant est la modification d'un Thème Parent existants, il entraine un changement important même s'il ne contient que 50 lignes de codes.
 

Créer un Thème Enfant avec WordPress

Bonne nouvelle, c'est hyper simple. Vous pouvez même copier-coller et adapter rapidement l'exemple que je donne ci-dessous.
Pour créer le Thème Enfant de votre Thème, suivez les 3 étapes suivantes :
1 / Créer un nouveau dossier dans votre répertoire de thèmes.
Si j'utilise le thème twentysixteen, alors je créé le dossier twentysixteen-child dans mon répertoire de thème comme ici : wp-content/themes/twentysixteen-child. Vous utilisez pour cela votre logiciel FTP préféré, comme FileZilla.
 
2 / Créer une feuille de style.
La nommer style.css et copier/coller le code suivant à l'intérieur :

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://votresiteweb.com/Sixteen-child/
Description: Mon premier Thème Enfant, basé sur Twenty Sixteen
Author: Thibaut Soufflet
Author URI: http://thibautsoufflet.fr
Template: twentysixteen
Version: 1.0.0
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated
Text Domain: twenty-sixteen-child
*/

Les deux lignes indispensables du code ci-dessus sont les lignes Theme Name (ligne 3) et Template (ligne 8).

  • Theme Name indique à WordPress quel est le nom que vous donnez à votre thème enfant.
  • Template dit à WordPress quel est le thème parent à lier.

Le Text Domain (ligne 11) doit être unique pour votre thème et doit être utilisé si vous avez recours à des fonctions de traduction ou de création de Custom Post. Les Tags sont simplement une copie de ceux présents dans le style.css du thème parent.
 
3 / Créer un fichier functions.php
Au point actuel, votre Thème Enfant est prêt. Si vous l'activez et rechargez la page, tout le contenu sera bien affiché mais aucune personnalisation de style en vue.
Comme vous le savez maintenant, WordPress charge d'abord les fichiers du Thème Enfant et si le fichier n'existe pas, il retombe sur le fichier du Thème Parent. Hors notre Thème Enfant enfant contient désormais un fichier style.css, donc WordPress ne va plus chercher le fichier de style du Thème Parent.
Et comme notre fichier style.css est vide, plus aucun style n'apparait à l'écran.
Pour être sûr que WordPress charge également le style.css du Thème Parent, créez un fichier functions.php et copier-coller le code suivant à l'intérieur.
Sauvegardez ensuite functions.php et mettez-le via FTP à la racine de votre Thème Enfant, exemple : wp-content/themes/twentysixteen-child

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Il est temps de rafraichir votre page et de constater avec émotion que tout est bien revenu.
Il ne vous reste plus qu'à personnaliser votre site en utilisant le style.css de votre Thème Enfant !

En conclusion

En utilisant quelques copier-coller et en suivant ces étapes simple vous pouvez créer un environnement sécurisé et durables pour votre thème, ce qui vous évitera bien des prises de tête.
Attention, il peut être tentant d'utiliser l'éditeur de WordPress (Apparence > Éditeur) mais bien souvent c'est la source de nombreux problèmes si vous n'utilisez pas de Thème Enfant !
Prenez quelques minutes pour suivre ce court tutoriel et votre site web et vos développeur vous remercierons. Si vous avez d'autres conseils et astuces pour créer un Thème Enfant, dîtes le en commentaire.
 
Tibow Webdesign vous propose aussi ses services de conseils et de création sur-mesure pour tous vos projets de site Internet et Boutique e-commerce. Devis et conseils gratuits ici.


Avis clients

Tibow Webdesign

Tous les avis

Charlotte Séjourné - Wildust.com 10 septembre 2021

Google Avis
Thibaut est une personne super disponible et très pro.
Chaque projet confié a été géré avec beaucoup de professionnalisme et pas mal de pédagogie pour les néophytes comme moi! C'est super appréciable.

Maud Rochais Photographe 26 août 2021

Google Avis
Thibault a répondu a mes attentes ! Il est à l'écoute et a su cerner rapidement ce que je voulais en terme de site. Le résultat est parfait ! Merci à toi !

Loïc Perrière 6 janvier 2021

Ingénieur de recherches - CNRS / Recommandation LinkedIn
Lors du démarrage de projet de refonte du site web de mon laboratoire, j’ai contacté Thibaut pour obtenir des renseignements sur un travail qu’il avait déjà réalisé auprès d’un autre client.
Sa franchise et la clarté de ses réponses m’ont finalement convaincu de lui confier la conception de deux sites internet. Nos échanges ont toujours été constructifs, et Thibaut a fait preuve, tout au long du développement, de dynamisme et de réactivité, et a également réalisé de nombreuses propositions qui ont majoritairement été retenues. Enfin, il a su faire preuve d’écoute pour intégrer les problématiques et les demandes spécifiques d’un site internet de laboratoire public pour créer un site à notre image.
La collaboration a été fructueuse et constructive, et ça a été un réel plaisir de travailler avec lui.

Clara Deleuze 21 décembre 2020

Principal Chief Executive Officer chez On Divorce / Recommandation LinkedIn
Je collabore avec Thibault depuis plus de 10 ans.
Plus qu'un dev Full Stack c'est un profil au sens logique qui sera vous accompagner plus globalement sur votre projet IT.
Je lui ai confié plus de 5 projets et vous le recommande vivement : réactivité, sens du détail, proactivité...Il sait s'adapter "au métier" pour lequel il intervient et pas uniquement à la fonctionnalité !

Ackeret Mano 22 février 2019

Google Avis
Nous avons fait appel à Thibaut pour développer le site internet de notre entreprise Ackeret Mano, l'année dernière et nous avons été très satisfaits.

C'est un garçon à l'écoute, disponible et sérieux.
Nous vous le recommandons les yeux fermés.

Frédéric Meyrou 19 octobre 2018

Google Avis
Thibaut a repris en main le site du projet de coopérative supercoop.fr et il a parfaitement compris le style et l'énergie qu'il fallait donner au projet donc le site est un vecteur important de communication. Vous pouvez lui faire confiance!

Patrick Chatenet 24 juin 2018

Google Avis
Nous avons travaillé avec Thibaut Soufflet pour finaliser un site Wordpress fait par une autre personne qui était partie vers d'autres horizons professionnels. Il s'est parfaitement adapté, nous a bien écouté et a proposé de très bonnes solutions en termes d'ergonomie et de facilité d'utilisation pour nos clients. A eu à régler des problèmes techniques et a pris le temps de nous trouver les meilleures solutions. Je le conseille vivement!

Anaelle Sorignet 21 mai 2018

Google Avis
Tibow est super efficace, réactif et à l'écoute ! Il nous a concocté un super site. Je recommande vivement de faire appel à lui.

ISOPROM 15 avril 2018

Google Avis
donne de tres bons conseils

Alexis Supiot 5 septembre 2017

Google Avis
Plusieurs projets avec Thibaut et à chaque fois de bons échanges, une facilité dans la compréhension de nos attentes et pour l'ensemble des résultats très satisfaisants sur le rendu. Je recommande vivement et sais que nous aurons d'autres projets ensemble.
Lire plus