Comment créer un thème enfant sur WordPress

Sommaire

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

Inutile de rappeler que tout site WordPress utilise un thème choisi par son créateur.

Un thème enfant est un thème qui fonctionne de pair avec un autre thème que l’on appelle « thème parent ». Il contient des instructions qui indique à WordPress qu’il s’agit d’un thème enfant, et quel est son thème parent.

Un thème enfant contient alors des instructions supplémentaires, qui visent soit à remplacer celles du thème parent, soit à l’augmenter en y ajoutant des instructions complémentaires.

Pourquoi utiliser un thème enfant ?

Un thème enfant permet d’ajouter des fonctionnalités au thème parent sans modifier les fichiers de celui-ci directement.

Cela permet notamment de:

  • Garder le thème parent intact sans en modifier les fichiers.
  • Garder vos modifications même si le thème parent est mis à jour par son auteur.
  • C’est une excellente manière pour apprendre la conception de thème WordPress.

L’utilisation d’un thème enfant est un moyen rapide et bien pensé afin d’apporter des améliorations à un thème déjà existant, mais dont il manquerait des fonctionnalités.

Comment créer un thème enfant WordPress ?

Pour créer un thème enfant fonctionnel vierge de toute modification, il faut trois éléments: un thème parent dont notre thème va hériter des fonctionnalités, un fichier de feuille de style et un fichier de fonctions. Voyons cela un peu plus en détail.

Etape 1 : Création du dossier

Imaginons que vous souhaitiez créer un thème enfant du tout dernier thème WordPress « Twenty Twenty-One ».

Vous remarquerez après l’avoir installé, un dossier nommé « twentytwentyone » situé dans « wp-content/themes » et qui contient les fichiers du thème.

A côté du dossier « twentytwentyone », créez un répertoire nommé « twentytwentyone-child » (child pour enfant), afin d’y placer les différents fichiers de votre thème enfant.

Etape 2 : La feuille de style

Dans le dossier de votre nouveau thème, créez un fichier nommé « style.css et inscrivez-y les lignes suivantes:

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://votresite.com/twenty-twenty-one-child/
 Description:  Twenty Twenty One Child Theme
 Author:       Votre Nom
 Author URI:   http://example.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-twenty-one-child
*/

Vous noterez qu’il ne faut pas ajouter d’espace devant le signe « : » comme nous pouvons le faire en français, car cela risquerait de poser certains problèmes.

Voyons la signification de chaque ligne:

  • Theme Name: Le nom du thème que vous donnez à votre thème enfant.
  • Thème URI: Un lien qui pointe vers la documentation et/ou le code de votre thème.
  • Description: La description qui apparaîtra dans le gestionnaire de thèmes WordPress.
  • Author: Le nom du créateur du thème, vous.
  • Author URI: Le site de l’auteur, en l’occurrence votre site.
  • Template: Le nom du dossier du thème parent. Attention à ne pas utiliser le nom du thème parent, mais bien son dossier, tout en respectant la casse.
  • Version: La version de votre thème enfant.
  • License: La licence du thème qui doit être GNU.
  • License: Lien qui pointe vers la description de la licence GNU.
  • Text domain: Utilisé pour l’internationalisation du thème.

Veuillez noter que seules les lignes suivantes sont obligatoires: « Theme Name », « Description », « Author », « Author URI », « Template » et « Version ». Sans les autres lignes, votre thème fonctionnera, mais il est recommandé par la documentation officielle de WordPress d’intégrer celles-ci également.

Lorsque le fichier de feuille de styles est complété correctement, sauvegardez-le. Passons à la dernière étape afin d’avoir un thème fonctionnel.

Etape 3 : Le fichier de fonctions

Pour terminer la création de votre thème enfant, créez un « functions.php » à côté du fichier « style.css ». Voici le contenu de votre dossier:

Contenu répertoire thème enfant WordPress

Afin que votre thème ait un minimum de style, nous allons importer dans celui-ci le style du thème parent.

Ouvrez le fichier « functions.php » que vous venez de créer et inscrivez-y ce code:

<?php
function mywebsos_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mywebsos_enqueue_styles' );

Sans trop rentrer dans les détails, étudions le fonctionnement de ce code.

Une fonction « mywebsos_enqueue_styles » est déclarée et est associée au hook WordPress « wp_enqueue_scripts ». Un hook est un moyen de modifier WordPress.

D’après la documentation officielle de WordPress: « wp_enqueue_scripts » est le hook approprié à utiliser lors de la mise en file d’attente des scripts et des styles qui sont censés apparaître sur le front end. Malgré son nom, il est utilisé pour mettre en file d’attente à la fois les scripts et les styles.

Pour faire plus simple, « wp_enqueue_scripts » permet de charger des feuilles de styles et des fichiers JavaScript dans le thème.

Grâce à « get_template_directory_uri() . ‘/style.css’ », le thème enfant récupère la feuille de style du thème parent.

A ce stade, vous pouvez activer le thème enfant dans votre administration WordPress dans « Apparence » -> « Thèmes » -> activez votre thème enfant.

Modèle de thème enfant WordPress à télécharger

Chez My Web SOS nous sommes toujours là pour vous aider et vous simplifier la vie. C’est pourquoi nous avons créé un modèle de thème enfant que vous pouvez télécharger. Vous aurez alors juste à modifier le fichier « style.css » afin de le faire correspondre à votre thème parent.

Pour conclure

Vous avez maintenant toutes les compétences nécessaires à la création de votre propre thème enfant. Également, vous connaissez la différence entre thème enfant et thème parent.

Cette pratique est très importante afin de pouvoir mettre à jour le thème parent de votre site sans écraser vos modifications. Vous pouvez être serein lorsque vous cliquez sur le bouton de « Mise à jour » du thème parent.

Chez My Web SOS, lorsque nous créons votre site internet, nous créons systématiquement un thème enfant afin d’avoir l’esprit tranquille.

Je lance mon activité sur internet