Créer un thème enfant

Module 5: Thèmes et extensions · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez créer un thème enfant et vous saurez quand il vous en faut un, et quand non.

Notions clés : thème enfant, thème parent, Template: dans style.css, functions.php, wp_enqueue_style, remplacement de modèle, theme.json dans un enfant, Create Block Theme

Le problème que résout un thème enfant

Supposons que vous souhaitiez modifier légèrement l'en-tête de votre thème classique, et que pour cela vous modifiiez header.php dans le dossier du thème. Cela fonctionne. Trois semaines plus tard, une mise à jour du thème arrive, que vous laissez installer automatiquement (comme il se doit, voir leçon 7.2). La mise à jour remplace tous les fichiers du thème, et votre modification disparaît.

Un thème enfant est un petit thème qui indique : « utilisez tout ce qui vient de cet autre thème (le thème parent), sauf ce que j'ai moi-même défini ». Vous placez vos modifications dans le thème enfant. Vous continuez de mettre à jour normalement le thème parent, et vos modifications restent en place.

Quand c'est nécessaire, et quand non

Vous avez besoin d'un thème enfant si vous souhaitez modifier ou compléter des fichiers d'un thème :

• vous voulez modifier un modèle (pour un thème classique, un fichier PHP, pour un thème basé sur des blocs, un modèle HTML) ;
• vous voulez du CSS personnalisé trop volumineux pour le champ CSS ;
• vous voulez du code PHP personnalisé lié à la mise en forme (un format d'image supplémentaire, un emplacement de menu supplémentaire).

Vous n'avez pas besoin d'un thème enfant si :

• vous modifiez un thème basé sur des blocs dans l'Éditeur de site : ces modifications sont enregistrées dans la base de données et survivent à une mise à jour (leçon 5.1) ;
• vous ajoutez simplement un peu de CSS via CSS additionnel (dans l'Outil de personnalisation pour un thème classique, ou dans Styles de l'Éditeur de site) ;
• vous souhaitez ajouter une fonction qui n'a rien à voir avec la mise en forme (un formulaire, une connexion). Celle-ci doit se trouver dans une extension, afin qu'elle survive à un changement de thème.

Un thème enfant pour un thème classique

Un thème enfant est un dossier dans wp-content/themes/ contenant au moins un fichier : style.css. Supposons que votre thème parent se trouve dans wp-content/themes/theme-principal/. Créez alors un dossier wp-content/themes/theme-principal-child/ avec ce style.css :

/*
Theme Name:   Theme Principal Child
Template:     theme-principal
Description:  Personnalisations pour example.com
Version:      1.0.0
Text Domain:  theme-principal-child
*/

/* Votre propre CSS vient ci-dessous. */
.site-header { border-bottom: 3px solid #e8a33d; }

La ligne la plus importante est Template:. Elle contient le nom du dossier du thème parent (et non le nom affiché dans l'administration). Si elle n'est pas exacte (majuscules, tirets), WordPress signalera dans Apparence > Thèmes que le thème parent est manquant.

Vous créez également un fichier functions.php pour charger les feuilles de style. La manière correcte :

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'theme-principal-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Le fait que le thème parent charge lui-même sa propre feuille de style varie selon le thème. Consultez la documentation de votre thème parent ; certains vous demandent aussi de charger dans l'enfant la feuille de style du parent avec get_template_directory_uri() . '/style.css'. Si votre site s'affiche sans mise en forme après activation, c'est que la feuille de style du parent n'est pas chargée.

Si vous souhaitez modifier un modèle, copiez ce seul fichier (par exemple header.php) du parent vers votre enfant et modifiez la copie. WordPress consulte d'abord l'enfant, puis le parent. Ne copiez pas tous les fichiers : vous ne bénéficieriez alors plus des améliorations du parent.

Le functions.php de l'enfant ne remplace pas celui du parent, mais est chargé avant celui ci. Les deux sont exécutés.

Un thème enfant pour un thème basé sur des blocs

Pour un thème basé sur des blocs, le fonctionnement est identique, avec des fichiers de blocs :

• style.css avec le même en-tête et Template: ;
• theme.json propre : celui ci est fusionné avec celui du parent, vous n'y placez donc que ce que vous souhaitez modifier (par exemple la palette de couleurs) ;
• templates/ et parts/ qui remplacent ceux du parent.

Un functions.php n'est souvent pas nécessaire pour un thème basé sur des blocs, car WordPress charge lui-même les styles depuis theme.json.

Il existe une extension officielle, Create Block Theme, qui crée pour vous un thème enfant à partir de l'Éditeur de site, y compris vos modifications présentes dans la base de données. Pratique si vous avez modifié un thème basé sur des blocs et souhaitez consigner ces modifications dans des fichiers (par exemple pour les transférer vers un autre site).

Comment le mettre en place sur votre site

1. Créez le dossier et les fichiers sur votre propre ordinateur et vérifiez le nom du dossier du thème parent.
2. Téléversez le dossier vers wp-content/themes/ avec le Gestionnaire de fichiers ou via SFTP. Ou compressez le dossier en zip et téléversez le dans Apparence > Thèmes > Nouveau thème > Téléverser un thème.
3. Rendez-vous dans Apparence > Thèmes. Votre thème enfant y figure. Activez le.
4. Vérifiez votre site : les menus et widgets peuvent nécessiter d'être reliés à nouveau lors du passage à un enfant ; les réglages de l'Outil de personnalisation s'appliquent par thème, vous devez donc les redéfinir ou les exporter avec une extension.
5. Le thème parent doit rester en place. Ne le supprimez pas ; l'enfant ne fonctionne pas sans lui.

Faites cela de préférence d'abord sur un site de préproduction (staging) (leçon 8.3), car changer de thème sur un site en production fréquenté peut provoquer un peu de désordre temporaire.

Résumé

• Un thème enfant conserve vos modifications des fichiers du thème en dehors du thème parent, afin que les mises à jour ne les écrasent pas.
• Il n'est pas nécessaire pour des modifications dans l'Éditeur de site ou un peu de CSS additionnel ; les fonctions doivent se trouver dans une extension.
• Au minimum : un dossier avec style.css dans lequel Template: indique précisément le dossier du thème parent.
• Ne copiez que les modèles que vous modifiez réellement ; le functions.php de l'enfant s'ajoute à celui du parent.
• Le thème parent reste installé et continue d'être mis à jour.

Quiz

Exercice

Exercice A5.2 : vérifier votre thème enfant. Créez un thème enfant pour votre thème, sur votre site de test ou en préproduction (leçon 8.3), et activez le. Indiquez l'adresse du site et le nom du dossier du thème enfant. Le programme consulte wp-content/themes/<dossier>/style.css et vérifie : le fichier existe, un Theme Name: et un Template: y figurent, le style.css du parent situé dans ce dossier existe également, et la page d'accueil fait référence au thème enfant (il est donc actif).

Exercice D5.2 : qu'avez-vous modifié et pourquoi ? Notez quels fichiers se trouvent dans votre thème enfant, ce que vous avez modifié dans chaque fichier et pourquoi cela n'était pas possible dans l'Éditeur de site, dans CSS additionnel ou dans une extension. Cochez que le thème parent est toujours installé et qu'il bénéficie des mises à jour automatiques.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de WebOké ; dans d'autres panneaux, le fonctionnement est comparable.

• Guide DirectAdmin 11.1: Ouvrir le Gestionnaire de fichiers : les répertoires de votre hébergement
• Guide DirectAdmin 11.2: Charger et télécharger des fichiers
• Guide DirectAdmin 11.7: Connexion avec FileZilla (FTP, FTPS et SFTP)
• Child themes (developer.wordpress.org, en anglais) : https://developer.wordpress.org/themes/advanced-topics/child-themes/