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 :
[pastacode lang="css" manual="%2F*%0ATheme%20Name%3A%20Twenty%20Sixteen%20Child%0ATheme%20URI%3A%20http%3A%2F%2Fvotresiteweb.com%2FSixteen-child%2F%0ADescription%3A%20Mon%20premier%20Th%C3%A8me%20Enfant%2C%20bas%C3%A9%20sur%20Twenty%20Sixteen%0AAuthor%3A%20Thibaut%20Soufflet%0AAuthor%20URI%3A%20http%3A%2F%2Fthibautsoufflet.fr%0ATemplate%3A%20twentysixteen%0AVersion%3A%201.0.0%0ATags%3A%20black%2C%20green%2C%20white%2C%20light%2C%20dark%2C%20two-columns%2C%20three-columns%2C%20left-sidebar%2C%20right-sidebar%2C%20fixed-layout%2C%20responsive-layout%2C%20custom-background%2C%20custom-header%2C%20custom-menu%2C%20editor-style%2C%20featured-images%2C%20flexible-header%2C%20full-width-template%2C%20microformats%2C%20post-formats%2C%20rtl-language-support%2C%20sticky-post%2C%20theme-options%2C%20translation-ready%2C%20accessibility-ready%2C%20responsive-layout%2C%20infinite-scroll%2C%20post-slider%2C%20design%2C%20food%2C%20journal%2C%20magazine%2C%20news%2C%20photography%2C%20portfolio%2C%20clean%2C%20contemporary%2C%20dark%2C%20elegant%2C%20modern%2C%20professional%2C%20sophisticated%0AText%20Domain%3A%20twenty-sixteen-child%0A*%2F" message="" highlight="" provider="manual"/]
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
[pastacode lang="php" manual="add_action(%20'wp_enqueue_scripts'%2C%20'enqueue_parent_styles'%20)%3B%0Afunction%20enqueue_parent_styles()%20%7B%0Awp_enqueue_style(%20'parent-style'%2C%20get_template_directory_uri().'%2Fstyle.css'%20)%3B%0A%7D" message="" highlight="" provider="manual"/]
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.


Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗


Avis clients

Tibow Webdesign

Tous les avis

Anaee France - anaee-france.fr 07/2023

Google Avis
Nous avons eu le plaisir de travailler avec Thibaut pour une refonte totale de notre site web, et avons particulièrement apprécié son dynamisme, ses compétences (notamment en webdesign mais également pour le développement web et la communication), ses conseils pour redonner un coup de jeune à notre site web, et sa réactivité. De plus Thibaut a très vite montré un intérêt pour nos sujets (recherche scientifique, étude des écosystèmes) et rapidement compris nos besoins pour améliorer notre visibilité, c’est un vrai plus ! Je remercie et recommande Thibaut pour le développement de sites web

Sabine Sans Photographe - sabinesans.fr Mai 2023

Google Avis
Je suis très satisfaite de mon site internet, il est épuré et fonctionnel comme je le souhaitais. Merci Thibaut, vous avez su être à l'écoute, rassurant et réactif.

Louise Malassigné - loumade.fr Novembre 2022

Google Avis
J’ai eu l’occasion de travailler avec Thibaut sur la refonte d’un site e-commerce pour un château, cela c’est très bien passé, la cliente était ravie de la prestation et du site. Thibaut est très réactif et professionnel. Je recommande !

Julie Deshayes Aout 2022

Google Avis
Thibaut a aidé mon club de ski nautique à apparaître sur internet , il est d’une rapidité et d’une efficacité extraordinaire, je vous recommande

Centre Emile Durkheim - centreemiledurkheim.fr Avril 2022

Google Avis
Nous avons fait appel à Thibaut pour la refonte de notre site web. nous sommes très contents de sa prestation, tant sur le plan humain que technique. Thibaut s'est rendu disponible. Il a su être à l'écoute, à su s'adapter à nos besoins spécifiques, a été force de propositions. C'est un réel plaisir de travailler avec Thibaut, nous ferons appel de nouveau à lui les yeux fermés.

Nicolas Bourvic - lecirejaune.com 25 février 2022

Consultant junior agence Le Ciré Jaune
Consultant en agence de communication, j'ai à plusieurs reprises fait appel à Thibaut pour la réalisation de sites internet (à ce jour 4). Professionnalisme, réactivité et une vraie compréhension du besoin client définit Thibaut.
Vous pouvez vous fier à son expertise, il saura répondre à vos questions les plus techniques. De plus, Thibaut n'est pas qu'un exécutant mais est force de proposition et construit une relation bienveillante et respectueuse, ce qui est déterminant pour la bonne réalisation d'un projet.

Je recommande vivement et je continuerai à faire appel à Thibaut.

Charlotte Devillers - dydu.ai 25 février 2022

Digital Marketing Manager at dydu
Pour la gestion de notre site web, nous sommes passés d'une agence à Thibaut et nous ne regrettons pas notre décision ! Thibaut est un véritable couteau suisse : c'est un expert en dév, webdesign, web marketing… La complémentarité de toutes ces compétences font que Thibaut comprend rapidement nos objectifs marketing et commerciaux, proposant ainsi des conseils et un accompagnement précieux. En plus de ses compétences techniques multiples, Thibaut est très à l'écoute, réactive, proactif, très bon communicant… Vous pouvez lui faire confiance les yeux fermés ! Merci Thibaut pour ton professionnalisme et ton expertise, c'est un réel plaisir de travailler avec toi.

Philippe Carne - hocklines.fr 16/02/2022

Google Avis
Un professionnel à votre écoute.

Pour notre asso sportive, nous avions besoin de revisiter notre site.
Tibow Webdesign a su nous accompagner du début à la fin de ce projet.

Une écoute active, une recherche de solutions, une connaissance des outils, de la réactivité, de l'adaptation, des conseils généraux sur la communication... Voilà pour l'essentiel des choses que Thibaut a su nous transmettre.

Nous en sommes au début... Mais le nouveau site a été vite adopté par notre public. Et de bonnes stats sont au rendez vous.

Aurore Grand 17 janvier 2022

Google Avis
J'ai vu un commentaire de Thibault sur une extension WordPress, qui ne fonctionnait pas sur mon site. Je l'ai donc contacté pour savoir si il pouvait m'aider. En moins d'une heure, il m'a répondu et il m'a gentiment aider. Un grand merci.

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.
Lire plus