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

Qu’est ce qu’un thème enfant dans WordPress et comment cela fonctionne ?

Avant de nous lancer tête baissée dans ce tutoriel sur la création d’un thème enfant, savez-vous ce qu’est réellement un thème enfant sur WordPress ?

Un thème enfant, c’est un thème qui va hériter de l’ensemble des propriétés d’un thème parent. Avec ce thème enfant, on va pouvoir surcharger le thème parent et personnaliser son site web.

Qu’est-ce que j’entends par surcharger ? (on parle de « override » en anglais) C’est tout simplement le fait de « prendre le dessus » sur les propriétés du thème parent.

Cela permet de créer son propre thème en partant d’un thème existant.

A quoi sert un thème enfant WordPress et quels sont les avantages ?

Utiliser un thème enfant permet de séparer les modifications effectuées sur un thème parent. Il permet également d’améliorer le thème parent sans y toucher directement !

Voici les avantages de créer un thème enfant WordPress :

  • Les modifications sont isolées et séparées du thème parent
  • Lors des mises à jour du thème parent, les modifications effectuées ne sont pas perdues
  • Cela permet d’économiser du temps de développement. Pas besoin de réinventer la roue en créant un nouveau thème de zéro.
  • C’est une bonne façon de commencer à apprendre la création de thème WordPress.

La création d’un thème enfant pour le CMS WordPress

Créer le dossier du thème enfant

Pour créer un thème enfant, la première chose à faire est de créer un nouveau dossier à l’emplacement des thèmes WordPress (wp-content/themes). Donnez un nom au thème (par exemple : « twentytwenty-enfant »).

Création de la feuille de style du thème enfant

Pour que notre thème enfant soit reconnu par WordPress, il faut créer un nouveau fichier « style.css » qui contiendra toutes les nouvelles règles css que vous voulez appliquer à votre thème enfant. Vous devez également ajouter les informations de configuration de votre thème enfant. Voici un exemple concret :

/*
 Theme Name:   Twenty Twenty enfant
 Description:  Twenty Twenty thème enfant
 Template:     twentytwenty
 Author:       Quentin
 Version:      1.0.0
*/

Les éléments indispensables sont la déclaration « Theme Name » et « Template ». La première est le nom que vous donnez à votre thème enfant. La deuxième est le nom du dossier du thème parent auquel le thème enfant fait référence.

Récupération de la feuille de style du thème parent

Votre thème enfant est maintenant reconnu par WordPress mais il reste une étape indispensable : le chargement des feuilles de style.

  • Il faut charger la feuille de style du thème parent
  • Il faut charger la feuille de style de votre thème enfant après la feuille de style du thème parent

Pour mettre ça en place, rien de plus simple. Commencez par créer un fichier « functions.php » à la racine de votre thème enfant puis ajoutez le code ci-dessous :

<?php
add_action('wp_enqueue_scripts', 'mon_theme_enqueue_styles');
function mon_theme_enqueue_styles(){
    wp_enqueue_style('style-theme-parent', get_template_directory_uri().'/style.css');
    wp_enqueue_style('style-theme-enfant', get_stylesheet_directory_uri().'/style.css', array('style-theme-parent'));
}

Quelques explications :

Le hook « wp_enqueue_scripts » est l’endroit où sont chargées les feuilles de style et les scripts.

  1. Nous chargeons la feuille de style parent (ligne 4)
  2. Nous chargeons la feuille de style enfant en prenant bien soin de préciser que le style parent doit-être chargé avant (ligne 5)

Et voilà ! Vous venez de créer votre thème enfant. Il ne vous reste plus qu’à l’activer dans l’interface d’administration.

Maintenant, vous pouvez ajouter des nouvelles règles css dans votre fichier style.css. Celles-ci seront appliquées par dessus le thème parent.

Vous pouvez même modifier les fichiers templates. Essayez par exemple de copier les fichiers « index.php », « singular.php » ou « page.php » de votre thème parent, de les coller dans le dossier de votre thème enfant et de modifier quelques lignes de code HTML et PHP.

Vous verrez les modifications s’afficher sur votre site !

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !