Pourquoi et comment créer un thème enfant ?

Hugo Genin

Hugo Genin

 

1 octobre 2020
Thème enfant

Si vous ne savez pas ce qu’est un thème enfant, à quoi ça peut servir, et comment en créer un pour votre site WordPress vous êtes au bon endroit. Après avoir lu cet article les thèmes enfants n’auront plus de secrets pour vous et vous serez capable d’en créer un, avec ou sans extension.

Définition

Voici la définition d’un thème enfant issue de la documentation WordPress :

Un thème enfant WordPress est un thème qui hérite des fonctionnalités d’un autre thème, appelé thème parent. Le thème enfant est la méthode recommandée pour modifier un thème existant.

Un thème enfant, également appelé child theme, est donc un thème WordPress lié à un thème parent. Il est configuré pour indiquer à WordPress qui est son thème parent et hérite de toutes ses fonctionnalités.

Bon, maintenant qu’on sait ce qu’est un thème enfant, voyons à quoi ça peut servir.

Pourquoi créer un thème enfant ?

Selon le thème utilisé il est possible de paramétrer plus ou moins en profondeur le style et le comportement de votre site internet.

Par exemple avec Divi on peut paramétrer le style de l’en-tête, du pied de page, du module blog, du module boutique…

Divi

Pourquoi choisir le thème Divi ?
Présentation du thème Divi
et de son constructeur de pages

Le problème c’est que selon ce que vous souhaitez modifier, le thème ne propose pas toujours les options qui permettent de le faire. Il faut alors modifier le thème, et c’est à ce moment là qu’un thème enfant est utile.

Pour modifier un thème on peut y ajouter du CSS ou des fonctions. Il faut modifier son code. Mais si vous modifiez directement votre thème, les modifications que vous lui aurez apportées seront écrasées et donc perdues à la prochaine mise à jour. Et on le sait, il est indispensable de faire les mises à jour de WordPress, de ses extensions et de son thème. Donc pour remédier à ce problème il faut créer un thème enfant et effectuer les modifications dans celui-ci.

Il y a d’autres situations dans lesquelles un thème enfant est indispensable. Si par exemple vous utilisez une extension pour gérer des petites annonces, vous voudrez peut-être personnaliser les templates qui permettent d’afficher les annonces. C’est possible en faisant une copie du template et en modifiant cette copie. Mais encore une fois, étant donné que cette copie doit se trouver dans le dossier du thème, si vous n’utilisez pas un thème enfant vous perdrez tout votre travail.

Comment créer un thème enfant ?

Il y a deux méthodes pour créer un thème enfant : on peut le créer manuellement ou utiliser une extension. Nous allons voir en détail comment procéder.

Si vous ne souhaitez pas vous embêter, je vous propose de télécharger le thème enfant pour Divi que j’ai créé pour vous.

Manuellement

Pour créer manuellement un thème enfant vous aurez besoin :

  • D’un accès FTP à votre hébergement
  • D’un éditeur de texte (Notepad++, Sublime Text, ou celui de votre choix)

Un thème enfant a besoin de deux fichiers pour fonctionner :

  • Une feuille de style dans laquelle vous pourrez insérer du CSS
  • Un fichier de fonctions qui servira à ajouter ou modifier des fonctionnalités liées au design de votre site

Ces deux fichiers doivent se trouver dans un dossier qui porte le nom de votre thème. Dans notre exemple on va créer un thème enfant pour le site twal et on va nommer le dossier “twal-child”.

On commence donc par créer ce dossier sur notre ordinateur.

La feuille de style

Maintenant nous allons créer la feuille de style. Dans l’éditeur de texte de votre choix, créez un nouveau fichier, ajoutez y le code suivant, et enregistrez le dans le dossier créé précédemment en le nommant style.css :

Le rôle de ces quelques lignes commentées est de donner des indications sur votre thème à WordPress. Sans elles, WordPress ne saura pas qu’il s’agit d’un thème et ne saura pas à quel thème parent relier votre thème enfant.

Bien-sûr il va falloir personnaliser certaines lignes pour les adapter à votre thème. Nous allons détailler chaque ligne pour mieux comprendre leur utilité :

  • Theme Name : Indique le nom de votre thème. Il n’est pas nécessaire que le nom du thème soit identique au nom du dossier qui contiendra les fichiers du thème.
  • Theme URI : Il s’agit du lien où l’on peut trouver la documentation relative au thème. Étant donné qu’il s’agit d’un thème enfant créé par vous-même, vous pouvez simplement indiquer l’adresse de votre site.
  • Description : Description de votre thème.
  • Author : L’auteur du thème. Indiquez votre nom ou un pseudonyme.
  • Textdomain : Le Text Domain est utilisé dans les fonctions d’internationalisation. C’est en quelque sorte un identifiant unique lié à votre thème.
  • Author URI : Puisque l’auteur c’est vous, indiquez l’adresse de votre site internet.
  • Template : C’est la ligne la plus importante. Elle permet d’indiquer à WordPress le nom du dossier du thème parent. Dans le cas présent j’utilise le thème Divi et il est stocké dans /wp-content/themes/Divi.
  • Version : Le numéro de version de votre thème. Vous n’avez pas besoin de le modifier.
  • License : La licence utilisée. Ne pas modifier cette ligne.
  • License URI : Le lien vers les informations relatives à la licence. Ne pas modifier non plus.

Après avoir enregistré la feuille de style, vous pouvez créer le fichier de fonctions.

 Le fichier de fonctions

Le fichier de fonctions va servir à mettre en file d’attente la feuille de style du thème parent. Si vous ne le faites pas, aucun style ne sera chargé.

Toujours avec votre éditeur de texte préféré, créez un fichier, ajoutez y le code suivant, nommez le functions.php et enregistrez le dans le dossier de votre thème enfant :

Installer le thème enfant via FTP

Vous venez de créer le dossier de votre thème enfant et il contient deux fichiers.

Connectez-vous avec les identifiants FTP fournis par votre hébergeur et transférez ce dossier dans le dossier /wp-content/themes de votre site (vous pouvez uitliser FileZilla pour faire des transferts via FTP).

Il ne vous reste plus qu’à vous rendre dans le menu “Apparence > Thèmes” pour activer votre thème enfant et vérifier que tout fonctionne correctement.

Si vous souhaitez afficher une vignette pour votre nouveau thème vous pouvez copier/coller celle qui se trouve dans le dossier de votre theme parent ou en créer une nouvelle, la nommer screenshot.png et l’insérer dans le dossier du thème enfant. Les dimensions recommandées sont 1200px x 900px.

Installer le thème enfant depuis l’administration

Pour installer votre thème enfant depuis le panneau d’administration de votre site vous devez compresser le dossier de votre thème au format zip.

Ensuite, rendez-vous dans le menu “Apparence > Thèmes”, puis cliquez sur “Ajouter” et sur “Téléverser un thème”.

N’oubliez pas de l’activer après avoir terminé l’installation.

Avec une extension

L’extension Child Theme Configurator permet de créer automatiquement un thème enfant pour votre site.

Pour installer l’extension, rendez-vous dans le menu “Extensions > Ajouter”, entrez “Child Theme Configurator” dans le champ de recherche, cliquez sur “Installer maintenant” puis sur “Activer”.

Child Theme Configurator

Allez dans le menu “Outils > Thèmes enfants” et dans l’onglet Parent/enfant :

  • Sélectionnez “Créer un nouveau thème enfant”
  • Sélectionnez le thème parent
  • Cliquez sur “Analyser”
Child Theme Configurator

Après l’analyse du thème parent l’assistant vous propose plusieurs options. Commencez par donner un nom au répertoire du thème. Dans cet exemple j’ai choisi le même nom de dossier que lorsque j’ai créé le thème enfant manuellement un peu plus haut dans cet article.

Dossier

Pour les sections 5 et 6 vous pouvez laisser les réglages proposés par défaut. C’est dans la section 7 que vous allez pouvoir définir les attributs de votre thème enfant.

Attributs

Et enfin, cliquez sur “Create new child Theme”. Votre thème enfant est automatiquement créé et vous pouvez l’activer en passant par le menu “Apparence > Themes”.

Conclusion

Vous savez maintenant ce que sont les thèmes enfants et vous avez compris l’intérêt d’en utiliser un sur votre site. Après avoir créé le votre vous pourrez personnaliser votre thème sans le modifier directement.

Vous verrez que le fichier functions.php vous sera bien utile. Très souvent lors de vos recherches sur internet vous trouverez des bouts de code à insérer dans ce fichier pour modifier le comportement de votre site.

Si vous rencontrez des problèmes ou si vous avez des remarques à ce sujet, n’hésitez pas à commenter cet article.

Si cet article vous a plu, vous pouvez le partager sur vos réseaux sociaux.

Plus d'infos

Recevez la lettre d’information et soyez informé des dernières publications.

Hugo Genin

Salut ! Je suis Hugo Genin, freelance WordPress spécialiste Divi. Je partage avec vous des conseils pour créer votre site internet. Si vous avez des questions n’hésitez pas à me contacter ou à poster un commentaire.

Plus d'infos

Recevez la lettre d’information et soyez informé des dernières publications.

Ressources

Une sélection des meilleurs outils pour WordPress et divi.

Divi

Le thème premium et son constructeur de pages.

Commentaires

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *