Créer un thème enfant pour Twenty Nineteen / Avada

Pour un développeur, il existe deux manières propres et pérennes d’enrichir le fonctionnement d’un site WordPress :

• La conception d’une extension spécifique
• La création d’un thème enfant

Il est fortement déconseillé de faire des modifications directement dans une extension ou dans le thème existant.

Cela présente en effet des inconvénients majeurs :

• Perte des modifications à chaque mise à jour de l’extension ou du thème modifié, donc nécessité de les reporter (très) régulièrement
• Risque de perturber le fonctionnement de ces derniers, d’introduire des bugs

Évidemment il est possible de bloquer des mises à jour, mais cela risque de déclencher d’autres problèmes dans le temps :

• Écart grandissant entre les versions de WordPress et des autres composants, donc un risque d’incompatibilité et d’erreurs fatales
• Diminution de la sécurité du site puisque les pirates pourront potentiellement utiliser des failles connues qui ne seront pas corrigées par les mises à jour successives

Cet article est dédié à la création d’un thème enfant sur deux exemples :

• Twenty Nineteen qui est un thème basique disponible gratuitement avec WordPress
• Avada qui est le thème avec lequel je travaille quotidiennement et que j’affectionne particulièrement pour sa richesse fonctionnelle

Dans WordPress, le thème Twenty Nineteen est situé dans : wp-content/themes/twentynineteen/

Les étapes pour créer un thème enfant :

• Créer un autre répertoire  dans wp-content/themes/, portant le nom du thème parent et suffixé par -child. Dans notre cas : wp-content/themes/twentynineteen-child/
• Placer trois fichiers dans ce répertoire : functions.php, style.css, screenshot.png

Ce fichier doit contenir à minima l’enregistrement du fichier de style style.css sur le hook wp_enqueue_scripts. En effet, c’est le fichier de style qui défini le nom du thème parent comme expliqué par la suite.

À noter que la fonction get_template_directory_uri() retourne le chemin vers le thème parent.

Il est interprété systématiquement par WordPress, ce qui en fait le candidat idéal pour y ajouter tout le code spécifique dont vous aurez besoin, sous la forme d’enregistrements de fonctions sur des hooks, soit des filters, soit des actions.

L’entête contenu dans ce fichier doit contenir à minima le champ Template, avec la même valeur que celui du thème parent : twentynineteen

Vous pouvez y placer tous les styles CSS nécessaires.

D’autres emplacements peuvent également être utilisés pour y placer du CSS de manière plus accessible, comme la section CSS additionnel de la personnalisation du thème.

Ce fichier est facultatif. Il sert essentiellement à illustrer le thème enfant dans la liste des thèmes à activer, et à le différencier de son parent.

Il est possible de simplement reprendre le fichier screenshot.png présent dans le thème parent et le personnaliser un peu.

Par exemple :

Dans WordPress, le thème Avada est situé dans : wp-content/themes/Avada/

Avada fournit une base de thème enfant lors de son achat, ce qui simplifie fortement largement sa mise en place.

Voici tout de même les étapes pour créer son thème enfant :

• Créer un répertoire wp-content/themes/Avada-Child-Theme/ dans wp-content/themes/
• Placer trois fichiers dans ce répertoire : functions.php, style.css, screenshot.png

Ce fichier contient l’enregistrement du fichier de style style.css sur le hook wp_enqueue_scripts.

À remarquer la différence avec la création d’un thème enfant sur Twenty Nineteen, puisque dans ce cas c’est la fonction get_stylesheet_directory_uri() au lieu de get_template_directory_uri() qui est utilisé et qui retourne le chemin vers le thème enfant. La logique utilisée par Avada n’est donc pas la même. C’est la raison pour laquelle j’ai choisi de présenter deux exemples. Il peut être interessant de se rappeler cette différence si vous êtes amené à définir un thème enfant et que vous rencontrez des difficulté pour le faire fonctionner.
Penser à tester les deux approches lors de l’enregistrement du fichier de style :

• Soit en le pointant dans le thème enfant
• Soit en le pointant dans le thème parent

Une autre particularité d’Avada est qu’il définit le textdomain utilisé par le thème enfant comme le même que le parent, afin de simplifier les traductions. Cette astuce peut également être utilisé pour d’autres thèmes.

L’entête contenu dans ce fichier doit contenir à minima le champ Template, avec la même valeur que celui du thème parent : Avada

Vous pouvez y placer tous les styles CSS nécessaires.

Avada fournit également un autre emplacement afin de placer du CSS de manière plus accessible, dans sa partie options globales.

Voici le fichier screenshot.jpg fournit par Avada :