Tous ceux qui débutent avec Divi (ou plus généralement WordPress), se sont un jour posé la question de savoir ce qu’était un thème enfant et s’ils en avaient besoin.
Divi étant déjà très complet “out of the box”, en quoi un thème enfant serait utile ? Et si tel est le cas, comment lui en ajouter un ?
Vous voulez connaitre les réponses à ces questions ? Alors, continuez votre lecture…

C’est quoi un thème enfant ?

Un thème enfant est composé au minimum de 2 fichiers qui viennent s’ajouter en supplément du thème parent (Divi en ce qui nous concerne).
Là, vous être en train de vous dire : “J’ai déjà un thème avec Divi, pourquoi j’en ajouterais un second ?”.
Judicieuse remarque ! En fait, le thème enfant hérite des fonctionnalités de son parent et permet de “faire tampon” si on souhaite apporter des modifications au thème parent ; celles-ci seront ainsi écrites au niveau de l’enfant et si le parent subit une mise à jour, les changements apportés ne seront pas perdus.

J’en profite pour préciser (car j’ai déjà vu le cas), que “thème enfant” et “child theme” définissent la même chose (il s’agit juste de la traduction anglaise).

À quoi sert vraiment un thème enfant ?

Pour apporter des modifications au thème parent

Comme j’ai commencé à vous l’expliquer plus haut, la première raison qui nous fait utiliser un thème enfant est la possibilité de préserver les modifications qu’on apporte au thème parent.
Je parle ici de changements importants touchant à la structure du thème ou à une fonctionnalité qu’on souhaite modifier en profondeur… en résumé, tout ce qui n’est pas possible via les réglages natifs de Divi.

Par exemple, pour ajouter de nouveaux icones de réseaux sociaux à Divi, vous aurez besoin de modifier le fichier footer.php de WordPress qui contient le pied de page de votre site et est appelé sur toutes vos pages (sauf si vous avez choisi le template blank, évidemment).
Ainsi nous apporterons nos modifications sur la nouvelle occurence du fichier footer.php, rangé en sécurité dans notre thème enfant, bien à l’abri de toute mise à jour de son parent.

Là, vous allez me dire : “Et si la mise à jour du parent apporte une nouvelle fonctionnalité écrite dans le fichier footer.php, je ne pourrai pas en bénéficier ?“
Et bien oui, il est bien de prendre le temps de lire le changelog de Divi (le fichier qui récapitule les changements apportés à chaque mise à jour) pour vérifier les fichiers qui sont impactés. Et si besoin, il vous faudra refaire vos modifications à partir du nouveau fichier.

Pour apporter des modifications à WordPress ou à certaines extensions

Certains changements ne sont possibles qu’avec des hooks (actions et filtres) et nécessitent l’ajout de lignes de code en PHP.

Par exemple, si vous souhaitez modifier le nombre de caractères de l’excerpt (vous savez, ce petit texte qui s’affiche sur la page listant les articles de blog avant le fameux “Lire la suite”) ou encore apporter des changements sur les fiches produits de WooCommmerce (renommer les onglets, etc.)…
Ce ne sont que 2 exemples parmi les millions de possibilités offertes par les hooks.

Pour éditer facilement les CSS

Divi nous autorise à ajouter des CSS personnalisées dans les sections, lignes et modules ou encore dans les Options du thème ou les Paramètres de la page.
C’est bien, mais quand on commence à avoir plusieurs dizaines de lignes de code, on ne sait plus trop où on en est et ça devient vite le bazar.
Alors qu’en éditant le fichier style.css présent dans le thème enfant directement dans un éditeur de code, on peut profiter de toutes ses fonctionnalités.

Depuis février 2018, les champs de CSS personnalisées de Divi proposent quelques options comme la coloration syntaxique, l’autocomplétion (vous commencez par exemple à saisir “back…” et il vous suggère “background-color“, etc.), la gestion des erreurs… mais avec un véritable éditeur de code, vous bénéficierez par exemple de l’auto-indentation (les retraits de certaines lignes qui permettent d’améliorer la lisibilité du code) ou encore des diverses extensions disponibles pour votre IDE qui vous aideront à coder confortablement.

Pour la répétabilité

Si vous avez à créer régulièrement des sites, il est on ne peut plus confortable de posséder un petit package avec tout ce qu’il faut dedans, et que vous allez réutiliser de projet en projet comme base de travail.

Vous pouvez vous créer un thème enfant à votre nom, contenant un certain nombre de styles prédéfinis, voire quelques fonctions utiles.
Ainsi, vous gagnerez un temps non négligeable quand vous débuterez un nouveau projet, car vous n’aurez pas à réinventer la roue à chaque fois.

J’ai vraiment besoin d’un thème enfant ?

En ce qui me concerne, j’aime défendre le fait qu’on ne peut pas répondre catégoriquement à cette question. En réalité, tout dépend du niveau de personnalisation que vous voulez apporter à votre site.
Divi étant déjà très complet à l’origine, il est fort probable que ses fonctionnalités vous suffisent amplement pour le personnaliser à votre goût.

Mais… par expérience, arrive toujours le moment où on veut faire une modification supplémentaire (je reprends mon exemple des ajouts de nouveaux icones de réseaux sociaux à Divi), on se renseigne alors sur la manière de procéder et on s’aperçoit qu’elle n’est possible qu’avec un thème enfant… qu’à cela ne tienne, même si vous avez déjà personnalisé votre Divi, vous pouvez à tout moment lui ajouter un thème enfant, sans risque !

Par contre, soyez bien conscients qu’à l’inverse, si vous avez effectué des modifications par l’intermédiaire de votre thème enfant et que vous le désactivez, celles-ci ne seront plus appliquées à votre site Divi.

Comment faire un thème enfant ?

Un thème enfant est composé d’un dossier, que vous pouvez nommer comme bon vous semble, et qui est à déposer dans /wp-content/themes/ 
Puis, comme je l’ai précédemment évoqué, pour être fonctionnel, un thème enfant a besoin a minima de 2 fichiers :

• un fichier functions.php qui vous servira à déclarer votre thème enfant, sa feuille de styles, à ajouter des fonctions PHP…
• un fichier style.css qui contiendra les styles personnalisés que vous ajouterez à votre thème enfant

Le fichier functions.php

Pour déclarer votre thème enfant et cibler sa feuille de styles, ce fichier doit contenir les lignes suivantes :

<?php

function declarer_le_theme_enfant() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'declarer_le_theme_enfant' );

Notez la balise ouvrante <?php qu’il ne faut pas refermer.

Si vous souhaitez ajouter des appels de fichiers JavaScript, vous pouvez les inclure directement dans ce fichier (voir ligne 5 du code ci-dessous).

<?php

function declarer_le_theme_enfant() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_script( 'mon-fichier-js', get_stylesheet_directory_uri() . '/js/mon-fichier-javascript.js');
}
add_action( 'wp_enqueue_scripts', 'declarer_le_theme_enfant' );

Dans cet exemple, les fichiers JavaScript sont placés dans un dossier nommé js, lui-même situé dans le thème enfant.

Le fichier style.css

Pour être fonctionnel, ce fichier doit impérativement contenir une en-tête avec au minimum les 2 informations suivantes :

• le nom du thème enfant
• le nom du répertoire du thème parent

/*
Theme Name: Mon theme enfant
Template: Divi
*/

Mais vous pouvez ajouter d’autres précisions comme sa description, le nom de l’auteur, une url… voir la liste complète ici.
Voici par exemple l’en-tête du thème enfant de Divi Community.

/*
Theme Name: Divi Community Child Theme
Description: Theme enfant de Divi par Divi Community
Author: Julien - WebMate
Author URI: http://www.divi-community.fr
Template: Divi
Version: 1.1
*/

Le petit plus : le screenshot

Vous pouvez attribuer un visuel à votre thème enfant pour illustrer la manière dont il s’affiche dans l’administration de WordPress (Apparence -> Thèmes).
Pour ce faire, il vous suffit d’ajouter dans le dossier de votre thème enfant une image de 1200 x 900 px, de préférence en PNG (mais le JPEG et le GIF sont également autorisés).

Existe-t’il des thèmes enfants prêts à l’emploi ?

Tout à fait, vous pouvez trouver 2 types de thèmes enfants sur le web.

Les thèmes enfants vierges

Parfaits pour démarrer si vous ne souhaitez pas créer vous-même votre thème enfant, ils sont prêts à l’emploi.
Il existe divers générateurs en lignes, par exemple sur WP Marmite, sur Divi Space, sur Divi Cake…

Et vous pouvez également télécharger gratuitement notre thème enfant Divi Community qui embarque quelques fonctionnalités utiles.

Les thèmes enfants personnalisés

Ces thèmes enfants sont proposent généralement un design complet et sur-mesure pour différentes pages-types (accueil, blog, contact, etc.).
Ils sont soit multi-usages, soit ciblés sur une thématique particulière avec les fonctionnalités appropriées : un secteur d’activité, la promotion d’un événement, de la vente immobilière ou automobile, un e-shop, etc.

Étant donné la masse de travail que représente le développement de ces thèmes enfants, ils sont généralement payants.
Voici quelques vendeurs de thèmes enfants de qualité : Superfly, DiviCake, Aspen Grove Studios, B3 Multimedia…

Mais, en cherchant bien vous pourrez en trouver quelques-uns qui soient gratuits, par exemple chez Divi Life, Love Divi ou encore Divi Space…

Attention cependant à ne pas confondre thèmes enfants personnalisés et layouts !
Ces derniers étant de simples mises en pages à importer dans une section ou une page, ils ne proposent pas le même niveau de personnalisation et n’impactent pas les styles du menu, du footer, etc.

Je vous invite à lire notre article sur l’import/export de layouts dans Divi.

Comment installer un thème enfant ?

Et bien, si vous avez su installer Divi, vous saurez lui adjoindre un thème enfant… 😉

Dans l’administration de WordPress :

• Rendez-vous dans Apparence -> Thèmes
•  Cliquez sur le bouton Ajouter puis Téléverser un thème
• Choisissez et installez le ZIP de votre thème enfant
• Votre thème enfant apparait dans la liste des thèmes, aux côtés de Divi.
  Survolez sa vignette et cliquez sur Activer

Votre thème enfant devient le thème actif, néanmoins il ne faut surtout pas supprimer le thème Divi !
Par contre, vous pouvez sans souci effacer les autres thèmes installés par défaut avec WordPress.
Même si parfois il peut être utile d’en conserver un, dans le cas où, pendant la phase de développement, on rencontre une erreur et qu’on ait besoin de vérifier si c’est le thème qui est en cause.

Le mot de la fin

J’espère qu’après la lecture de cet article, vous comprenez mieux le concept du thème enfant et son utilité.
Une fois encore, j’aime dire que l’utilisation d’un thème enfant n’a pas besoin d’être systématique, car tout dépend de votre manière d’utiliser Divi.
Bien sûr, si vous évoluez dans un contexte professionnel, un thème enfant est indispensable.

Partager