Créer un thème enfant pour DIVI en 5 minutes

Si vous cherchez à personnaliser votre site WordPress à votre image, cela passera sans doute par la customisation du thème que vous avez installé au préalable.

Dans notre exemple, nous nous baserons sur le thème DIVI.

Dès lors, il sera nécessaire pour vous d’installer un thème enfant pour DIVI pour garder intacts vos futures modifications.

Je vous rassure créer un thème enfant pour DIVI est très simple. Je vous laisse ce tutoriel pour en juger par vous même.

1. Qu’est ce qu’un thème enfant ? Pourquoi devoir en créer un ?

Un thème enfant est un thème qui va se baser sur son thème parent en utilisant toutes ses fonctionnalités.

Supposons que vous ayez installé le thème DIVI pour votre site WordPress. Vous ne comptez sans doute pas garder votre thème tel quel et vous cherchez peut-être à le customiser.

Ne serait que pour changer une couleur ou une police vous devrez modifier le CSS de votre thème. Si vous cherchez à ajouter une nouvelle fonctionnalité vous devrait modifier le fichier functions.php.

Le problème étant qu’à la prochaine mise à jour de DIVI vos modifications disparaîtront. Donc à moins de ne jamais mettre à jour son thème (ce qui n’est pas recommandé) vous ne pourrez pas garder vos customisations tels quels.

La solution pour garder ses modifications est toute simple : installer un thème enfant.

En effet, installer un thème enfant (DIVI-child) puis l’activer va vous permettre de customiser votre thème sans avoir à modifier votre thème parent. 

De cette manière, à chaque mise à jour de DIVI (votre thème parent) vos modifications resteront intactes.

2. De quoi aura t-on besoin pour créer son thème enfant ?

Pour ce tutoriel, nous allons constituer notre thème enfant à partir de trois éléments :

• votre thème parent (dans notre cas DIVI)
• un fichier functions.php
• un fichier style.css

C’est en rentrant du code dans le fichier functions.php que vous pourrez modifier certaines fonctionnalités de votre thème. La feuille de style, elle, sert à modifier l’apparence de vos pages web.

Par ailleurs, en plus de ces deux fichiers indispensables à votre thème enfant, vous pouvez rajouter un troisième fichier. Il s’agira du fichier screenshot.jpg. Ce dernier vous permettra de modifier l’image représentant votre thème enfant dans WordPress. 

Maintenant, pour créer les fichiers functions.php et style.css, nous nous aiderons de Brackets (un éditeur open source). 

Vous pouvez le télécharger gratuitement sur http://brackets.io/

Sur ce, passons au tutoriel !

3. La création du thème enfant : Divi-child

Pour commencer, créer un dossier et nommez le Divi-child

Etape 1 : Création du fichier functions.php

Avec Brackets, cliquez sur Fichier > Nouveau

Puis notez dans le fichier les lignes suivantes : 

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

Enfin enregistrez ce fichier dans votre dossier Divi-Child en cliquant sur Fichier > Enregistrer sous…

Nommez-le functions.php et Enregistrer le dans le dossier Divi-child.

Etape 2 : Création du fichier style.css

Toujours avec l’aide de Brackets, nous allons créer le deuxième fichier nécessaire pour votre thème enfant : le fichier style.css

Avec Brackets, cliquez sur Fichier > Nouveau

Puis coller dans le fichier les lignes suivantes :

/* 
Theme Name: Divi Child
Template: Divi
Description: Theme enfant Divi
Author: Pinroo
Author URI: https://www.pinroo.com/
*/

Enfin enregistrez ce fichier dans votre dossier Divi-Child en cliquant sur Fichier > Enregistrer sous…

Nommez-le style.css et Enregistrer le dans le dossier Divi-Child.

 Il est important de ne pas mettre d’espace avant les deux points.

Précision sur ces différents champs :

• Theme Name : Le nom de votre thème enfant 
• Template : Le nom de votre thème parent (nom du dossier qui contient votre thème parent)
• Description : La description de votre thème enfant quand vous cliquez sur le thème enfant dans votre gestionnaire de thème
• Author : La personne ayant créé le thème enfant
• Author URI : L’URL du site du créateur du thème enfant

Etape 3 : Création du fichier screenshot.jpg (optionnel)

Cette étape est optionnelle. Elle va simplement permettre d’ajouter une image représentant votre thème enfant dans votre gestionnaire de thème sur WordPress.

Pour cela, créer une image pour votre thème enfant de dimension 600×450 px

Nommez cette image screenshot.jpg et enregistrez la dans votre dossier Divi-Child.

Etape 4 : Création du dossier Divi Child sous format zip

À ce stade, votre dossier Divi-Child devrait contenir ces trois éléments.

Compressez le dossier Divi-child à l’aide du clic droit > Compresser “Divi-child” pour obtenir Divi-child sous format zip.

Etape 5 : Transfert du thème enfant vers WordPress

Il est temps maintenant de transférer votre thème enfant vers WordPress.

Dans votre panneau d’administration, allez dans Apparence > Thème.

Puis cliquez sur le bouton  Ajouter un thème

Cliquez ensuite sur le bouton Téléverser un thème

Puis dans Choisir un fichier sélectionner le fichier Divi-child.zip

Attention ! Il est important de bien choisir votre fichier sous format zip et non votre dossier initial.

Puis cliquez sur Installer maintenant.

Etape 6 : Activation du thème enfant

C’est la dernière étape.

Dans votre gestionnaire de thème, vous retrouverez donc à ce stade avec votre thème DIVI (thème parent) et Divi Child (votre thème enfant). Attention à bien garder le thème parent et pas le supprimer.

Il est maintenant temps d’activer votre thème enfant. 

Pour cela il ne vous restera plus qu’à survoler votre thème enfant puis cliquer sur le bouton Activer.

Votre thème enfant est maintenant activé.

Dès lors, toute modification de vos fichiers functions.php et style.css ne seront pas supprimé quand vous mettrez à jour DIVI.

4. Thème enfant DIVI à télécharger directement

Vous avez maintenant eu accès à toutes les étapes vous permettant de créer votre thème enfant. 

Vous voyez donc qu’il est très simple et très rapide d’en créer un. Il est donc inutile de télécharger un plugin qui vous générera automatiquement un thème enfant.

Maintenant si vous ne voulez pas passer par ces quelques étapes, pas de soucis ! 

Vous pouvez télécharger directement le dossier Divi-child sous format zip que j’utilise moi même pour Pinroo, en cliquant sur le lien ci-dessous. Il vous suffira de le personnaliser par la suite.

Soutenez Pinroo en partageant les

ÉPINGLES PINTEREST LIÉES À L’ARTICLE