Créer un thème enfant (child theme) pour votre thème WordPress
Si vous modifiez directement les fichiers d'un thème, votre travail disparaît à la prochaine mise à jour de ce thème. Un thème enfant (child theme) évite ce problème. Il s'agit d'un petit thème qui reprend tout d'un autre thème, le thème parent, sauf ce que vous y placez vous-même. Vous continuez à mettre à jour le thème parent comme d'habitude. Vous découvrirez ici quand un thème enfant est nécessaire et comment en créer un avec le Gestionnaire de fichiers de DirectAdmin.
En avez-vous besoin ?
| Vous souhaitez | Thème enfant nécessaire ? |
|---|---|
| Personnaliser un thème de blocs dans l'Éditeur de site (Apparence > Éditeur) : couleurs, polices, en-tête et pied de page | Non. Ces personnalisations sont enregistrées dans la base de données et sont conservées lors d'une mise à jour. |
| Ajouter quelques lignes de CSS | Non. Utilisez CSS additionnel dans l'Outil de personnalisation (thème classique) ou dans Styles de l'Éditeur de site. |
| Ajouter une fonctionnalité sans rapport avec la mise en page, comme une intégration ou un formulaire | Non. Elle a sa place dans une extension, afin de continuer à fonctionner après un changement de thème. |
| Modifier un fichier de modèle du thème, ajouter beaucoup de CSS personnalisé ou du code PHP lié à la mise en page | Oui. |
Vous utilisez un thème de blocs ? Essayez d'abord dans l'Éditeur de site. Si vous souhaitez enregistrer dans des fichiers les personnalisations faites dans l'Éditeur de site, l'extension officielle Create Block Theme peut créer un thème enfant pour vous.
Étape 1 : trouver le dossier de votre thème parent
- Dans DirectAdmin, ouvrez le Gestionnaire de fichiers. Voir Ouvrir le Gestionnaire de fichiers : les dossiers de votre hébergement.
- Rendez-vous dans
domains/example.com/public_html/wp-content/themes. - Notez le nom exact du dossier de votre thème, par exemple
hoofdthema. Il s'agit du nom du dossier, et non du nom affiché dans WordPress.
Étape 2 : créer le dossier et style.css
- Dans le dossier
themes, cliquez sur Nouveau dossier et créez par exemplehoofdthema-child. - Ouvrez ce dossier, cliquez sur Nouveau fichier et créez
style.css. - Faites un clic droit sur le fichier, choisissez Modifier, collez l'en-tête ci-dessous et cliquez sur Enregistrer.
/* Theme Name: Hoofdthema Child Template: hoofdthema Description: Eigen aanpassingen voor example.com Version: 1.0.0 */ /* Je eigen CSS komt hieronder. */
La ligne Template: est la plus importante. Elle doit contenir exactement le nom du dossier du thème parent, avec les mêmes majuscules et les mêmes tirets. Si ce n'est pas le cas, WordPress indique que le thème parent est manquant.
Étape 3 : functions.php ou theme.json
Thème classique : créez dans le même dossier un fichier functions.php qui charge votre feuille de style :
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'hoofdthema-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. Si votre site semble dépouillé après l'activation, vous devez également charger la feuille de style du parent, avec get_template_directory_uri() . '/style.css'. Le fichier functions.php du thème enfant ne remplace pas celui du parent : les deux sont chargés, celui de l'enfant en premier. Ne copiez donc jamais de fonctions du fichier functions.php du parent, car des noms de fonctions en double provoquent une erreur critique.
Thème de blocs : un fichier functions.php n'est généralement pas nécessaire. Si vous souhaitez par exemple modifier la palette de couleurs, créez votre propre fichier theme.json. WordPress le fusionne avec celui du parent : vous n'y indiquez donc que ce que vous souhaitez modifier.
Pour modifier un modèle, copiez uniquement ce fichier du parent au même emplacement dans votre thème enfant, puis modifiez la copie. WordPress regarde d'abord dans le thème enfant, puis dans le parent. Ne copiez pas tout, sinon vous ne bénéficierez plus des améliorations du parent.
Étape 4 : activer
- Dans WordPress, allez dans Apparence > Thèmes. Votre thème enfant y figure. Cliquez sur Activer.
- Vérifiez votre site : en-tête, menus, widgets et couleurs. Si nécessaire, reconfigurez les menus et les réglages de l'Outil de personnalisation.
- Conservez le thème parent et maintenez-le à jour. Sans parent, le thème enfant ne fonctionne pas.
Vous préférez créer le thème enfant sur votre propre ordinateur ? Compressez alors le dossier au format zip et téléversez-le dans WordPress via Apparence > Thèmes avec le bouton Ajouter un thème, puis Téléverser un thème. Vous pouvez aussi téléverser le dossier avec le Gestionnaire de fichiers ou en SFTP dans wp-content/themes, voir Téléverser et télécharger des fichiers.
Revenir à l'ancien thème
Dans Apparence > Thèmes, activez à nouveau le thème parent. Si une erreur dans votre thème enfant vous empêche d'accéder à l'administration, renommez le dossier du thème enfant dans le Gestionnaire de fichiers, par exemple en hoofdthema-child-uit. WordPress bascule alors sur un thème par défaut, s'il est encore installé. Pour en savoir plus, consultez Erreur 500 ou « erreur critique » sur votre site web (y compris après une mise à jour de WordPress).
Pour aller plus loin
- Child themes sur developer.wordpress.org (en anglais)
Envie d'en apprendre davantage ? Suivez le cours WordPress gratuit, leçon 5.2 Créer un thème enfant.