Ajouter un thème enfant

Lorsqu'un thème est mis à jour, l'intégralité de ses fichiers sont réécrits. Les modifications éventuelles de code CSS, HTML ou PHP sont alors écrasées par les fichiers du thème officiel. Si l'on souhaite malgré tout faire des modifications de certains fichiers du thème tout en conservant les avantages des mises à jour pour des améliorations et des correctifs, il faudra créer un thème enfant.

Le thème enfant permet de conserver les modifications effectuées en dupliquant les pages à modifier dans le dossier du thème enfant. Les pages du thème enfant sont prioritaires sur le thème parent, qui pourra se mettre à jour sans affecter le thème enfant.

Création du dossier

Créez un dossier dans le dossier themes de WordPress et nommez le comme bon vous semble, même si je conseille, pour des raisons d'organisation, de nommer le dossier du thème enfant comme le thème d'origine suivi de "-enfant". Supposons que votre thème s'appelle twenties, nommez votre thème enfant twenties-enfant.

Le dossier du thème enfant va contenir les fichiers suivants :

Création de la feuille de style

Avec un éditeur de texte, créez un fichier css nommé style.css et mettez-y le texte suivant :

/*
Theme Name: Twenties Enfant
Description: Theme enfant de Twenties
Author: Guillaume
Author URI: http://lesdocs.fr
Template: twenties
Version: 1.0
*/

On suppose ici que le thème principal s'appelle twenties, ce nom correspond au nom du dossier du thème parent. La ligne Template: twenties est indispensable car elle relie votre thème enfant à son parent. A la suite de ce commentaire, vous pourrez ajouter votre CSS personnalisé qui complètera le style.css du thème parent.

Création du fichier functions.php

Le fichier functions.php complète son homologue du thème parent. Le code suivant charge la feuille de style principale du thème parent, puis la complète par celle du thème enfant.

<?php
add_action( 'wp_enqueue_scripts', 'charge_styles' );

function charge_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri().'/style.css' );
}

Dans le code ci-dessus :

• get_template_directory_uri() renvoie l'URI du dossier du thème parent.
• get_stylesheet_directory_uri() renvoie l'URI du dossier du thème enfant.

Il ne reste plus qu'à activer le thème enfant dans Apparence -> Thèmes.

Comment ça fonctionne ?

Deux points à comprendre :

• La feuille de style de l'enfant complète (ou contredit) celle du parent.
• Les modèles PHP de l'enfant remplacent ceux du parent.

Si vous souhaitez modifier la feuille de style, allez dans Apparence -> Éditeur puis ajoutez des réglages de style CSS dans le fichier style.css du thème enfant. Cette feuille de style sera prioritaire par rapport à celle du parent.

Si vous souhaitez modifier un fichier du thème, dupliquez-le d'abord dans le thème enfant. Par exemple, dupliquez footer.php puis modifiez-le dans le thème enfant, de manière à vous faire un pied de page personnalisé. Le fichier footer.php personnalisé remplacera celui du parent, même si ce dernier est mis à jour. C'est la même procédure pour tous les fichiers PHP situés dans la racine du dossier parent.

Inclure un fichier PHP situé dans un sous dossier du thème parent

Si vous souhaitez inclure un fichier PHP situé dans un sous-dossier du thème parent, il faudra le copier dans le même sous-dossier côté thème enfant. L'arborescence devra être dupliquée. Il faudra ensuite utiliser la fonction get_template_part() dans le fichier functions.php du thème enfant.

Supposons que vous souhaitiez inclure le fichier class-avada-googlemap.php situé dans le dossier includes du thème parent, il faudra ajouter la ligne suivante dans functions.php :

get_template_part( 'includes/class-avada-googlemap' );

Notez que l'extension .php ne doit pas être précisée dans la fonction get_template_part().

Copier les réglages du thème parent dans le thème enfant

L'activation du thème enfant réinitialise les réglages du thème. Si vous aviez réglé des mises en forme dans Apparence -> Personnaliser et que vous souhaitez les récupérer sur le thème enfant, vous pouvez utiliser l'extension Child Theme Copy Settings.

Après avoir activé le thème enfant, allez dans Apparence -> Child Theme Copy Settings, puis copiez les réglages du parent vers l'enfant.

Modifier une fonction du parent dans le thème enfant

Si vous souhaitez modifier une fonction du thème parent dans le thème enfant. Vous devez dupliquer cette fonction dans le fichier functions.php puis y ajouter vos modifications.

Afin qu'elle ne rentre pas en conflit avec celle du parent, vous devrez la renommer. Ensuite, vous devrez annuler la fonction du parent (remove_action) puis exécuter celle de l'enfant :

function nom_de_fonction_enfant_qui_remplace() {
   ...
}

function remplacement_fonction() {
     remove_action('hook', 'nom_de_fonction_parent_a_remplacer');
     add_action('hook', 'nom_de_fonction_enfant_qui_remplace' );
 }
 add_action( 'init', 'remplacement_fonction' );

Ajouter les langages dans le thème enfant

Pour conservez vos traductions inscrites dans le dossier languages, vous devrez également les dupliquer dans le thème enfant et les signaler dans le fichier functions.php en ajoutant le code suivant :

function localisation_theme_enfant() {
load_child_theme_textdomain( 'total', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'localisation_theme_enfant' );