Créer son thème enfant Wordpress

Tutoriel par Montage203 · Discord

Ce tutoriel permet de créer son propre thème enfant Wordpress.

Lorsque vous installez un thème sur votre site WordPress, il se peut que vous apportiez des modifications dans le fichier CSS ou dans les fichiers PHP du site. Le problème est que lorsque ce thème sera mis à jour par ses créateurs et que vous décidez de mettre ce thème à jour sur votre site, toutes les modifications seront perdues.

Il existe heureusement une alternative à cela, les thèmes enfant.

Il s’agit d’un thème que vous allez créer qui reprend l’ensemble des propriétés d’un thème existant dans lequel vous pourrez apporter toutes les modifications que vous voulez et qui ne seront jamais écrasées lorsque le thème principal (que l’on qualifie de thème parent) sera mis à jour.

Pour faire un thème enfant, vous aurez besoin du thème original et de 2 fichiers que vous allez créer pas à pas grâce à ce tutoriel.

Étape 1: Activer un thème

Il suffit de :
  • se rendre sur le backend du site et d'aller dans Apparence/Thèmes.


  • Pour l'exemple, je vais activer Twenty Twenty (Je clique sur "Activer")

    • Étape 2: Création d'un nouveau répertoire

    Maintenant que nous avons activer notre thème Twenty Twenty, nous allons créé le dossier qui comprendra notre thème enfant.

  • Pour commencer, rendons-nous dans les dossiers de configuration
    • Dans le dossier wp-content/themes, on identifie le nom du thème actif, dans notre cas twentytwenty


  • Dans le même dossier wp-content/themes, créer un nouveau dossier. Par exemple child-twentytwenty (par convention on peut reprendre le nom du dossier du thème principal précédé de child- mais le nom du dossier est libre)
  • Dans le nouveau dossier (dans ce cas child-twentytwenty) créer 2 fichiers
    1. functions.php
    2. style.css

    • Étape 3: Fichier functions.php

    Dans le fichier functions.php copiez le code ci-dessous. Cela a pour effect de récupérer le style du thème parent
    N’oubliez pas d’inclure ce code dans des balises PHP <?php code ici ?>

    add_action( 'wp_enqueue_scripts' , 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style' , get_template_directory_uri() . '/style.css' );
    }

    Étape 4: fichier style.css

    Dans le fichier style.css, copiez le code ci-dessous

    /*
    Theme Name: Mon site enfant de Twenty Twenty
    Template: twentytwenty
    Author: Montage203
    Description: Thème enfant crée sur base du thème Twenty Twenty
    Version: 1.0.0
    */
  • Le plus important ici est la valeur attribuée à Template. Il doit impérativement s’agir du nom du dossier du thème parent !

    • Étape 5: Activer votre thème enfant

    Il suffit de :
  • Comme pour l'étape 1, il faut se rendre sur le backend du site et aller dans Apparence/Thèmes.


  • Et ensuite, vous activer votre thème. (si il n'est pas dans la liste, actualise la page)

  • Vous pouvez maintenant apporter toutes les modifications que vous désirez dans le fichier style.css de votre dossier enfant.
    Et donc, si vous mettez à jour le thème parent, vous ne perdrez pas vos modifications.

    • Étape 6: A noter

  • toutes les modifications que vous apporterez dans le style.css de votre thème enfant viendront s’ajouter au style principal du thème parent.

  • En revanche, si vous désirez changer des éléments dans les fichiers PHP, vous devrez d’abord copier le fichier PHP que vous voulez éditer depuis le thème parent dans votre thème enfant avant d’y apporter des modifications. Car contrairement au style.css du thème enfant qui s’ajoute au style.css parent, les fichiers PHP remplacent les fichiers PHP du thème parent !

    • Autres tutoriels