Comment créer un thème enfant dans WordPress (Guide étendu)

Vous utilisez votre site WordPress depuis un certain temps et il fait ce dont vous avez besoin. Mais maintenant, vous décidez que vous devez le personnaliser.

Ou peut-être que vous créez votre site avec un thème que vous avez téléchargé à partir du répertoire de thèmes ou que vous avez acheté, et que vous réalisez qu’il ne fonctionne pas exactement de la manière dont vous en avez besoin.

Que faites-vous, alors ?

Vous pouvez soit trouver une extension qui vous fournira la personnalisation dont vous avez besoin, soit passer à un nouveau thème. Mais que faire si vous êtes satisfait de votre thème actuel et que vous n’arrivez pas à trouver une extension qui ajoute ce dont vous avez besoin en termes de fonctionnalités ?

Réponse : vous devrez personnaliser votre thème. Et les meilleures pratiques disent : Faites-le via des thèmes (WordPress) enfants.

Dans cet article, je vais vous montrer exactement comment créer un thème enfant dans WordPress, comment l’utiliser pour personnaliser votre site, et comment les thèmes enfants fonctionnent. J’expliquerai également le concept des thèmes parents et décrirai comment le thème parent sur votre site interagit avec un thème enfant.

Avant de nous plonger dans la création d’un thème enfant, nous allons identifier les 3 méthodes que vous pouvez utiliser pour personnaliser votre site WordPress.

Méthodes de personnalisation de WordPress

Personnaliser un thème comporte des risques. Si vous modifiez le code dans un thème tiers (que vous avez acheté sur une place de marché par exemple), alors lors de la prochaine mise à jour du thème, toutes vos modifications seront perdues. Cela signifie que non seulement votre site redevient comme avant, mais tout votre travail est gâché.

Il y a trois façons de personnaliser votre site WordPress :

• Modifier directement votre thème.
• Installer une extension.
• Créer un thème enfant du thème actuel.

Examinons chacune d’entre elles à tour de rôle.

Modifier votre thème

Si votre site utilise un thème WordPress personnalisé, ce qui signifie qu’il a été développé spécifiquement pour votre site, vous avez la possibilité de le modifier en toute sécurité car il n’y a aucun risque de perdre vos personnalisations la prochaine fois que le thème est mis à jour.

Au lieu de cela, si vous ou votre développeur apportez des modifications au thème à l’avenir, c’est la version personnalisée du thème que vous allez modifier, et non la version originale avant ces modifications.

Cela ne veut pas dire que la modification de votre thème n’est pas sans risque. Si vous n’avez pas l’habitude de coder des thèmes, il peut être encore plus sûr de créer un thème enfant (nous verrons comment dans une minute). C’est quelque chose que je fais : J’ai un thème de base que j’utilise sur tous mes sites, avec une mise en page standard, des crochets d’action (hooks) et des fonctions, puis je le personnalise sur chaque site avec un thème enfant.

Si vous modifiez votre thème directement, assurez-vous de conserver une sauvegarde du thème d’origine, ne modifiez pas le thème dans le site en production (utilisez plutôt un site de développement ou de test) et utilisez le contrôle de version pour suivre vos modifications.

Et si vous utilisez un thème tiers, vous ne devriez jamais le modifier directement. Utilisez plutôt une extension ou créez un thème enfant.

Ajouter un plugin

La deuxième option pour personnaliser un thème WordPress est d’installer ou de coder une extension.

Si les personnalisations que vous voulez faire sont fonctionnelles au lieu d’être liées au design, une extension est un moyen plus approprié de le faire. Donc si vous voulez ajouter du code supplémentaire, il peut être préférable de créer une extension à la place.

Les extensions n’ont pas besoin d’être grandes ou complexes : si vous avez besoin d’ajouter du code supplémentaire au fichier functions.php dans votre thème, créez une extension simple pour ajouter quelques lignes de code à votre site. Un bon exemple est l’enregistrement d’un type de publication personnalisé (Custom Post Type).

Il peut être tentant d’ajouter du code au fichier functions.php de votre thème, mais ajouter un type de publication est un changement fonctionnel à votre site, pas un changement de conception. Si vous deviez changer de thème à l’avenir, vous ne voudriez pas perdre ces types de publications et tous les articles que vous avez créés en les utilisant. C’est pourquoi vous devriez installer ou créer une extension à la place.

Parfois, vous serez en mesure de trouver une extension existante qui fait ce dont vous avez besoin, mais parfois vous devrez coder l’extension vous-même.

En cas de doute sur la nécessité de créer une extension ou de personnaliser votre thème (ou thème enfant), demandez-vous ceci : si je voulais changer le design de mon site à l’avenir et installer un nouveau thème WordPress, est-ce que je voudrais que ce changement reste ? Si la réponse est oui, cela signifie que le changement est fonctionnel et non esthétique, et qu’il devrait aller dans une extension.

Créer un thème enfant

La troisième option pour personnaliser le thème WordPress est de créer un thème enfant.

Voici quelques scénarios dans lesquels vous utiliseriez un thème enfant :

• Vous souhaitez apporter des modifications à la conception du site, et non à sa fonctionnalité.
• Votre site utilise un thème tiers ou un thème que vous souhaitez utiliser à nouveau dans son état actuel.
• Vous ne voulez pas modifier directement votre thème existant au cas où cela causerait des problèmes (peut-être que vous n’êtes pas un développeur de thème expérimenté).
• Votre site utilise un thème conçu pour être un thème parent, tel qu’un framework. Ce sont des thèmes avec de nombreuses options de personnalisation telles que des crochets d’action, conçus pour que vous puissiez les ajouter à votre propre thème enfant.

Les thèmes enfants sont donc un moyen efficace et sûr d’ajouter des personnalisations à votre site. Examinons-les donc plus en détail.

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

Alors, qu’est-ce qu’un thème enfant dans WordPress ? Comment cela fonctionne-t-il ?

Un thème enfant est un thème qui fonctionne en tandem avec un autre thème, que l’on appelle le thème parent.

Il contient des instructions spécifiques pour indiquer à WordPress qu’il s’agit d’un thème enfant et quel est le thème parent. WordPress utilise ensuite le code du thème parent dans la plupart des cas, mais le remplace par le code du thème enfant (si nécessaire). Si vous rencontrez un site utilisant un thème enfant qui vous plaît, utilisez notre outil de détection de thème pour découvrir le thème parent.

Les fichiers dans un thème enfant WordPress

Chaque thème enfant WordPress doit avoir au minimum deux fichiers : une feuille de style et un fichier de fonctions. La feuille de style contiendra un texte commenté en haut indiquant à WordPress qu’il s’agit d’un thème enfant et quel est le thème parent. Le fichier de fonctions comprendra une fonction qui interroge la feuille de style à partir du thème parent.

Remarque : Vous pouvez trouver des guides qui vous disent d’appeler la feuille de style du thème parent à partir de la feuille de style du thème enfant. Ce n’est plus la bonne façon de le faire, et vous devriez plutôt utiliser l’interrogation dans le fichier de fonctions. Je vais vous montrer comment faire.

Votre thème enfant n’a pas besoin d’inclure d’autres fichiers. Contrairement au thème parent, il n’a pas besoin d’un fichier index.php comme solution de secours s’il n’y a plus de fichiers spécifiques dans le thème. En effet, si un fichier modèle n’existe pas dans le thème enfant, WordPress utilisera le fichier du thème parent.

Ainsi, selon ce que vous voulez que votre thème enfant fasse, vous ajouterez du code supplémentaire à la feuille de style, au fichier de fonctions, ou vous créerez des fichiers supplémentaires dans le thème enfant pour remplacer le thème parent. Il peut s’agir d’un ou plusieurs de ceux-ci :

• Fichiers modèles pour remplacer le même fichier du thème parent, tel que page.php lorsque vous souhaitez personnaliser l’affichage des pages statiques.
• Parties de modèles telles que header.php ou footer.php lorsque vous voulez personnaliser ces parties de la conception du site.
• Pièces de modèle supplémentaires que vous appelez à partir des fichiers de modèle dans votre thème enfant. Ainsi, si vous vouliez personnaliser l’en-tête lorsque des pages statiques sont affichées, vous créeriez un fichier dans votre thème enfant appelé header-page.php, et un fichier modèle appelé page.php, qui remplacerait page.php du thème parent. Ce fichier modèle serait identique à celui du thème parent à l’exception de l’appel du fichier d’en-tête, qui appellerait header-page.php au lieu de header.php.
• Fichiers d’inclusion supplémentaires pour la fonctionnalité. Si vous voulez ajouter beaucoup de code fonctionnel et l’organiser, vous pouvez créer des fichiers d’inclusion pour chaque ensemble de fonctions et les appeler dans le fichier functions.php de votre thème enfant. Ainsi, par exemple, si vous souhaitez ajouter des options supplémentaires à l’outil de personnalisation, vous pouvez ajouter un fichier d’inclusion appelé customizer.php dans votre thème enfant, puis appeler ce fichier depuis le fichier de fonctions dans votre thème enfant.

Mais si vous ajoutez des fichiers et des fonctions supplémentaires, comment WordPress sait-il lequel utiliser ? Ceux du thème parent ou ceux du thème enfant ? Nous y viendrons ensuite.

Comment WordPress choisit les fichiers modèles

La façon dont WordPress choisit les fichiers modèles de votre thème lors de l’affichage du contenu sur votre site est en se référant à la hiérarchie des modèles.

WordPress utilise cette hiérarchie pour parcourir les fichiers modèles de votre thème et trouver celui qu’il convient d’utiliser pour afficher un type de contenu donné. Il commencera en haut (à gauche dans l’image ci-dessus) et recherchera chaque fichier pour le type de contenu donné à tour de rôle. Lorsqu’il trouve un fichier qui affichera ce contenu, il l’utilisera.

Imaginez que votre thème ait un fichier archive.php et un fichier category.php mais pas de fichier tag.php. Lors de l’affichage d’une archive de catégories, WordPress utilisera category.php car il est plus spécifique au type de contenu. Lors de l’affichage d’une archive d’étiquettes, il utilisera archive.php à la place.

Si WordPress ne trouve pas de fichier modèle pour le type de contenu donné, il utilisera par défaut le fichier index.php, c’est pourquoi chaque thème autonome (c’est-à-dire pas un thème enfant) doit avoir un fichier index.php.

Il en va de même pour les articles et les pages individuels. Disons que votre thème a un fichier singular.php, qui est le fourre-tout pour les articles individuels de tout type de publication (y compris les pages et les types de publications personnalisés). Il a aussi un fichier page.php. Lors de l’affichage d’une seule page, il utilisera page.php. Lors de l’affichage d’un article, il utilisera singular.php. Et si vous enregistrez un type de publication personnalisé et que vous n’ajoutez pas de fichier modèle pour ce type de publication, il utilisera singular.php à nouveau.

Lorsque vous utilisez un thème enfant, WordPress utilise toujours la hiérarchie des modèles pour décider quel fichier utiliser lors de l’affichage de contenu sur votre site. Il examine les fichiers des thèmes parent et enfant et utilise le premier fichier qu’il trouve.

Imaginez donc que votre thème enfant a singular.php et post.php, et que votre thème parent a page.php et index.php. Lors de l’affichage d’un article individuel, WordPress utilisera post.php à partir du thème enfant. Lors de l’affichage d’une page, il utilisera le fichier page.php du thème parent. Et lors de l’affichage d’un article individuel ou d’un type de publication personnalisé, il utilisera singular.php à partir du thème enfant.

Mais que se passe-t-il si votre thème enfant et votre thème parent ont tous deux des instances du même fichier ?

Imaginons que vous ajoutiez un fichier page.php au thème enfant dans l’exemple précédent. Comme ce thème se trouve dans le thème enfant, il remplace le même fichier du thème parent. Ainsi, lors de l’affichage d’une seule page, WordPress utilisera le nouveau fichier page.php du thème enfant.

C’est pourquoi la création d’un thème enfant vous permet de personnaliser le thème parent. Si vous ajoutez une copie d’un fichier modèle de votre thème parent à votre thème enfant et que vous le modifiez ensuite pour inclure les personnalisations que vous voulez faire, WordPress utilisera ce nouveau fichier modèle au lieu de celui du thème parent. Ce qui signifie que vos personnalisations seront utilisées lors de l’affichage du contenu, sans que vous ayez modifié le thème parent. Joli !

Comment WordPress fonctionne à partir des thèmes parents et enfants

Que faire si vous voulez faire des personnalisations non pas aux fichiers de modèle dans votre thème, mais aux fonctions ?

Vous pouvez le faire aussi. Tout d’abord, vous devez vous assurer que la bonne façon de le faire est via un thème enfant et non une extension. Un exemple pourrait être où vous voulez modifier une fonction qui est déjà dans le thème parent, par exemple, la fonction qui édite lecrédits dans le pied de page.

Vous ajoutez ensuite la ou les nouvelles fonctions au fichier de fonctions dans votre thème enfant ou à un fichier d’inclusion que vous appelez à partir du fichier de fonctions.

Pour vous assurer que votre nouvelle fonction remplace la fonctionnalité de votre thème parent, vous devez comprendre comment remplacer les fonctions. Il y a trois façons de le faire :

• En écrivant une nouvelle fonction avec le même nom qu’une fonction enfichable dans votre thème parent.
• En décrochant la fonction de votre thème parent du crochet d’action auquel elle était attachée et en écrivant ensuite une nouvelle fonction pour la remplacer.
• En écrivant une nouvelle fonction avec une priorité plus élevée que la fonction originale et en l’appelant via le même crochet d’action, ce qui signifie qu’elle est appelée après la fonction originale et peut, par conséquent, la remplacer ou l’augmenter.

Nous verrons comment vous faire tout cela plus loin dans cet article. Mais d’abord, regardons les scénarios où vous utiliseriez ou non un thème enfant.

Quand utiliser un thème enfant dans WordPress (Avantages)

Vous savez maintenant ce que sont les thèmes enfants et comment vous pouvez les utiliser pour remplacer les fichiers modèles ou les fonctions de votre thème parent.

En résumé, vous devriez utiliser un thème enfant si vous utilisez un thème sur votre site et que vous voulez faire une ou plusieurs des choses suivantes :

• Modifier un ou plusieurs fichiers modèles.
• Ajouter des fonctions supplémentaires liées à l’affichage et non à la fonctionnalité.
• Remplacer une ou plusieurs fonctions du thème parent.
• Ajouter un ou plusieurs fichiers modèles supplémentaires.

Parmi les avantages, mentionnons les suivants :

• Amélioration et personnalisation faciles : C’est évident, un thème enfant étend la fonctionnalité de son thème parent. Vous avez déjà un modèle prêt à l’emploi à votre service sous la forme d’un thème parent, et tout ce que vous avez à faire est de créer un fichier style.css distinct pour votre thème enfant, et ajouter les modifications de personnalisation selon vos besoins.
• Mises à jour sans tracas : Au fur et à mesure que WordPress évolue, les thèmes et les extensions doivent être mis à jour régulièrement. Si vous apportez des modifications de personnalisation et des changements à votre thème principal, vous risquez de perdre tous vos changements si vous mettez à jour le thème. Il est donc conseillé d’apporter de telles modifications à un thème enfant, de sorte que même si vous devez mettre à jour le thème parent, vous n’avez pas peur de perdre vos modifications.

Et si vous n’utilisiez pas un thème enfant ?

Quand ne pas utiliser un thème enfant WordPress (Inconvénients)

Il y a des moments où vous n’utiliseriez pas un thème enfant et devriez utiliser une méthode différente de personnalisation de votre site. Ceux-ci sont :

• Si c’est un thème que vous avez développé vous-même (ou que quelqu’un d’autre a codé pour vous) et que vous n’avez pas besoin de l’utiliser ailleurs. Modifiez simplement le thème, en vous assurant d’utiliser le contrôle de version.
• Si les personnalisations que vous voulez faire sont fonctionnelles, par exemple l’ajout d’un type de publication personnalisé, et vous voudrez les conserver si vous changez de thème dans le futur. Utilisez plutôt une extension.

Parmi les inconvénients, mentionnons :

• Choisir le thème parent idéal : Tous les thèmes n’agissent pas comme de bons th-mes parents ! Certains thèmes WordPress, par exemple, peuvent ne pas être mis à jour régulièrement et ont donc tendance à ne pas disposer des dernières fonctionnalités. De même, tous les thèmes WordPress ne sont pas créés avec des thèmes enfants à l’esprit et, en tant que tels, peuvent être de mauvais candidats pour les thèmes parents. Vous devez choisir le thème parent parfait afin de l’améliorer correctement et de le faire fonctionner comme une base pour vos thèmes enfants.
• Efforts de personnalisation : Un thème enfant cherche essentiellement à améliorer et à personnaliser un modèle existant. Ainsi, si vous avez déjà créé un site autour de votre thème parent, vous devrez peut-être reconsidérer la personnalisation d’éléments tels que les menus, les options de thème, les barres latérales, l’en-tête, etc. lorsque vous passez à un thème enfant.

Maintenant que vous savez quand (et quand en pas) utiliser un thème enfant, il est temps de vous mettre au travail et d’apprendre comment créer un thème enfant dans WordPress.

Comment créer un thème enfant WordPress

La configuration d’un thème enfant basique dans WordPress implique la création de deux fichiers : la feuille de style et le fichier de fonctions. Jetons un coup d’oeil aux deux.

La feuille de style

Avant de créer votre fichier, vous devez créer un dossier pour votre thème. Ceci va dans le fichier wp-content/themes de votre installation WordPress.

Rappelez-vous : ne faites pas cela dans votre site de production. Ajoutez d’abord le code à un site de développement, puis testez-le sur votre site de test. Une fois que vous êtes satisfait, vous pouvez le transférer sur votre site en production. Tous les forfaits d’hébergement Kinsta incluent la mise en test.

Dans le dossier de votre nouveau thème, créez un fichier appelé style.css. Ajoutez ce qui suit :

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Ce texte est commenté. Ce n’est pas un code qui exécute quoi que ce soit sur votre site ou qui fournit des fonctionnalités. Au lieu de cela, il informe WordPress sur le thème. Vous avez besoin d’un texte comme celui-ci dans chaque thème, sinon WordPress ne peut pas le reconnaître comme un thème.

Passons en revue chacune de ces lignes pour identifier ce qu’elles font :

• Theme Name : Le nom unique du thème.
• Theme URI : Où les utilisateurs peuvent trouver le code ou la documentation pour le thème.
• Description : Texte descriptif pour aider les utilisateurs à comprendre ce que fait le thème…
• Author : Votre nom
• Textdomain : Ceci est utilisé pour l’internationalisation. Utilisez textdomain comme deuxième paramètre dans toutes les fonctions d’internationalisation.
• Author URI : Le site de l’auteur.
• Template : Le dossier dans lequel le thème parent est stocké. Utilisez le nom du dossier et non le nom du thème. Sans cette ligne, votre thème ne fonctionnera pas comme un thème enfant.
• Version : Le numéro de version
• License : La licence, qui doit être GNU. [lien]
• License URI : Le lien vers l’information sur la licence.

La ligne la plus importante pour un thème enfant est la ligne Template. Sans cela, le thème ne fonctionnera pas comme un thème enfant. Seuls les thèmes enfants incluront cette ligne.

Ajoutez-la à la feuille de style de votre thème, modifiez-la pour ajouter vos propres détails au lieu des miens. Vous devrez modifier la ligne Template pour ajouter le dossier dans lequel votre thème existant est stocké, car ce sera votre thème parent.

Maintenant, enregistrez le fichier. Si vous regardiez l’écran de détails du thème dans votre site maintenant, vous verriez tout cela affiché :

Ça n’a pas l’air génial parce qu’il n’y a pas de capture d’écran. C’est une image qui donne une idée de l’aspect du thème. A moins que votre thème ne soit très différent du thème parent, copiez simplement le fichier screenshot.png de votre thème parent vers votre thème enfant.

Le fichier de fonctions

L’étape suivante consiste à ajouter un fichier de fonctions à votre thème enfant. Vous en avez besoin pour pouvoir mettre en file d’attente la feuille de style du thème parent. Sans lui, votre site n’aurait aucun style du tout, et ressemblerait à quelque chose comme ceci :

Ce n’est pas bon, je suis sûr que vous serez d’accord ! Ajoutons donc le style pour que cela ait l’aspect qu’il se doit.

Dans votre dossier de thème enfant, ajoutez un fichier appelé functions.php. Ouvrez-le et ajoutez ce code :

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Cela utilise la fonction wp_enqueue_style() pour mettre en file d’attente la feuille de style du thème parent, avec la fonction get_template_directory_uri() localisant où ce fichier est stocké. La fonction est à l’intérieur d’une fonction que j’ai créée et appelée kinsta_parent_styles(), qui est connectée au hook wp_enqueue_scripts.

Vous vous demandez peut-être pourquoi il utilise une fonction appelée wp_enqueue_scripts et non wp_enqueue_styles. C’est parce que wp_enqueue_scripts est utilisé à la fois pour les scripts et les styles et qu’il n’existe pas de crochet d’action tel que wp_enqueue_styles.

N’hésitez pas à modifier mon code pour ajouter votre propre préfixe au nom de votre fonction. J’ai utilisé « childtheme » comme préfixe pour m’assurer que ma fonction n’entre en conflit avec aucune autre fonction du thème parent ou aucune extension.

Maintenant, enregistrez votre fichier.

Comment activer votre thème enfant WordPress

Une fois que votre thème enfant est prêt, vous devez l’activer. Si vous craignez que l’activation du thème enfant désactive le thème parent, ne vous inquiétez pas : WordPress saura utiliser les fichiers du thème parent à moins que vous n’ajoutiez de nouveaux fichiers au thème enfant qui les remplacent. Jusqu’à présent, vous n’avez pas ajouté de fichiers ou de fonctions supplémentaires au thème enfant, donc votre site fonctionnera exactement de la même manière qu’avec le thème parent activé.

Souvenez-vous : Faites ceci d’abord sur votre site de développement ou de test. N’activez pas votre thème enfant sur votre site en production avant de l’avoir testé.

Dans l’administration WordPress, allez dans Apparence > Thèmes. Vous trouverez votre thème enfant dans la liste des thèmes installés sur votre site.

Survolez le thème et cliquez sur le bouton Activer. Ceci activera votre thème enfant. Maintenant, lorsque vous visitez votre site en production, il aura le même aspect qu’avant :

Il est identique parce que vous n’avez pas encore ajouté de personnalisations. Mais vous avez maintenant un thème enfant fonctionnel. Bien joué !

Comment personnaliser votre thème enfant dans WordPress

Maintenant que vous avez un thème enfant fonctionnel pour votre site WordPress, il est temps d’ajouter vos personnalisations. Ici, je vais vous montrer comment ajouter des fichiers modèles pour remplacer ceux de votre thème parent, comment ajouter du style à votre thème enfant, et comment ajouter de nouvelles fonctions.

Commençons par les fichiers modèles.

Comment ajouter des fichiers modèles à votre thème enfant WordPress

Nous avons déjà examiné comment WordPress choisit le fichier modèle à utiliser pour afficher le contenu de votre site. Il y a deux choses à se rappeler :

• WordPress utilisera le fichier qui vient en premier dans la hiérarchie, soit du thème enfant, soit du thème parent.
• Si un fichier modèle (ou une partie de modèle comme header.php) portant le même nom existe dans les thèmes parent et enfant, WordPress utilisera celui du thème enfant.

Pour ajouter des personnalisations, je trouve plus facile de commencer par faire une copie du fichier pertinent à partir du thème parent, l’ajouter au thème enfant, puis le modifier.

Ceci implique que le fichier dans votre thème enfant ait le même nom que dans le thème parent, ou s’il s’agit d’un nouveau fichier pour afficher un type de contenu différent, ou d’un fichier plus haut dans la hiérarchie.

Donc, si j’ajoute une nouvelle version de page.php à mon thème enfant, qui remplacera page.php dans mon thème parent, je copierai page.php de mon thème parent dans mon thème enfant et je le modifierai. Assurez-vous de copier le fichier : ne le déplacez pas, car vous ne voulez pas modifier le thème parent.

Et si je veux un modèle de page personnalisé dans mon thème enfant, par exemple, je copierai page.php dans mon thème enfant, je le renommerai, puis je le modifierai.

De cette façon, vous pouvez vous assurer que tous les aspects du fichier que vous n’avez pas besoin de personnaliser fonctionneront toujours correctement. Il en va de même pour les parties de modèle.

Comment ajouter le style à votre thème enfant WordPress

Vous pouvez également ajouter un style au fichier style.css de votre thème enfant, ce qui améliorera ou remplacera le style dans la feuille de style du thème parent.

WordPress appellera d’abord la feuille de style du thème parent, puis la feuille de style du thème enfant. Cela signifie que si vous ajoutez un style au thème enfant qui cible les mêmes éléments que le style du thème parent, il remplacera le style du thème parent tant que vous utilisez les mêmes sélecteurs.

Imaginez donc que vous voulez changer la couleur du titre du site. Dans le thème parent, ceci pourrait être intitulé comme ceci :

h1.site-title {
 color: #000;
}

Pour remplacer ceci dans votre thème enfant, vous devez ajouter ceci :

h1.site-title {
 color: #303030;
}

Comme le navigateur rencontrera cela après le style dans le thème parent, il le remplacera et sera utilisé à la place.

Comment ajouter des fonctions à votre thème enfant WordPress

Ainsi, vous avez créé un thème enfant dans WordPress non pas parce que vous voulez modifier l’un des fichiers modèles, mais parce que vous voulez ajouter des fonctionnalités supplémentaires ou remplacer une ou plusieurs des fonctions du thème parent.

Écrire des fonctions dans votre thème enfant est un peu plus compliqué que d’ajouter des fichiers modèles, mais c’est possible.

Si vous voulez ajouter une nouvelle fonction qui n’interagit avec aucune des fonctions de votre thème parent, vous pouvez le faire. Ajoutez simplement la fonction au fichier functions.php dans votre thème enfant, branchez-la à l’action ou au crochet de filtre approprié, et vous êtes prêt à y aller.

Mais si vous prévoyez de remplacer ou de modifier une fonction dans le thème parent, vous devez comprendre les méthodes que vous pouvez utiliser pour cela. Il y a trois façons de remplacer une fonction de thème parent dans votre thème enfant :

• Si le thème du thème parent est enfichable, il vous suffit d’écrire une autre fonction dans votre thème enfant avec le même nom et WordPress exécutera cette fonction au lieu de celle du thème parent.
• Si vous voulez empêcher la fonction du thème parent de s’exécuter complètement, vous pouvez écrire une fonction dans votre thème enfant qui la décroche du crochet d’action auquel elle est attachée.
• Si vous voulez augmenter une fonction, vous pouvez ajouter une autre fonction (avec un nom différent) dans votre thème enfant et vous assurer qu’elle fonctionne après celle du thème parent.

Examinons de plus près comment faire chacune d’entre elles.

Remplacer une fonction enfichable

Une fonction enfichable est identifiée par le contrôle conditionnel qui l’entoure. Ceci vérifie s’il y a une autre fonction du même nom qui a déjà été déclenchée. Si c’est le cas, elle n’exécute pas la fonction.

WordPress déclenchera les fonctions de votre thème enfant avant celles du thème parent. S’il trouve une fonction enfichable dans le thème parent et que vous avez ajouté une fonction du même nom à votre thème enfant, la fonction enfichable ne sera pas exécutée.

Un exemple est la fonction qui édite les crédits dans le thème Storefront pour les sites WooCommerce. Voici la fonction sans son contenu :

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Si vous vouliez remplacer cette fonction par une autre avec le même nom (storefront_credit()) et l’accrocher au même crochet d’action que dans le thème parent.

Décrocher une fonction du thème parent

Si la fonction du thème parent n’est pas enfichable, vous pouvez toujours l’empêcher de fonctionner. Imaginez que votre thème parent a une fonction appelée parent_function(), qui est connectée au crochet init avec une priorité de 20. Vous voulez l’empêcher de fonctionner afin de pouvoir la remplacer par une fonction qui vous est propre.

Voici à quoi pourrait ressembler la fonction du thème parent :

function parent_function() {
 //contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

Pour le décrocher, vous le coderiez dans votre thème enfant :

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

Notez que vous accrochez votre deuxième fonction au crochet wp_head qui est lancé en haut de chaque page, et que vous devez inclure la même valeur pour le paramètre priority que dans la fonction originale. Si la fonction add_action() originale n’avait pas de priorité, vous pouvez l’omettre de la fonction remove_action() de votre thème enfant.

Note : Si la fonction originale était accrochée à un crochet de filtre au lieu d’un crochet d’action, vous utiliseriez remove_filter() de la même manière.

Augmenter une fonction avec une autre fonction

Au lieu de remplacer ou de supprimer une fonction, vous pouvez parfois vouloir l’ajouter à la place. Dans ce cas, vous écrirez une nouvelle fonction avec un nom différent, et l’attacherez au même crochet.

Imaginons qu’il y ait un crochet d’action pour le pied de page dans votre thème parent appelé parent_footer. Toute fonction que vous attachez à ce crochet s’exécutera à l’endroit où le crochet est situé.

Dans le thème parent, il y a déjà une fonction appelée parent_footer_content() qui remplit le pied de page. Mais que se passerait-il si vous vouliez y ajouter du code supplémentaire ?

Voici à quoi la fonction parent_footer_content() pourrait ressembler dans le thème parent :

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

Maintenant si vous vouliez ajouter du contenu supplémentaire après cela, vous créiez une fonction dans votre thème enfant, accrochée au même crochet d’action, avec une priorité qui signifiait qu’elle s’exécuterait après la première fonction. Comme la priorité n’est pas définie pour la fonction du thème parent, elle est par défaut de 10. Il faut donc utiliser un nombre plus élevé pour qu’il se lance après cela.

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

Ceci ajouterait le code de la fonction de votre thème enfant après le code de la fonction de votre thème parent.

Comment dépanner les thèmes enfants et parents

Vous savez maintenant comment créer un thème enfant dans WordPress et comment l’utiliser pour remplacer les fichiers modèles, ajouter du style et ajouter des fonctionnalités à votre site.

Mais que faire si votre thème enfant ne fonctionne pas comme prévu ? Que se passe-t-il si le contenu ne s’affiche pas comme vous l’espériez ou si une fonction ne se lance pas ?

Utilisez cette liste de contrôle pour dépanner votre thème enfant :

1. Vérifiez que vous avez activé votre thème enfant et que votre thème parent n’est plus en cours d’exécution. Il est étonnamment facile d’oublier cette étape !
2. Rafraîchissez le cache de votre navigateur et le cache créé par les extensions de votre site.
3. Définissez wp-debug à true dans le fichier wp-config.php de votre thème enfant. Si vous voyez un écran blanc, il devrait y avoir un message vous indiquant quel code a causé le problème et dans quel fichier il se trouve. Cela vous aidera à identifier le problème et le fichier utilisé.
4. Vérifiez le code d’affichage de votre page, article ou archive. Trouvez l’élément de corps et voyez quelles classes il a. Celles-ci vous indiqueront le type de contenu que vous consultez, ce qui vous aidera à identifier le fichier modèle qui est utilisé. Parfois, ce n’est pas ce à quoi on s’attend. Par exemple, la page principale du blog n’utilise jamais archive.php, même si elle affiche une archive de vos articles.
5. Vérifiez que vous avez correctement nommé vos fichiers. Référez-vous à la hiérarchie de modèle pour vous assurer que vous avez utilisé la bonne syntaxe.
6. Si vous avez dupliqué un fichier du thème parent et l’avez ajouté à votre thème enfant, vérifiez que vous avez enregistré vos modifications.
7. Si une fonction pour remplacer une fonction enfichable ne fonctionne pas, vérifiez que vous lui avez donné exactement le même nom que la fonction enfichable et que la fonction du thème parent est bien enfichable.
8. Si une fonction que vous avez supprimée fonctionne toujours, vérifiez que vous avez ajouté la bonne priorité et que votre orthographe est identique à celle de la fonction et du crochet dans le thème parent.
9. Si vous avez utilisé la priorité pour outrepasser ou augmenter une fonction, essayez d’augmenter la valeur de priorité, afin d’être absolument sûr qu’elle se déclenche en dernier. Vérifiez qu’il n’y a pas d’autres fonctions attachées à ce crochet qui interfèrent avec votre code.

Espérons qu’une ou plusieurs de ces étapes vous aideront à identifier le problème et à le résoudre dans votre thème enfant. Rappelez-vous : Ne modifiez pas directement le thème parent.

Conseils utiles lorsque vous travaillez avec les thèmes enfants WordPress

Ouf ! Les thèmes enfants sont tout à fait un sujet et une fonctionnalité incroyablement précieuse de WordPress. Je les utilise sur tous les sites que je construis.

Pour vous aider à trouver les méthodes dont vous avez besoin pour utiliser le plus efficacement possible les thèmes enfants, voici mes conseils pour vous aider à les utiliser :

• Si vous devez modifier un thème tiers, utilisez toujours un thème enfant à la place. De cette façon, vos modifications ne sont pas perdues lorsque vous mettez à jour le thème.
• Chaque thème enfant nécessite une feuille de style et un fichier de fonctions.
• WordPress utilisera la hiérarchie des modèles pour déterminer le fichier modèle à utiliser lors de l’affichage de contenu. S’il trouve deux fichiers portant le même nom, il utilisera celui du thème enfant.
• Vous pouvez remplacer une fonction enfichable dans votre thème parent en écrivant une fonction portant le même nom dans votre thème enfant.
• Vous pouvez décrocher une fonction du thème parent en utilisant une fonction avec remove_action() ou remove_filter() dans votre thème enfant et ensuite écrire une nouvelle fonction.
• Vous pouvez augmenter une fonction dans votre thème parent en écrivant une fonction dans votre thème enfant et en l’accrochant à la même action ou crochet de filtre.
• N’oubliez pas d’activer votre thème enfant après l’avoir téléversé. Et assurez-vous que personne ne supprime le thème parent de votre installation WordPress : sans lui, le thème enfant ne fonctionnera pas.

Résumé

Les thèmes enfants sont une fonctionnalité utile de WordPress qui vous permet de personnaliser un thème sans modifier directement son code. Vous pouvez en utiliser un pour ajouter des fonctionnalités supplémentaires à un thème, pour personnaliser le style ou pour créer/modifier des fichiers modèles.

Si vous suivez les conseils ci-dessus, vous serez en mesure de créer des thèmes enfants dans WordPress en suivant les meilleures pratiques et d’en tirer parti pour une variété de tâches. Tout cela sans perdre vos modifications et personnalisations lorsque vous mettrez à jour le thème parent.