WordPress : Comment créer un thème enfant ?

I. Présentation

Lorsque l'on sélectionne son thème WordPress pour démarrer un nouveau projet ou changer le design d'un site existant, se pose forcément la question du choix du thème. Il est très important car c'est lui qui va définir le design du site et le layout global.

Les thèmes sont bien souvent mis à jour régulièrement par leurs auteurs, ce qui implique que vous allez écraser les fichiers existants du thème par ceux de la nouvelle version. Sauf que, il est bien souvent utile de modifier les fichiers du thème, notamment le design via le CSS ou encore des fonctions PHP pour ajouter des actions WordPress via le fichier functions.php. Il y a donc un problème... Mais rassurez-vous la solution existe !

Nous allons devoir créer ce que l'on appelle un thème enfant, c'est-à-dire un nouveau thème rattaché directement à un thème parent, qui sera le thème que vous vouliez utiliser. Dans le répertoire du thème enfant, on se contentera de créer un fichier CSS et un fichier functions.php, ces deux fichiers viendront compléter ceux existant dans le répertoire du thème parent.

De cette manière, vous pourrez continuer à mettre à jour votre thème, sans perdre vos ajouts. Voyons comment procéder.

II. Procédure : thème enfant WordPress

Nous partons du principe où le répertoire de stockage des thèmes est celui par défaut, à savoir "wordpress/wp-content/themes" et que le thème que nous souhaitons utiliser ce nomme "mon-theme-2017".

Commençons par se déplacer dans le dossier des thèmes :

wordpress/wp-content/themes/

Puis on va créer un nouveau dossier dans le répertoire "themes", en reprenant le nom du thème existant suivit de la mention "-child" :

mkdir mon-theme-2017-child

Créons maintenant le fichier functions.php :

touch functions.php

Editez-le ensuite et ajoutez le contenu suivant :

<?php
/** Activation du theme **/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Enregistrez et fermez ce fichier, nous allons passer à la création du fichier style.css :

touch style.css

Et voici le contenu du fichier CSS qu'il faut ajouter et adapter :

/*
Theme Name: Mon theme 2017 (Child)
Description: Ceci est le theme enfant de Mon theme 2017
Author: Florian, IT-Connect
Author URI: https://www.it-connect.fr
Template: mon-theme-2017
Version: 0.1
*/

Le code ci-dessus est obligatoire, voici comment remplir les différentes lignes :

  • Theme Name : Le nom de votre thème enfant
  • Description : Une description pour votre thème enfant, je vous recommande d'y mentionner le nom du thème parent
  • Author : L'auteur du thème enfant
  • Author URI : L'URL vers le thème parent, pour ne pas oublier les origines de votre thème 🙂
  • Template : Le nom exact du dossier de votre thème parent (en respectant la casse)
  • Version : Un numéro de version pour votre thème enfant

Il ne vous reste plus qu'à retourner dans le back-office de WordPress, dans la section "Apparences" puis "Thèmes" : votre thème enfant  apparaît dans la liste des thèmes, comme tout autre thème, il ne vous reste plus qu'à l'activer ! Pour la petite astuce, vous pouvez ajouter dans le dossier de votre thème enfant un fichier "screenshot.jpg", de préférence de dimensions 600 x 450 px, qui sera utilisée comme vignette pour le thème enfant.

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian BURNEL

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

Nombre de posts de cet auteur : 5471.Voir tous les posts

Laisser un commentaire

Votre adresse e-mail 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.