Comment créer un thème enfant pour WordPress ?

Nouveau tutoriel aujourd’hui concernant les thèmes WordPress après celui sur l’installation d’un thème WordPress, avec un tuto sur la création d’un thème enfant WordPress. Je pars du principe que vous avez déjà choisi et installé votre thème graphique pour votre site sous WordPress. Nous allons donc voir aujourd’hui comment personnaliser simplement votre thème WordPress en créant un thème enfant pour WordPress.

Pourquoi créer un thème enfant dans WordPress ?

Vous avez donc installé votre thème WordPress, que cela soit un thème premium ou un thème graphique gratuit. Vous en êtes content mais il est fort possible que certains éléments ne vous conviennent pas. Notamment l’affichage de votre thème. Vous avez peut-être envie de changer la mise en forme de vos titres, de vos puces, les polices de votre sites, certaines couleurs de texte ou de fond. Bref, vous souhaitez personnaliser votre thème WordPress.

Si vous êtes à l’aise avec la modification des fichiers PHP et CSS (les feuilles de styles en cascades ou CSS étant un langage informatique qui permet de mettre en forme tous les éléments HTML de votre site), votre premier réflexe sera d’aller modifier directement les fichiers de votre thème WordPress. Malheureusement, c’est une grosse erreur ! Je vous rassure, si c’est ce que vous avez fait, vous ne serez pas le premier à tomber dans ce piège. Je suis moi aussi tombé dedans la première fois que j’ai voulu customiser un thème WordPress.

Ne pas perdre les modifications de son thème

Pourquoi est-ce une erreur de modifier directement les fichiers de son thème WordPress ? Parce que les thèmes, comme les plugins WordPress, sont régulièrement mis à jour. Afin de corriger des bugs ou d’éventuels problèmes de sécurité mais aussi leur apporter des améliorations ou de nouvelles fonctionnalités.

Problème : à chaque mise à jour, les fichiers du thème sont mis à jour. Ce qui veut dire que toutes les modifications que vous avez fait à votre thème seront écrasées par la mise à jour du thème ! Si vous avez par exemple modifié le fichier style.css de votre thème pour modifier l’affichage de certains éléments de votre site, ces modifications seront perdues… Pas l’idéal quand vous avez passé du temps pour arriver à un affichage qui vous convienne…

LIRE AUSSI  Comment exclure des pages ou articles des résultats de la recherche WordPress ?

Vous n’avez guère le choix :

  • soit vous ne faites plus les mises à jour de vote thème. Cette option est à bannir car c’est suicidaire d’un point de vue de la sécurité WordPress.
  • soit vous répercutez vos changements effectués sur votre thème à chaque mise à jour (ce qui risque d’être long et pénible ; ce n’est pas une solution à terme)
  • soit vous utilisez la solution la plus adaptée, créer un thème enfant !

Bingo, c’est la dernière option qui est bien sûre la meilleure.

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

Un thème enfant dans WordPress est une sorte de copie de votre thème principal sur lesquels vous allez pouvoir faire des modifications (affichage, fonctionnalités) sans les perdre à chaque mise à jour de votre thème principal, appelé thème parent. Cette notion de parent/enfant est ce que l’on appelle en informatique l’héritage. Le thème enfant hérite des fonctionnalités du thème parent et les modifications faites sur le thème enfant permettent de modifier le thème parent, ses fonctionnalités, son affichage sans avoir à modifier les fichiers sources du thème parent qui reste ainsi intègre !

Dans le cadre de ce site, une des premières modifications que j’ai voulu apporter est l’affichage de portion de code au sein d’un article. Ce site étant amené à afficher souvent du code à ajouter ou modifier dans les fichiers de WordPress, autant que son affichage soit bien distingué, lisible et compréhensible. Ce qui n’était pas vraiment le cas à la base dans le thème graphique installé :

Affichage de base du code dans le thème parent WordPress
Affichage de base du code dans le thème parent WordPress sans formatage distinctif

Une fois le thème enfant installé, j’ai pu modifier le thème enfant pour améliorer l’affichage du thème parent :

Affichage du code amélioré grâce aux modifications apportées au thème enfant (changement de police, ajout d’une couleur de fond et d’une bordure colorée à gauche).

Les différentes étapes pour faire un thème enfant WordPress

Même si quelques thèmes premium fournissent également un thème enfant à installer dans le répertoire themes de WordPress, dans les autres cas il vous faudra créer ex nihilo votre thème enfant. Voici la procédure à suivre pour mettre en place votre thème enfant telle qu’elle est préconisée dans la documentation officielle de WordPress : https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant

Création du dossier du thème enfant

Connectez vous au FTP de votre site pour accéder aux fichiers de votre site WordPress. Rendez-vous dans le dossier /wp-content/themes où vous trouverez le dossier de votre thème. Puis créez le dossier qui contiendra votre thème enfant. Dans mon cas, j’ai créé un dossier nommé astuceswp pour mon thème enfant.

Création du dossier du thème enfant
Création du dossier du thème enfant

Création du fichier functions.php

Votre thème enfant devra contenir au minimum deux fichiers : un fichier nommé functions.php et le fichier CSS style.css.

Commencez par créer le fichier functions.php où vous pourrez ajouter vos propres fonctions pour votre thème dans ce fichier. Ou bien modifier les fonctions de base de votre thème.

LIRE AUSSI  Qu'est-ce que Divi ?

Première chose à ajouter dans ce fichier, une fonction qui permet d’écraser le style de votre thème parent par les styles que vous aurez déterminé dans votre fichier style.css. Voilà le code à ajouter :

<?php
/** activation du thème WordPress enfant **/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?

Une fois votre fichier mis au point, transférez-le sur votre site à l’aide de votre logiciel FTP.

Création du fichier style.css

Le fichier style.css va vous permettre de déterminer vos propres styles et personnaliser l’affichage de votre thème WordPress. C’est grâce à lui que vous allez pouvoir mettre en forme vos titres, paragraphes, tableaux, menus, affichage des widgets et autres zones d’affichage de votre site web sous WordPress.

Votre fichier style.css doit contenir un certain nombre d’informations pour que votre thème enfant soit reconnu par WordPress :

  • Theme Name : nom de votre thème comme il apparaîtra dans l’administration de votre site WordPress
  • Description : description telle qu’elle apparaîtra dans le backoffice WordPress
  • Author (facultatif) : nom de l’auteur du thème enfant
  • Author URI (facultatif) : si vous voulez indiquez le site web de l’auteur du thème enfant
  • Template : nom du thème parent. Attention, il faut correctement orthographier le nom du thème parent pour qu’il soit reconnu par WordPress (voir ci-dessous).
  • Version (facultatif) : numéro de version de votre thème

Voici l’extrait de mon fichier style.css qui reprend ces différentes informations :

/*
Theme Name: Astuces WordPress
Description: Thème enfant du theme HitMag pour le site Astuces WordPress
Author: Steve Chevillard - Astuces WordPress 
Author URI: https://astuceswp.fr
Template: hitmag 
Version: 1.0
*/

Remarques :

  • pour l’attribut template : vous devez reprendre le nom du thème parent tel qu’il est affiché dans le dossier /wp-content/themes. Il faudra bien respecter la casse et l’orthographe du nom du thème tel qu’il est affiché dans votre logiciel FTP. Dans mon cas, mon thème parent s’appelle hitmag. J’ai donc repris cet intitulé dans mon fichier css. Si le nom du dossier avait été HitMag, j’aurai dû reprendre exactement ce nom pour l’attribut template du fichier style.css de mon thème enfant. Sinon mon thème enfant ne sera pas reconnu par WordPress.
  • ne jamais mettre d’espace avant les deux point de chaque attribut. Il faut ainsi écrire dans votre fichier css Template: et non Template : (avec un espace)
  • si vous le souhaitez, vous pouvez faire une capture d’écran de votre thème personnalisé et la mettre dans le dossier de votre thème enfant. Pour cela, il vous faudra nommer votre fichier screenshot.png C’est l’image qui apparaîtra dans l’installateur de thèmes de WordPress.
LIRE AUSSI  Comment télécharger un thème WordPress sur TemplateMonster ?

Il ne vous reste plus maintenant qu’à activer votre thème enfant !

Activer votre thème enfant WordPress

Il vous suffira juste de suivre la procédure classique d’installation d’un thème :

  1. Rendez vous dans l’administration de votre site WordPress, passez par le menu Apparence puis Thèmes.
  2. Si vous avez bien suivi le tutoriel ci-dessus, votre thème enfant devrait être affiché avec le nom et la description saisie dans votre fichier style.css. Si votre thème enfant n’apparait pas, c’est que vous avez loupé quelque chose… Vérifiez notamment bien le nom saisi du thème parent pour l’attribut template, ainsi que d’éventuels espaces entre les attributs et les deux points.
  3. Sélectionnez votre thème enfant et cliquez sur Activer.

    Activer votre thème enfant via l'administration de votre site WordPress
    Activer votre thème enfant via l’administration de votre site WordPress

Votre thème enfant est maintenant actif, vous pouvez maintenant personnaliser l’affichage de votre thème WordPress sans que les modifications apportées ne soient effacées à la prochaine mise à jour de votre thème parent !

Thème enfant installé et actif!

Vous pourrez maintenant customiser selon vos souhaits votre thème WordPress via le fichier style.css pour tout ce qui concerne l’affichage et le rendu de votre thème. Vous pourrez également modifier des fonctionnalités de votre thème parent (exemple: limiter le nombre de tags affichés par votre thème). Il sera également possible de personnaliser chaque page de votre site comme la page qui gère l’affichage des articles ou des pages, les metas de votre site etc… Chaque partie de votre site est géré par un fichier (exemple : header.php pour les en-têtes de votre site) qu’il vous suffira de customiser et de mettre dans le répertoire de votre thème enfant. Les fichiers de votre thème prendront le pas sur les fichiers de votre thème parent, ce qui vous permettra de personnaliser au mieux votre thème graphique WordPress !

Des plugins pour créer un thème enfant ?

J’espère que vous aurez compris tout l’intérêt d’utiliser un thème enfant pour votre site web sous WordPress. La démarche pour mettre en place un thème enfant n’est pas très compliqué. Mais vous n’avez peut-être pas envie de mettre les mains dans le cambouis, créer les fichiers et configurer le fichier style.css.

Dans ce cas, sachez qu’il existe plusieurs plugins WordPress qui vous permettront de créer un thème enfant encore plus simplement. Ils sont principalement destinés aux débutants WordPress !

Créer un thème enfant WordPress facilement en utilisant un site web générateur de thème enfant

J’ai récemment découvert le site Child Theme Generator qui, comme son nom l’indique, permet de créer un thème enfant en quelques clics !

Il vous suffit de chercher si votre thème est répertorié (il y en a un paquet : https://childtheme-generator.com/parent-list) ou de remplir vous-même les champs s’il ne l’est pas, vous n’avez plus qu’à télécharger votre thème enfant et l’installer sur votre site WordPress. Hyper pratique pour gagner du temps ou si vous ne voulez pas vous prendre la tête !

Le générateur de thème enfant pour WordPress, Theme Child Generator

9 Commentaires sur “Comment créer un thème enfant pour WordPress ?”

  1. Bonjour,
    Merci pour cet article très intéressant.
    Cela veut dire que les seules modifications possibles, sans avoir peur qu’une mise à jour les écrase, sont dans les fichiers functions.php et styles.css ?

    1. Non, les fichiers functions.php et style.css sont les 2 fichiers de base nécessaires au thème enfant. Mais vous pouvez très bien modifier d’autres fichiers (autres fichiers du thème ou des fichiers d’un plugin) pour modifier leur comportement initial et éviter qu’ils soient écrasés lors de la mise à jour. Il suffit que le fichier de votre thème enfant que vous voulez personnaliser se nomme de la même façon que le fichier du plugin ou thème parent.

      1. merci pour votre retour rapide.
        Les modifications que l’on veut apporter sont à faire dans les fichiers du thème parent ou enfant ?
        si je veux modifier d’autres fichiers il faut qu’il soit présent dans mon thème enfant ?

        1. Les modifications doivent effectivement être faites sur les fichiers du thème enfant. Les fichiers du thème parent sont eux écrasés lors de la mise à jour.

  2. Bonjour,

    Pourriez-vous me dire s’il est possible d’appliquer cette technique de thème enfant aux fichiers css des différents plugins installés sur un site ?
    Exemple : un thème de “base” mh-magazine-lite, un thème “enfant” mh-magazine-lite-enfant, et différents plugin dont the-events-calendar.
    Je souhaitais adopter la même technique des thèmes enfants pour faire un “plugin enfant” avec des modifications sur un fichier css de ce plugin pour éviter de devoir refaire les modifications à chaque mise à jour du plugin.
    Est-ce possible ?

    Merci si vous pouvez répondre,

    Hugues

    1. Bonjour Hugues,

      J’utilise le fichier css du thème enfant pour modifier le css de base des plugins pour les adapter au thème graphique. Après, je redéfinis juste les styles existants : ce ne sont pas des ajouts aux styles du plugin (ajout de classe ou d’id déjà existants), juste des adaptations. Si c’est ce que vous voulez faire, customisez les styles de vos plugins depuis le fichier css de votre thème enfant !

      1. Merci de votre réponse (hyper) rapide !
        Je vais tester de ce pas,
        Si j’ai bien compris, je met les modifications que je veut apporter au css du plugin dans le fichier css déjà existant du thème enfant ?

        Hugues

Les commentaires sont fermés.