La customisation poussée d’un thème, que ce soit le thème Divi ou bien un autre thème WordPress, passe impérativement par la création d’un thème enfant.

Bien-sûr qu’on peut utiliser des plugins pour ajouter du code sans avoir à créer de thème enfant ou bien des plugins pour créer des thèmes enfant en un clic.

Il existe même des générateurs qui peuvent le faire pour vous mais je vous déconseille toutes ces options…

Pourquoi ne pas créer vous-même votre thème enfant pour Divi ? C’est tellement simple !

Découvrez tout ce que vous pouvez faire avec le thème Divi ici !

 

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

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

Un thème enfant est un «thème satellite» qui dépend d’un thème parent et qui permet d’effectuer des retouches et des modifications sans en impacter le thème initial (le thème Divi). Un thème enfant hérite des fonctionnalités d’un thème parent et prime sur celui-ci, c’est à dire que tous les styles CSS que vous saisirez seront pris en compte à la place du thème parent.

Un thème enfant est indispensable si l’on veut effectuer des modifications sur un thème parent afin que celles-ci soient conservées lors des mises à jour du thème parent.

Créer un thème enfant pour Divi protège votre thème initial, vous pourrez ainsi copier dans le thème enfant des fichiers utilisés par le thème parent, afin de les modifier sans craintes. Il n’y a que des avantages à utiliser un thème enfant.

La création d’un thème enfant n’est pas compliquée, toutefois vous pourrez vous aider du codex de WordPress si besoin.

Pour construire un thème enfant, vous aurez besoin :

  • d’un éditeur de texte
  • du thème Divi
  • de créer un fichier style.css
  • de créer un fichier functions.php

 

Bonne nouvelle ! Vous pouvez télécharger votre thème enfant gratuitement sur la boutique de Astuces Divi !

 

2 – Création du fichier functions.php

Si vous n’en possédez pas déjà un, téléchargez un éditeur de texte tel que Bracket ou SublimText. Ensuite, vous allez pouvoir commencer à créer votre premier fichier => le fichier functions.php :

  • Ouvrez Sublim Text (par exemple) et allez à File > New File File - New File
  • Dans ce fichier saisissez simplement ces quelques lignes :
    <?php 
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    }

    Code à insérer dans le fichier functions du thème enfant pour Divi

  • Enregistrez ce fichier sur votre bureau (desktop) en allant à File > Save As File - Save As
  • Nommez ce fichier functions.php, tout en minuscule, puis cliquez sur Save nomage fichier functions php
  • L’application SublimText peut vous envoyer une notification : confirmez en cliquant sur Use .php use php

 

3 – Création du fichier style.css

Toujours à l’aide d’un éditeur de texte comme SublimText, vous allez pouvoir créer le deuxième fichier nécessaire à la conception du thème enfant pour Divi, il s’agit du fichier style.css. Ce fichier est obligatoire, tout comme le fichier functions.php, et c’est dans ce fichier que vous pourrez écrire toutes vos modifications et règles CSS.

Si vous êtes débutant en CSS et que vous avez besoin d’y voir plus clair, j’ai sélectionné pour vous le meilleur site – et je pèse mes mots – pour comprendre le CSS, il est facile, il n’y a pas de bla-bla et il est très pédagogique, il s’agit de LearLayout, n’hésitez pas y faire un tour.

Revenons à nos moutons, pour créer le fichier, voici ce que vous devez faire :

  • Ouvrez, dans SublimText, le fichier style.css contenu à la racine du thème Divi original. C’est dans ce fichier que vous trouverez les informations utiles pour créer votre thème enfant.
  • Repérez l’en-tête en début de fichier : ce sont les éléments inscrits entre /* et */ Entête fichier style-css du thème Divi
  • Sélectionnez ces éléments contenus dans l’en-tête et copiez-les (Ctrl+C).
  • Toujours dans SublimText, créez un nouveau fichier en allant dans le menu File > New File puis collez (Ctrl+V) l’entête du fichier style.css du thème Divi que vous venez de copiez.
  • Modifiez la ligne «Theme Name: Divi» en «Theme Name: Divi Child» (voir ligne 2 de la capture ci-dessous). Rajoutez une ligne appelée «Template: Divi» (voir ligne 3). Ne pas insérer d’espace entre le mot Template et les deux points qui suivent. Entête Divi Child
  • Vous pouvez ajouter l’URL de votre site, votre nom, modifier la description et supprimer éventuellement les lignes que vous jugeriez superflues.
  • Enregistrez ce fichier sur votre bureau (desktop) en allant à File > Save As (la même procédure que pour l’enregistrement du fichier functions.php).
  • Nommez ce fichier style.css, tout en minuscule, puis cliquez sur Save.

 

4 – Création du screenshot.png

Le screenshot.png est l’image qui illustre votre thème enfant dans la partie administration sous l’onglet Apparence > Thème. C’est une étape superflue mais c’est un petit «plus» qui apporte une valeur ajoutée à votre thème enfant, surtout si c’est pour l’un de vos clients.

  • Choisissez une image pour représenter votre thème enfant
  • Redimensionnez-la en 1200 pixels x 900 pixels (ou 600×450)
  • Enregistrez-la sous le nom de screenshot.png
Image pour illustrer le thème enfant pour Divi

Image pour illustrer le thème enfant pour Divi visible depuis l’onglet Apparence > Thèmes

 

5 – Création du dossier de thème enfant (répertoire du thème)

À présent, vous êtes en possession de 3 fichiers :

  • le fichier functions.php
  • le fichier style.css
  • le fichier screenshot.png

Vous allez pouvoir les réunir dans un dossier qui deviendra le dossier de votre thème enfant pour Divi.

  • Sur le bureau (desktop) de votre ordinateur, créez un nouveau dossier que vous nommerez «Divi-child».
  • Déplacez les 3 fichiers dans ce nouveau dossier.
  • Si besoin, compressez le dossier de votre thème enfant afin d’obtenir un dossier .zip (clic-droit > compresser).

 

6 – Envoi du thème enfant sur votre hébergement

Un thème enfant s’installe comme n’importe quel thème WordPress, je vous avais déjà expliqué comment installer le thème Divi, mais je vous propose une petite synthèse ici :

 

Option 1 : à l’aide de FilleZilla

Une fois le répertoire de votre thème enfant terminé et complet, vous n’aurez plus qu’à l’envoyer dans votre hébergement dans le dossier : www > wp-content > themes (ou public_html > wp-content > themes) à l’aide de Filezilla.

Attention : cette méthode nécessite l’envoi du dossier NON ZIPPÉ !

Une fois que votre dossier est présent sur votre serveur, vous pourrez l’activer depuis le back-office de WordPress à l’onglet Apparence > Thème. Veillez à ne pas supprimer le thème parent.

Dans ce dossier de thème enfant, vous pourrez ajouter autant de fichiers modifiés que nécessaire, cette étape est facultative et peut être effectuée ultérieurement.

 

Option 2 : directement depuis WordPress

Il existe une méthode plus facile pour envoyer votre dossier de thème enfant sur votre serveur : vous pouvez le faire directement depuis l’administration de votre site WordPress de la manière suivante :

Allez à l’onglet Apparence > Thème > Ajouter > Mettre un thème en ligne > Parcourir > puis choisissez le child thème pour Divi que vous venez de créer.

Attention, il s’agit bien du dossier.zip que vous devez envoyer. Celui qui a été compressé.

Un fois importé, activez-le sans supprimer le thème parent.
Quand vous aurez besoin d’ajouter des fichiers dans ce thème enfant, vous devrez alors passer par FTP (la méthode Filezilla).

 

En conclusion…

Et voilà, il vous aura fallu 10 minutes montre en main pour créer votre thème enfant pour Divi. Était-ce difficile ?

À présent, vous allez pouvoir partir sur de bonnes bases et ainsi customiser un max votre site ou votre blog. Vous avez les cartes en mains, il ne vous reste plus qu’à suivre les autres tutoriels disponibles sur ma rubrique « Personnaliser Divi ». Celle-ci devrait s’étoffer considérablement ces prochaines semaines/mois, alors n’hésitez pas à vous abonner afin d’être tenu(e) au courant des nouveautés sur le blog.

Téléchargez votre thème enfant gratuitement sur la boutique de Astuces Divi !

 

Comment créer un thème enfant pour Divi

Comment créer un thème enfant pour Divi ? Dites-le sur Pinterest !

 

Comment créer un thème enfant pour Divi ? Et comment s’en servir ?
4.6 pour 10 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This