Un thème enfant est un thème reprenant toutes les fonctionnalités d’un thème existant, qu’on appelera « thème parent ».

Pourquoi créer un thème enfant ?

Les thèmes WordPress disponibles offrent déjà un large choix d’options pour les personnaliser. Mais, par exemple, disons que vous voulez modifier la couleur d’un ou plusieurs éléments, ou encore, rajouter une web font.

Afin d’effectuer ces modifications, le premier réflexe est de modifier le fichier style.css du thème. Mais cette solution présente un problème, toute mise à jour du thème modifié écrasera nos ajustements… On pourrait se dire qu’il n’y a qu’à ne pas faire cette mise à jour. Mais là encore, c’est un soucis, car certains thèmes complexes peuvent présenter des failles de sécurité.

En utilisant un thème enfant, on est donc assuré de disposer de la dernière version de notre thème, tout en gardant nos propres modifications.

Comment créer un thème enfant ?

Les fichiers d’un thème enfant se placent au même endroit qu’un thème « normal », c’est-à-dire dans le dossier wp-content/themes de votre répertoire d’installation de WordPress.

Un thème enfant doit contenir au moins deux fichiers : style.css et functions.php.

Fichier style.css

Le fichier style.css doit commencer par un entête (placé dans un commentaire) précisant différentes informations comme le nom du thème, son auteur… et surtout le thème parent.Plus de détail sur le Codex WordPress.

Voici l’entête (avec des commentaires ajoutés) utlisé dans mon thème actuel, qui est un thème enfant de « Twenty Eleven » :

/*
Theme Name:     GeekEleven    <- nom du thème
Description:    Thème WordPress proche de celui de mon site.    <- description qui sera affichée dans le détail du thème
Author:         GeekCommunicant    <- nom de l'auteur
Author URI:     https://geekcommunicant.com/    <- adresse du site de l'auteur
Template:       twentyeleven    <- nom du dossier contenant les fichiers du thème parent
Version:	1.0    <- numéro de version
*/

Après cet entête vous pouvez alors placer vos styles pour personnaliser encore plus votre thème.

Fichier functions.php

C’est le fichier functions.php qui va permettre l’import (ou plutôt la mise en file d’attente, d’après la documentation WordPress) du ou des fichier(s) CSS dont notre thème enfant a besoin.

La mise en attente d’une feuille de style se fait par la fonction wp_enqueue_style().

Afin de s’assurer que notre fichier CSS soit chargé en dernier (et donc bénéficie de la priorité), il faut s’assurer de placer d’abord en file d’attente les fichiers externes (du thème parent, et éventuellement pour les webfonts).

Ces différentes mises en file d’attente se font dans une fonction, qui sera alors « hookée » sur l’action wp_enqueue_scripts, avec la fonction add_action().

Voici sans attendre le contenu de mon fichier functions.php :

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'twentyeleven-style', get_template_directory_uri() . '/style.css' ); // le style de mon thème parent (dont l'url est récupérée via la fonction get_template_directory)
   	
	wp_enqueue_style( 'web-font', 'https://fonts.googleapis.com/css?family=Nova+Square' ); // style pour la web-font utilisée par mon thème
    
	wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css', // l'url de mon style enfant est récupérée via la fonction get_stylesheet_directory_uri
        array( 'twentyeleven-style', 'web-font' ), // array permettant de préciser l'ordre des dépendances de mon thème enfant
        wp_get_theme()->get('Version')
    );
}

Infos complémentaires

Ancienne méthode

La méthode d’inclusion des feuilles de style du thème parent présentée ici est la méthode actuelle et recommandée.

Précédemment, la méthode était d’utiliser la règle CSS @import au début de la feuille de style du thème enfant. Mais cette technique peut ralentir les performances de vos pages sur certains navigateurs (voir l’article « Link ou import » sur Alsacreations).

Écrasement des fichiers du parent

Si dans le répertoire de votre thème enfant vous placez un fichier portant le même nom qu’un fichier présent dans le thème parent (par exemple header.php ou page.php, c’est le fichier de votre thème qui sera utilisé.

Autre utilité du fichier functions.php

Contrairement aux fichiers de template, le fichier functions.php du thème parent est conservé et chargé après celui de votre thème enfant.

Cela permet donc d’ajouter des fonctionnalités sans casser celles du parent.

J’espère que cet article vous aura été utile, et peut-être donné envie de créer vos propres thèmes enfants.