Développer pour WordPress : créer un thème enfant

Qui dit développement pour WordPress dit création de thème ou adaptation d’un thème existant. Les noobs modifient directement le thème et s’en mordent les doigts à la première mise à jour, les autres se lancent dans la création d’un thème enfant, ce qui est aussi simple que 1, 2, 3. Sceptiques ? Suivez le guide !

1-2-3-theme-enfant

Qu’est ce qu’un thème enfant ?

Vous me connaissez, il est hors de question que je vous laisse y aller comme ça, sans savoir où vous mettez les pieds. De quoi parle-t-on quand on parle de réaliser un thème enfant ? Il s’agit de créer une surcouche à un thème existant afin d’en modifier l’apparence et/ou les fonctionnalités sans en modifier le noyau, ce qui permet de faire une mise à jour du thème parent sans perdre vos personnalisations.

Prenons un exemple qui n’a rien à voir avec le développement d’un site web : vous pouvez repeindre la façade de votre maison et ajouter des volets à vos fenêtres sans que ça ne modifie en rien vos murs. Par la suite vous pouvez faire mettre votre installation électrique aux normes sans que votre façade ne retrouve sa couleur d’origine ni que vos volets ne soient perdus.

C’est simple finalement ? Passons donc aux choses sérieuses. Nous allons créer un thème enfant de twenty fourteen pour en modifier un peu le rendu

separateur

C’est parti, comptez avec moi !

1. Créez le dossier du thème enfant

Ca peut sembler évident mais un thème enfant se présente avant tout sous la forme d’un répertoire situé dans le même répertoire que le dossier du thème parent (et pas dans le dossier du thème parent). Ainsi si notre theme twenty fourteen se trouve dans le dossier wp-content/themes nous allons créer un dossier twentyfourteen-child à ce même emplacement

Emplacement du dossier du thème enfant

Le dossier du thème enfant se trouve dans le même répertoire que le dossier du thème d’origine

2. Ajoutez un fichier style.css

La finalité première de notre thème enfant est de modifier l’apparence du thème parent, il est donc logique d’y trouver une feuille de style. Nous ajoutons donc un fichier appelé style.css à la racine du dossier twentyfourteen-child.

Ce fichier se présente avec une section d’en-tête avant le début du code css, comme dans l’exemple ci-dessous :

/*
Theme Name:  Twenty Fourteen Child
Theme URI:   http://www.responsive-mind.fr/theme-enfant-wordpress/
Description: Thème enfant pour Twenty Fourteen
Author:      @RenaudMG
Author URI:  http://www.responsive-mind.fr
Template:    twentyfourteen
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:        light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/

/* Début du code css */
h1 {
    color: #f00;
}
Exemple de fichier style.css pour un thème enfant WordPress

Il y a quelques points auxquels vous devez faire attention :

  • Vous ne devez pas mettre d’espace avant les deux-points (:), cela risque de provoquer des erreurs;
  • Seules les lignes Theme Name et Template sont indispensables, mais si vous comptez distribuer votre thème il vaut mieux inscrire un maximum d’informations;
    • Le champ Theme Name est le nom qui apparaîtra pour votre thème enfant dans la liste des thèmes disponibles sur l’interface d’administration de WordPress;
    • Le champ Template est le slug, c’est à dire l’identifiant du thème parent. Il s’agit du nom du dossier qui contient ce thème;
  • Jusqu’à récemment les développeurs utilisaient une directive @import pour lier cette feuille de style à celle du thème parent. Cette pratique fonctionne habituellement mais n’est pas la bonne pratique, il est recommandé dans le Codex de réaliser l’importation de la feuille de style du thème parent à partir du fichier functions.php que nous allons créer dans quelques instants. (Les lecteurs anglophones pourront retrouver une discussion à ce sujet ici).

Mais avant de passer à la suite, jetez un œil à la dernière ligne de l’exemple ci-dessus. Ici j’ai simplement demandé à ce que les titres h1 soient affichés en rouge. Bien entendu vous pouvez définir toutes les règles css que vous souhaitez.

Vous devez savoir une dernière chose : le css du thème enfant étant chargé après celui du thème parent, toutes les règles que vous pourrez définir ici s’appliqueront par dessus celles prévues par le parent, ces dernières seront donc écrasées.

separateur

 3. Ajoutez le fichier functions.php

Comme nous venons de le voir le fichier functions.php est devenu indispensable à la création d’un thème ne serait-ce que pour inclure correctement la feuille de style du thème enfant. Mais son rôle ne s’arrête pas là, ce fichier peut vous servir à ajouter toutes les fonctionnalités que vous souhaitez, puisqu’il s’agit d’un script php comme les autres.

Avant d’approfondir le sujet, je vous propose de découvrir un petit exemple :

<?php
// Commençons par inclure la feuille de style du thème parent
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

// Ensuite ajoutons une petite fonctionnalité
function footer_text() {
    echo '<small>Tous droits réservés - ou autre chose</small>' . "\n";
}
add_action( 'wp_footer', 'footer_text' );
Exemple de fichier functions.php pour un thème enfant WordPress

Comme vous  le voyez, nous commençons par inclure la feuille de style du thème parent, vous devez utiliser ce bout de code dans tous les cas. Ensuite j’ai choisi d’ajouter une petite ligne de texte dans le pied des pages du site grâce au hook wp_footer. Là vous êtes absolument libres de définir les fonctionnalités que vous souhaitez.

Je pense que c’est assez simple alors nous allons nous poser la question suivante : que se passe-t-il si la fonction footer_text que j’ai définie dans mon thème enfant existe déjà dans le thème parent ? WordPress va commencer par charger le functions.php du thème enfant, et  tout de suite après c’est celui du thème parent qui sera appelé, donc si le concepteur du thème parent n’a rien prévu de particulier, vous obtiendrez une belle erreur php puisqu’on ne peut pas déclarer deux fonctions portant le même nom. Par contre il est possible qu’il ait prévu ce cas de figure et ait rendu sa fonction remplaçable (on dit pluggable, ça peut toujours être utile de le savoir pour briller en société) en vérifiant que la fonction n’existe pas déjà de la façon suivante :

if (! function_exists ('footer_text')) {
    function footer_text() {
        echo '<small>Le texte du thème parent</small>' . "\n";
    }
}
Exemple fonction pluggable dans le thème parent

Ainsi la fonction footer_text sera bien définie à partir du thème enfant et lorsque le fichier functions.php du thème parent sera lu, php ne tentera pas de redéfinir la fonction et il n’y aura pas d’erreur.

separateur

Quelques étapes supplémentaires

Fonctionnel ne signifie pas complet et si vous voulez bien faire les choses vous pouvez :

  • ajouter un fichier screenshot.png à la racine de votre dossier de thème pour qu’il s’affiche en tant que vignette dans la page des thèmes de l’interface d’administration de WordPress ;
  • ajouter un fichier rtl.css pour proposer le support des langues écrites de droite à gauche, même si le thème parent ne propose pas ce support. Ce fichier n’est pas bien complexe, si vous ne savez pas comment faire, la documentation se trouve ici et je vous suggère de simplement copier / coller ce fichier à partir d’un des thèmes de base de WordPress ;
  • traduire votre thème dans une bonne quarantaine de langues, même si vous ne comptez pas le diffuser, après tout ça peut être une expérience enrichissante non ?
Dossier de thème enfant complet

Voici le contenu minimal d’un dossier de thème enfant complet

Vous l’avez constaté, créer un thème enfant n’est pas plus compliqué que de modifier un thème directement et les avantages que vous en retirerez valent largement les quelques minutes que vous passerez à créer 4 fichiers et un dossier. Avant de vous laisser partir, je vous invite à consulter cette page du Codex qui vous donnera un complément d’informations qui pourra certainement vous servir, notamment pour l’internationalisation de votre thème, sujet que je n’ai pas abordé ici.

Maintenant c’est à vous de jouer, de partager vos astuces et de poser vos questions. Comme toujours les commentaires sont un espace ouvert sur ce site.

Mise à jour du 21 février 2016 : pour compléter cet article, je vous invite à lire ces quelques questions/réponses basées sur un cas pratique.

3 réponses

  1. Vince dit :

    Suite à ton article j’ai posé la question à notre webmaster et il a un sacré boulot qui l’attend pour créer des thèmes enfants pour les 5 thèmes qu’il a modifié comme un sauvage !

  2. Renaud M.G. dit :

    Pour quoi faire ? S’il y a une mise à jour d’un thème, oui ça vaut le coup de faire la modification. Sinon je ne vois pas trop l’intérêt de travailler juste pour travailler

  3. […] votre thème enfant (si vous n’en avez pas, je vous conseille vivement de lire, par exemple, ce bon post à ce sujet), rajoutez ce code (=partie 1 du code donné par Facebook) […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *