Comment créer un thème enfant (childtheme) sur WordPress ?

Lorsqu’on crée un site WordPress ou qu’on crée une boutique woocommerce, on utilise toujours un thème pour personnaliser celui-ci a son image. Que ça soit un thème payant acheté sur une place de marché ou un thème gratuit récupérer dans le répertoire officiel, vous serez amenés a le modifier selon vos besoins. Si vous mettez à jour ce thème vers une nouvelle version, vous risquerez de perdre toutes vos modifications qui seront écrasées par la mise à jour.

Rassurez-vous, il existe une solution a ce problème : le thème enfant ( dit « Child theme » en anglais ).

Qu’est-ce qu’un thème enfant sur WordPress ?

La meilleure façon de vous expliquer ce qu’est un thème enfant, c’est de reprendre l’explication officielle donnée dans le Codex WordPress :

Un thème enfant WordPress est un thème qui hérite des fonctionnalités d’un autre thème, appelé thème parent. Le thème enfant est la méthode recommandée pour modifier un thème existant.

https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant

Qu’est-ce que cela nous apprend ? Cela nous apprend qu’un thème enfant est un thème WordPress strictement lié à un autre thème ( thème parent ), dont il hérite des différents aspects, à savoir ses fonctionnalités et son style.

Attention, cependant : même si son nom peut vous tromper, un thème enfant n’est pas une version dépouillée, moins puissante ou limitée d’un thème. Il s’agit plutôt d’une extension de votre thème WordPress actuel, extension dans laquelle vous pourrez apporter des modifications en toute sécurité.

Vous voulez une explication plus imagée du thème enfant de WordPress ?

Imaginez que vous avez un tableau accroché sur votre mur. Par-dessus, vous mettez une feuille transparente pour que vos enfants puissent dessiner dessus avec des feutres. Ils choisiront de faire une maison verte au lieu de la maison bleue que vous aviez dessinnée. Selon leurs envies, ils ajouteront des arbes, des oiseaux et des dragons sans altérer votre dessin original. A tout moment, vous pouvez vous aussi modifier votre dessin original, sans risquer de modifier leur version.

Comment créer un thème enfant sur mon site ?

Créer un thème enfant est un jeu d’enfant et prends quelques minutes à peine. Créer un thème enfant pour WordPress requiert de savoir se connecter a son serveur FTP ou de passer par un plugin. Vous nous connaissez chez WordPress pour les nuls, les plugins on aime pas ça, on fait tout à la main ! ( Pour le plugin, regardez plus bas 😉 ).

Créer un thème enfant sans plugin

  1. Commencez par créer un répertoire du nom de votre futur thème. Pour cela, rendez-vous dans le dossier /wp-content/themes/ et ajoutez-y un nouveau répertoire avec le nom de votre thème enfant. Je vous recommande de nommer ce répertoire du même nom que le thème original en y ajoutant « -child » a la fin. Exemple : « /montheme-child/ ».
  2. Il faut maintenant créer une feuille de style propre à votre thème enfant, pouvant accueillir vos modifications CSS ainsi que l’en-tête indiquant toute les spécificités du thème (auteur, description, template, etc…).

Dans ce nouveau répertoire il vous faut donc créer le fichier style.css dans lequel vous allez copier le code suivant (en prenant soins évidement de remplacer les données par les vôtres).

Dans cet exemple nous allons créer un thème enfant du thème Twenty Twenty-Two proposé par défaut dans chaque nouvelle installation de WordPress.

Gardez a l’esprit qu’il y’a 2 informations importantes dans l’en-tête du thème : Le nom du thème et sa source (name & template), toutes les autres sont facultatives.

Créez donc un nouveau fichier : Style.css et collez dedans le code suivant :

/*
Theme Name: Twenty Twenty-Two
Description: Thème enfant pour Twenty Twenty-Two
Author: WordPress pour les Nuls
Template: twentytwentytwo
*/

@import url("../twentytwentytwo/style.css");

#newstyle {
    float:left;
}
  1. Remplacez le nom « Twenty Twenty-Two » par le nom de votre futur thème.
  2. Remplacez l’url de la feuille css par l’url du css que vous souhaitez copier.
  3. Codez vos ajouts de CSS à la place de #newstyle.

Rendons les feuilles de style du thème enfant prioritaire sur celle du thème parent

Cette étape n’est pas obligatoire mais recommandée pour éviter de se creuser les méninges par la suite.

Cela permet de garantir deux choses : Premièrement, que le thème enfant hérite du style de son thème parent, de sorte que lorsque vous activez votre thème enfant, vous n’êtes pas simplement en train de regarder un tas de texte non stylisé.

Deuxièmement, la feuille de style du thème enfant est chargée avant celle du thème parent, sans la remplacer. Ainsi, lorsque vous ajoutez des feuilles de style CSS personnalisées et modifiez votre thème enfant, ces modifications augmentent ou remplacent certains styles et fonctions du thème parent.

Pour ce faire, créez un autre fichier dans le répertoire de votre thème enfant. Nommez-le « functions.php » et ajoutez le code suivant :

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

Activer le thème enfant sur votre site WordPress

Maintenant que vous avez mis en ligne votre nouveau thème il vous reste à l’activer dans votre WP-Admin. Rendez-vous dans « Apparence > Thèmes » et activez le thème enfant. Au besoin, n’oubliez pas notre tuto : comment installer un thème WordPress !

Modifier le thème enfant de mon site

Pour adapter un fichier copiez-le du thème parent dans le répertoire du thème enfant ou créez-le. Celui-ci sera toujours prioritaire sur les fichiers parents.

Par exemple si vous souhaitez modifier votre header. Vous pouvez-soit copier le fichier header.php de Twenty Twenty-Two dans le répertoire de votre thème enfant et de l’adapter selon vos besoin ou créer vous même votre nouveau fichier header.

Gardez a l’esprit que tous les fichiers que vous copiez du thème parent doivent garder la même arborescence pour être lu par le thème enfant. Exemple : le fichier /themeparent/includes/fichier.php doit être remis exactement au même endroit dans le thème enfant -> /themeenfant/includes/fichier.php !

Remarque : Le fichier function.php fonctionne différemment, en effet c’est le fichier function.php du thème parent qui prime sur le fichier function.php du thème enfant.

Il en est de même pour les traductions. Par défaut WordPress ira lire les traductions dans le thème parent. Cependant, il est possible de traduire le site via le thème enfant, nous vous avons rédigé un tuto a ce sujet : Traduire WordPress depuis le thème enfant.

Créer un thème enfant avec un plugin

Si vous préférez apprendre à créer un thème enfant sur WordPress sans aucun codage, il existe un certain nombre d’excellentes solutions de plugins parmi lesquelles vous pouvez choisir. Je ne vais pas tous les analyser ni les comparer, ce n’est pas le but de cet article. Personnellement je n’aime pas les plugins de ce type qui surchargent inutilement votre site et peuvent causer des ralentissements.

Je connais le plugin « Child Theme Configurator » pour l’avoir déjà croiser sur des sites clients : https://fr.wordpress.org/plugins/child-theme-configurator/. Je sais qu’il fait le job, c’est le plus important.

Il est plutôt intuitif et facile a prendre en main, je vous laisse découvrir cela de votre côté.

Le thème enfant de WordPress ne fonctionne pas

C’est assez rare, mais il est possible que le thème enfant ne fonctionne pas malgré avoir suivi scrupuleusement notre procédure. Rassurez-vous, ce n’est pas de votre faute ! Certains themes sont codés différement, sans tenir compte de la possibilité de créer un thème enfant.

Si votre thème enfant ne s’affichage pas dans le tableau de bord, ou si votre site ne s’affiche pas correctement après l’avoir activé, voici quelques éléments que vous pouvez vérifier :

Vérifiez votre fichier functions.php

Assurez-vous que vous avez mis en file d’attente la feuille de style de votre thème enfant dans votre fichier functions.php. ( voir le chapitre : « Rendons les feuilles de style du thème enfant prioritaire sur celle du thème parent« .

Si vous ne l’avez pas mise en file d’attente, votre thème enfant ne se chargera pas. Votre site restera sur le thème parent, donc il aura l’air bien ; le problème est que les changements que vous faites au thème enfant n’apparaîtront pas sur le front-end.

Vérifiez que vous avez correctement nommée la feuille « style.css »

Vérifiez que vous avez nommé votre feuille CSS « style.css », et non « stylesheet.css ». Comme « style.css » est la convention de dénomination standard de WordPress, l’utilisation de ce nom de fichier permettra à votre fichier functions.php de savoir automatiquement qu’il s’agit de votre feuille de style.

Si vous nommez votre feuille de style autrement, le fichier functions.php ne sera pas en mesure de la récupérer et de la rendre à l’utilisateur final.

Videz votre cache.

Essayez de vider le cache de WordPress si vous en avez un. En effet, votre navigateur peut vous montrer une ancienne version de votre site, il faut donc également vider le cache du navigateur.

Vous pouvez également ouvrir votre site dans une fenêtre incognito pour voir les modifications que vous avez publiées.

Ajoutez !important à votre code CSS.

Si le thème parent écrase toujours le code CSS de votre thème enfant, ajoutez « !important » aux éléments que vous avez modifiés. Cela remplacera de force tout ce qui est écrit dans la feuille CSS du thème parent.

Vous devez ajouter !important juste avant le point-virgule, comme suit :

p { background-color: white !important; }

La règle « !important » peut être utilisée pour les ID, les classes CSS et les éléments HTML standard tels que les paragraphes, les tableaux, les titres, etc…

Contactez l’assistance de votre thème ou consultez le forum du thème.

Si vous avez suivi toutes ces étapes et que le CSS ne se charge toujours pas, il est temps de contacter l’équipe d’assistance de votre thème. Bien qu’il s’agisse d’une solution de dernier recours, elle présente l’avantage de vous donner des réponses spécifiques à votre thème.

Le développeur de votre thème WordPress a peut-être utilisé un code personnalisé ou mis en place un système de dénomination différent pour les fichiers du thème.

Gregory

Agitateur de Stratégies, addict à WordPress depuis 2003, fada de Google depuis 1998. Incubateur Digital, j'accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l'optimisation de leurs sites WordPress. Basé à Aix-en-Provence, je suis à l'écoute de votre projet si vous avez besoin d'un expert WordPress.

Vous aimerez aussi

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.