[WordPress] – pourquoi et comment créer un thème enfant.

theme enfant wordpressPourquoi créer un thème enfant dans un projet wordpress ?

Si vous voulez traduire votre thème dans la langue principale du site (en Français par exemple) ou dans plusieurs langues, vous allez perdre tout votre travail à chaque mise à jour du thème.

De même, si vous voulez personnaliser le thème que vous utilisez en modifiant une partie de l’affichage de votre site. Ou bien, tout simplement en voulant adapter l’affichage de vos pages aux formats mobiles (tablettes, smartphone) ce qui est maintenant obligatoire afin d’obtenir un meilleur référencement. Vous allez encore tout perdre à chaque mise à jour du thème installé.

A moins de créer votre propre thème de A à Z (mais cela demande du temps et des compétences HTML/CSS/JS), je vous conseille vivement de créer un thème enfant afin déviter toutes ces déconvenues.

Comment créer un thème enfant dans son projet wordpress ?

Tout d’abord, ouvrez le dossier « themes » dans « wp-content » de votre site. Créez un dossier « Nom_du_theme-child » à l’intérieur de celui-ci.

architecture theme enfant

Dans l’exemple ci-dessus, on voit bien un dossier « hueman-child » inclus dans le dossier « themes » au même niveau que le thème utilisé « hueman ».

Une fois cette opération effectuée vous pouvez voir apparaître votre thème enfant dans l’administration de votre site en ouvrant la partie « apparence ». Par contre vous avez un message vous signalant que le thème créé doit avoir au minimum un fichier CSS (feuille de style) et un modèle.

Alors allons-y, créons notre feuille de style. Pour cela, ouvrez le fichier « style.css » dans le dossier du thème parent que vous voulez modifier. Dans mon exemple ci-dessus, j’ouvre le dossier « hueman » et récupère le fichier « style.css ». Supprimez tout le code et gardez simplement la partie cartouche décrivant le fichier. Modifiez chaque partie en fonction de votre thème enfant puis enregistrez le dans le dossier de votre thème enfant sous le nom « style ». Ci-dessous, le résultat avec mon thème « hueman-child ».

feuille style theme enfant

Attention dans la partie « Template:  » il faut bien noter le nom du répertoire de votre thème parent en respectant la casse sinon vous aurez un message dans l’administration de votre site vous demandant d’installer le théme parent introuvable.

Maintenant vous devez voir apparaître votre thème enfant dans l’administration de votre site.

Etape suivante, créez un fichier « functions.php » à la racine de votre thème enfant qui permettra de configurer et adapter votre nouveau thème. Recopiez intégralement la fonction du thème parent dans laquelle vous trouverez l’import de la feuille de style « style.css ». Je vous conseille vivement de toujours recopier entièrement la fonction sinon vous risquez de casser le bon fonctionnement du thème. Si vous voulez utiliser le style du thème parent sans modification utilisez la fonction « get_template_directory_uri() » qui renvoie le chemin du thème parent comme dans l’exemple ci-dessous :

import style dans theme enfant

Par contre, si vous voulez utilisez la feuille de style du thème enfant vous devez remplacer la fonction « get_template_directory_uri() » par « get_stylesheet_directory() » qui renvoie le chemin du thème enfant.

Dans l’exemple ci-après j’utilise cette fonction pour utiliser mes propres fichiers de traduction du thème :

fonctions langages thème enfant

Et voilà le tour est joué. Vous pouvez maintenant modifier ce que vous voulez dans le thème parent. Il suffit de copier et adapter les fichiers dans votre thème enfant en respectant bien l’architecture du thème initial.

Pour voir les changements n’oubliez pas de vider les caches. Cela permet de recharger les pages avec les nouveaux fichiers css.

A vous de jouer et donnez-moi vos retours.

Rémy MANDIT

Conseiller en insertion professionnelle et Concepteur développeur web. Passionné de l'image et du tir sportif.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Optimization WordPress Plugins & Solutions by W3 EDGE