•  

WordPress : Tutoriel pour créer un thème enfant

tutoriel creer un theme enfant

On entend beaucoup parlé de thème enfant et vous êtes nombreux à vous posez des questions à propos de sa fonction et de son utilité.

Si vous avez envie de personnaliser votre thème WordPress il est impératif de créer un thème enfant pour ne pas perdre son travail en cas de mis à jour de votre thème.

En effet l’auteur d’un thème WordPress effectue généralement des modifications du code pour s’adapter au version de WordPress ou tout simplement pour corriger des bug ou faire des optimisations.

Il est conseillé de faire les mises à jour du thème à chaque fois qu’une nouvelle est disponible, dans ce cas si vous aviez touché aux fichiers brut du thème toutes vos modifications seront écrasées.

C’est quoi un thème parent ?

Avant de nous pencher sur la définition d’un thème enfant je pense préférable d’évoqué le thème parent.

Le thème parent nous l’utilisons tous, il est tout simplement le thème que vous utilisez pour votre site WordPress, qu’il soit un thème par défaut de WordPress comme twenty fifteen ou un thème téléchargé et installé.

Au moment ou vous activé votre thème dans votre panneau d’administration WordPress il devient le thème parent.


theme enfant theme parent wordpress


C’est quoi un thème enfant ?

Le thème enfant (Child thème en anglais) est en faite un thème qui une fois activé à la place de votre thème parent va devenir en quelque sorte votre thème principale tout en héritant des fichiers du thème parent.

Le thème parent et le thème enfant seront tout deux utilisés conjointement, les fichiers de votre thème enfant deviendrons prioritaire aux fichiers de votre thème parent.


theme enfant


Exemple :

Je souhaite modifier la couleur de fond du site, je vais modifier le fichier style.css de mon thème enfant, je vais entrer simplement une ligne de code dans mon fichier CSS :

#body {background-color:#DDDDDD;}

cette ligne apparaît également dans mon fichier style.css de mon thème parent :

#body {background-color:#FFFFFF;}

La ligne de mon fichier dans le thème parent ne sera donc plus prise en compte, seule la ligne de mon fichier css de mon thème enfant sera chargé. J’ai donc remplacé le fond de mon site blanc #FFFFFF par du gris #DDDDDD.

Le reste de mes lignes dans mon fichier CSS du thème parent seront chargées. Mon fichier CSS enfant a donc été lu avant le fichier css parent.

Seul les fichiers CSS sont lu simultanément depuis les thèmes enfant et parent, un fichier php modifié sera seulement lu depuis votre thème enfant, l’autre fichier php du thème parent deviendra obsolète.

Est-ce vraiment utile dans mon cas ?

Eh bien oui, si vous avez l’habitude de personnaliser le code de vos thèmes WordPress il est vraiment conseillé de créer un thème enfant.

Dans le cas ou vous voudriez juste modifier le design de votre site via le fichier style.css sans toucher aux fichiers PHP il est possible avec certains thème de passer par les options du thème, vous trouverez surement un champ de personnalisation du CSS, toutes vos modifications prendrons le dessus via une feuille de style indépendante. (voir ci-dessous)


additionnel css theme enfant


Si vous aviez déjà apporté beaucoup de modifications à votre thème parent avant de lire cet article, il est toujours possible pour vous de créer un thème enfant, il n’est jamais trop tard. Assurez vous via votre FTP d’envoyer vos fichiers modifiés du thème parent vers votre thème enfant, quelques indications comme les dates de dernières modifications vous aiderons à vérifier les fichiers auxquels vous aviez apporté des changements.

Dans l’autre cas, si vous ne touché jamais à vos fichiers il n’y aura aucune utilité à utiliser un thème enfant.

Comment créer un thème enfant ?

Un thème enfant contient au minimum 1 répertoire et 1 fichier pour fonctionner.

Le répertoire

Nous avons besoin de donner un nom à notre repertoire, ce nom sera le nom de votre thème enfant, je vous conseille de reprendre le nom de votre thème parent et d’y accoler -child.

Vous pouvez bien entendu mettre le nom que vous voulez mais attention veillez à ne pas mettre d’espace sinon vous obtiendrez une erreur.

Mon thème parent se nomme Beautyspot je vais nommer mon thème enfant Beautyspot-child pour les distinguer plus facilement.

Rendez-vous via votre FTP favori dans le répertoire thèmes de votre installation WordPress www/wp-content/thèmes/ nous allons donc rajouter un nouveau dossier nommer nomthemeparent-child


theme enfant dossier repertoire ftp


Dans ce nouveau répertoire nous allons créer un fichier style.css et un fichier function.php


theme enfant dossier themes filezilla


Le fichier style.css

Commençons par créer le fichier style.css, voici le code à coller dans ce fichier :

/*
Theme Name:     Beautyspot Child Theme
Theme URI:      creer-un-site.com
Description:    Ceci est le thème enfant du thème Beautyspot.
Author:         Brad Duck
Template:       Beautyspot
Version:        1.0
*/

/* Importation de la feuille de style du thème parent */
@import url("../beautyspot/style.css");

Dans ce fichier style.css 2 informations sont impératives pour importer la feuille de style du thème parent.

  • la ligne d’en têteTemplate: correspond au nom de votre thème WordPress parent, vous pouvez retrouvez cette ligne dans l’entête de votre fichier style.css du thème parent
  • la ligne @import url(« ../beautyspot/style.css »); correspond à l’adresse de votre fichier styles.css de votre thème parent

En dessous de la ligne @import url("../beautyspot/style.css"); vous pouvez ajouter le code CSS désiré.


capture theme enfant fichier css


Le fichier functions.php

Dans votre thème parent vous avez déjà un fichier functions.php qui contient les fonctions de votre thème, si vous voulez ajouter des fonctions il faut tout comme le fichier style.css créer un fichier functions.php dans votre répertoire thème enfant.

Il faut savoir que le fichier functions.php est lu différemment que le fichier style.css, en effet les fonctions que vous ajouterez au thème enfant ne remplace pas celle du thème parent. Toutes les fonctions sont donc lu est prise en compte, si une fonction enfant est identique à une fonction déjà présente dans le thème parent cette fonction ne remplacera pas l’autre, elles seront répétées.

Les autres fichiers php

Idem, si vous voulez apporter des modifications à un fichier PHP importer un copie du fichier du thème parent dans le thème enfant, ce coup ci les fichiers php du thème enfant remplacerons entièrement les fichiers du thème parent.

exemple :

Je souhaite ajouter un bout de code dans mon fichier sidebar.php, je vais copier et coller le fichier qui se trouve dans mon thème parent vers mon thème enfant et ajouter mon bout de code. Le fichier sidebar.php présent dans mon thème parent deviendra totalement obsolète.

Ajouter une illustration au thème enfant

Pour terminer je vous conseil d’illustrer le thème enfant dans votre gestionnaire de thèmes WordPress en ajoutant une image ou une capture d’écran tout simplement en la nommant screenshot.png dans le répertoire du thème enfant:


thumbnail theme enfant wordpress

Voilà nous avons fait le tour, je vous laisse le lien vers le codex WordPress Thème enfant qui peu toujours vous être utile.

Une question ? un avis ? une demande ? n'hésitez pas !