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 globales 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, même si ce n'est pas obligatoire.

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: https://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.

Fonctionnement

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

Si vous souhaitez modifier un fichier du thème, dupliquez-le 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 le footer.php du thème parent, même si ce dernier est mis à jour. C'est la même chose pour tous les fichiers du thème parents situés dans la racine du dossier.

Inclure un fichier PHP dans un sous dossier

Si vous souhaitez inclure un fichier PHP dans un sous-dossier du thème parent, il faudra le copier dans le même sous-dossier du côté du thème enfant. L'arborescence doit ê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 a été retirée.

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. Ajouter le code suivant :

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

Articles connexes

Les mises à jour dans WordPress En parcourant le Tableau de Bord, vous serez régulièrement sollicité pour faire des mises à jour. Certaines ne posent pas de problèmes et je les conseille, notamment pour la sécur...
Mise en ligne d'un site WordPress avec Duplicator Voici les étapes pour mettre en ligne un site WordPress avec l'extension Duplicator. Cette extension permet de dupliquer, déplacer ou sauvegarder l'intégralité de votre site. S...
Création d'un thème WordPress Dossier du thème Créez un dossier nommé jonathan et déposez-le dans wordpress/wp-content/themes Feuille de style Créez un fichier nommé style.css et écrivez le code suiva...
Extensions utiles Vous cherchez à faire quelque chose qui n'est pas prévu par WordPress ? sachez qu'il existera probablement une extension (plugin) pour le faire. C'est là toute la richesse de ce C...
Création d'une extension WordPress : Polices des t... Voici le code d'une extension WordPress « fabrication maison » permettant de changer les polices de caractères des titres h1, h2 et h3 selon des réglages validés dans le Tableau d...