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

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.