Thème parent et thème enfant WordPress

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

Un thème de WordPress est un ensemble de fichiers contrôlant le design et les fonctionnalités d’un site WordPress. Mais la modification directe d’un thème a un impact sur sa mise à jour vers de nouvelles versions. Voici qu’entre alors en scène la notion de thème enfant. Nous allons détailler dans cet article ce que signifie exactement un thème parent et un thème enfant, quels sont les avantages à utiliser un thème enfant pour votre site WordPress et enfin comment créer vous-même un thème enfant.

Thème parent et thème enfant dans WordPress

Un thème enfant dans WordPress est un thème qui hérite du code et des fonctionnalités d’un autre thème WordPress, alors appelé le thème parent. Il offre la possibilité de personnaliser un thème existant sans pour autant y apporter de modifications directes. Il s’agit donc d’une surcouche sur laquelle travailler plutôt que de modifier le thème parent lui-même.

Toutes les personnalisations sont effectuées dans le thème enfant et tous les fichiers qu’il contient prennent le pas sur ceux du thème parent. Les fichiers de ce dernier ne sont pas écrasés mais bien surchargés. Donc s’il existe le même fichier dans les deux thèmes, celui du thème enfant contrôlera cet aspect du thème.

En utilisant un thème enfant, vos modifications sont mises à l’abri d’un écrasement par mise à jour. En effet, c’est uniquement le thème parent qui sera mis à niveau, et jamais le thème enfant. Or le parent n’ayant subi aucune modification, la personnalisation du thème sera parfaitement conservée.

Utiliser un thème enfant vous assure donc que toutes vos modifications seront préservées.

Avantages du thème enfant

Dans le passé, il n’existait pas de moyen aisé pour mettre à jour les thèmes WordPress sans perdre les modifications apportées. Or, lorsqu’une faille de sécurité était découverte dans un script largement utilisé dans les thèmes populaires, le webmaster se retrouvait devant un choix cornélien. Perdre toute la personnalisation en mettant le thème à jour pour sécuriser le site, ou bien risquer le piratage du site en ne faisant pas la mise à niveau.

C’est pourquoi l’équipe de WordPress et sa communauté décidèrent de résoudre ce dilemme en introduisant le concept de thème parent et de thème enfant. Cela permet désormais aux utilisateurs de modifier le style du parent et de lui ajouter ou de modifier des fonctionnalités sans pour autant perdre la capacité de mettre à jour le thème parent.

Quels sont les avantages de l’utilisation privilégiée d’un thème enfant dans WordPress ?

Voici les principaux avantages à utiliser un thème enfant pour personnaliser le design de votre site :

1.Des mises à jour en toute sécurité : le thème parent n’est jamais impacté par les retouches apportées au design, puisque toutes les modifications sont enregistrées dans le thème enfant. Lorsqu’arrive une nouvelle version du thème parent, vous pouvez donc le mettre à jour en toute sécurité, sans perdre une seule ligne de code.

2. Facile à enrichir : un thème enfant possède une grande souplesse, et ne nécessite pas l’écriture de beaucoup de code. Seuls les fonctions et les fichiers de modèles (templates) impactés par vos personnalisations sont à modifier. De nouvelles fonctionnalités peuvent être apportées au thème parent. Utiliser un thème enfant réduit de plus le temps de développement.

3. La solution de repli (fallback) est déjà présente : lorsque vous créez un thème en entier, il est indispensable d’envisager tous les scénarios possibles et imaginables. Et il est ensuite nécessaire de tous les coder pour parer à toute éventualité. Cependant, lorsque vous travaillez sur un thème enfant et que vous oubliez de coder un scénario, la solution de repli existe puisque la fonctionnalité du thème parent est à priori déjà écrite et disponible.

4. Excellent apprentissage : cerise sur le gâteau, pour ceux qui souhaitent apprendre comment s’y prendre pour développer un thème WordPress, utiliser un thème enfant est une excellente façon de débuter cet apprentissage.

Comment créer un thème enfant ?

Un thème enfant est composé fondamentalement :

  • de son propre répertoire,
  • du fichier style.css,
  • du fichier functions.php.

Répertoire

La première chose à faire pour créer un thème enfant est donc de créer son propre répertoire dans le dossier wp-content/themes. La règle de nommage recommandée mais nullement obligatoire est de suffixer le nom du répertoire par –child. Par contre, veillez bien à ce qu’il ne comporte aucun espace. Par exemple, pour un thème parent nommé Mon Thème Préféré, présent dans le répertoire monthemeprefere, nous pourrions nommer le répertoire du thème enfant monthemeprefere-child.Créer un thème enfant WordPressFichier des styles

La seconde chose à faire est de créer dans ce répertoire le fichier des styles CSS. Ce fichier doit impérativement comporter un en-tête qui permettra à WordPress de savoir de quoi il s’agit.

Commencez donc par créer un fichier style.css à l’intérieur de monthemeprefere-child.Fichiers à créer à l'intérieur du child themeComplétez ensuite ce fichier de l’en-tête suivant :

/*
Theme Name: Theme enfant
Description: Thème enfant de Mon Thème Préféré
Author: nom de l’auteur
Author URI: https://www.url-de-l-auteur-du-theme-enfant
Template: mon-theme-prefere
Version: 1.0
*/

Expliquons ces quelques lignes de code du fichier style.css :

  • Theme Name : il s’agit du nom du thème enfant que vous créez
  • Description : il s’agit de la description du thème enfant
  • Author : il s’agit de l’auteur du thème enfant, vous dans le cas présent
  • Author URI : il s’agit de l’url du site de l’auteur
  • Template : il s’agit du nom du répertoire du thème parent (et donc ne comporte aucun espace). Il est nécessaire de respecter la casse.
  • Version : il s’agit de la version du thème enfant (à titre indicatif)

Nota bene :

  • En anglais américain, contrairement au français, on ne met pas d’espace avant le signe de ponctuation « deux points : ». Pour que le thème enfant fonctionne, il ne faut donc mettre aucun espace entre les libellés (Theme Name, Description, Author, etc.) et le signe de ponctuation.
  • Vous pouvez personnaliser votre thème enfant en y ajoutant un visuel miniature personnalisé, sous la forme d’un fichier nommé screenshot.jpg d’une taille recommandée de 600×450 px, qui s’affichera dans le gestionnaire de thèmes.

Fichier des fonctions

La troisième étape consiste à créer un fichier functions.php dans le répertoire du thème enfant, afin de mettre en file d’attente la feuille de style du thème parent. Pour cela, la fonction native WordPress wp_enqueue_style() sera utilisée.

Exemple d’encapsulation des styles dans le fichier functions.php :

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

Expliquons maintenant ces quelques lignes de code :

  • S’agissant d’un fichier de type PHP, le code qu’il contient doit se trouver à l’intérieur des balises d’ouverture et de fermeture <?php et ?>,
  • Ajout dans la file d’attente wp_enqueue_script d’une fonction nommée ici arbitrairement ‘mon-theme-enfant_enqueue_styles’
  • Définition de cette fonction ‘mon-theme-enfant_enqueue_styles’ qui utilise la fonction wp_enqueue_style() pour indiquer quel fichier doit être mis en file d’attente.

Le thème enfant est désormais fonctionnel. Pour l’activer, il faut vous connecter au tableau de bord de l’administration du site. Naviguez dans Apparence > Thèmes. En toute logique, le thème enfant s’y trouve et il vous suffit de cliquer sur le bouton Activer.

Activation du thème enfant WordPress

Après cela, vous devrez peut-être redéfinir le menu dans Apparence > Menus ainsi que les options de thème.

Vous pouvez désormais modifier le style CSS de votre site et ajouter des fonctionnalités respectivement dans les fichiers style.css et functions.php du thème enfant. Pour ce dernier, il est utile de garder à l’esprit que le fichier functions.php du thème parent est chargé en dernier et conserve la priorité en cas de fonctions aux noms identiques présentes à la fois dans le parent et l’enfant.

Fichiers de modèle

Si vous souhaitez apporter des modifications plus profondes à votre thème parent, vous pouvez écraser n’importe lequel de ces fichiers. Pour cela, la procédure est d’inclure dans le répertoire du thème enfant un fichier portant le même nom que le fichier à écraser du thème parent.

Par exemple, pour modifier le code du pied-de-page du site, il vous faut inclure un fichier footer.php dans le répertoire du thème enfant. Il sera alors utilisé au chargement du site, en lieu et place du fichier footer.php existant dans le thème parent.

Il est également possible d’étendre le thème et d’inclure dans le thème enfant des fichiers qui n’existent pas du tout dans le thème parent. Cela peut servir par exemple à concevoir un modèle de page différent et plus spécifique que ceux proposés dans le thème parent.

En conclusion

Vous connaissez désormais tout de la différence entre thème parent et thème enfant dans WordPress, en maîtrisez les avantages et les inconvénients et êtes parfaitement capable de créer votre propre thème enfant.

Il existe des plugins pour faire ceci à votre place, mais étant la simplicité « enfantine » du processus, il serait dommage de surcharger votre site avec un plugin supplémentaire dont vous pouvez aisément vous affranchir, n’est-ce pas ?

Plus d'articles
Comment installer Wordpress tutoriel
3 méthodes pour installer WordPress