Créer un thème enfant sur WordPress

Un thème enfant ? Qu’est-ce que c’est ?

Il paraît essentiel de commencer par expliquer ce qu’est un thème enfant pour en comprendre tout l’intérêt. Un thème enfant sur WordPress est un thème basé sur un autre. On le qualifie d’enfant car il va hériter de l’ensemble des fonctionnalités et mises en page de son thème parent. L’avantage principal d’utiliser un thème enfant est que vous allez pouvoir modifier à volonté un thème existant tout en pouvant bénéficier de ses mises à jour. C’est tout simplement la méthode recommandée pour apporter des modifications à un thème.

Si vous souhaitez apporter des modifications sur un thème… Vous pouvez éditer directement les fichiers du thème en question afin d’y apporter toutes les modifications souhaitées ! Cela va fonctionner… Par contre, un gros problème va se présenter dès qu’une mise à jour sera disponible pour le thème en question. En effet, si vous effectuez la mise à jour, les fichiers que vous avez modifiés vont se mettre à jour et vous allez donc perdre votre personnalisation. Il faudra donc à nouveau effectuer vos changements… Cette solution n’est évidemment pas très pratique et vous risquez de tout simplement éviter toutes les mises à jour… Cette méthode trouve donc vite ses limites, puisque vous n’êtes pas sans savoir qu’il est essentiel de tenir à jour l’installation de WordPress, des extensions et des thèmes pour sécuriser au maximum votre site web.

Le fait de créer un thème enfant permet d’éviter le problème. En effet, vous pourrez apporter toutes sortes de modifications sur un thème sans risque de perdre votre travail en surchargeant les fichiers et les fonctions d’un thème parent par ceux d’un enfant.

Nous allons voir maintenant qu’il est très facile de mettre en œuvre cette solution.

Comment créer un thème enfant ?

Un thème enfant est composé à minima d’un dossier (celui contenant tous les fichiers du thème enfant) et de deux fichiers obligatoires.

La première étape est donc la création du dossier du thème enfant, qui sera placé dans wp-content/themes. Traditionnellement, le nom du dossier en question est le même que le thème parent auquel on ajoute le suffixe -child. Si vous le souhaitez, vous pouvez choisir un autre nom, mais attention à ne pas mettre d’espace ou de caractères spéciaux dans le nom.

Pour créer un thème enfant pour mytheme, je vais donc créer le dossier mytheme-child.

Il faut ensuite créer les fichiers functions.php et style.css dans le dossier du thème.

Le premier fichier « style.css »

Après avoir créé le fichier style.css dans le dossier de votre thème enfant, il est nécessaire d’ajouter le contenu suivant au début de votre fichier :

/* 
Theme Name:   My Theme Enfant 
Theme URI:    http://example.com/mytheme-child/ 
Description:  Enfant du theme My Theme 
Author:       Sheldon Cooper Author 
URI:   http://example.com 
Template:     mytheme 
Version:      1.0.0 
License:      GNU General Public License v2 or later License 
URI:  http://www.gnu.org/licenses/gpl-2.0.html 
Tags:         two-columns, responsive-layout Text Domain:  mytheme-child
*/

Dans cet exemple, toutes les informations que vous allez adapter à vos besoins n’ont pas la même importance. Certaines sont essentielles pour le bon fonctionnement du thème enfant, d’autres ne serviraient que pour une publication de votre thème ou son internationalisation.

Les deux éléments essentiels sont :

• Theme name qui correspond au nom du thème qui va s’afficher dans l’outil de gestion des thèmes de votre installation de WordPress.
• Template est le plus important puisqu’il correspond au nom du dossier du thème parent. C’est grâce à cette instruction, que WordPress saura quel est le thème auquel l’enfant se réfère. Dans l’exemple, mytheme est donc le thème sur lequel va se baser l’enfant.

Le second fichier « functions.php »

Si votre thème est déjà fonctionnel, il faut néanmoins veiller à demander à WordPress de charger les feuilles de style CSS du thème parent et du thème enfant.

Pour effectuer cette opération de mise en file d’attente des fichiers, il suffit d’ajouter le code suivant dans le fichier functions.php.

<?php 
// Attention, ne mettez aucun espace avant la commande <?php dans votre fichier !!

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

Il ne reste désormais plus qu’à activer votre thème enfant dans le le tableau de bord de votre installation de WordPress, dans Apparence / Thèmes.

Aller plus loin que la simple modification CSS…

Pour l’instant, vous pouvez juste modifier les styles CSS de votre thème parent grâce aux modifications apportées à votre thème enfant. Mais il est possible d’aller beaucoup plus loin dans la personnalisation.

Modifier les fichiers existants

Les thèmes sont composés de plusieurs fichiers php comme par exemple header.php, single.php, page.php, etc. Ces différents fichiers permettent de définir la structure et le contenu des différentes parties de votre interface graphique. Dès que vous allez créer dans votre thème enfant un fichier ayant le même nom qu’un fichier de votre thème parent alors ce dernier sera remplacé.

Pour l’exemple, admettons que vous souhaitiez modifier un élément du fichier single.php correspondant à l’affichage des articles. Pour cela, il suffit que vous fassiez une copie du fichier single.php de votre thème parent dans votre thème enfant. Vous pourrez alors faire toutes les modifications que vous souhaitez car c’est la copie qui sera utilisée pour la construction de vos pages.

Il est également possible d’inclure des fichiers dans le thème enfant qui ne sont pas prévus dans le thème parent. Pour cela, il faut se pencher un peu plus en détail sur la gestion des modèles de WordPress.

Ajouter des fonctions

Le fichier functions.php de votre thème enfant va se charger avant celui du parent. Ainsi, ce fichier vous permet de créer vos propres fonctions.

Si le thème parent ne prévoit pas la possibilité, de remplacer les fonctions dans les thèmes enfants, vous devez faire attention à avoir des noms de fonctions différents de ceux du thème parent.

Les thèmes parents autorisant le remplacement d’un fonctions par la même fonctions dans un thème enfant doivent anticiper avec le système suivant :

if (! function_exists ('fonction_speciale')) { 
       function fonction_speciale() {        
        // Le contenu de la fonction    
    }
}

La première ligne vérifie que la fonction n’existe pas avant de la déclarer. Ainsi si vous déclarer une fonction avec le même nom dans votre fichier functions.php c’est bien la votre qui sera utilisée et vous n’aurez pas d’erreur de conflit.

Sauf mention contraire*, l'article Créer un thème enfant sur WordPress et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.