Il est tout à fait possible de modifier les codes CSS ou PHP du thème de son site WordPress. Mais dès que le thème se met à jour, nous perdons toutes nos modifications…
Le thème enfant résout ce problème en permettant d’utiliser toutes les fonctionnalités de son thème tout en laissant mettre à jour ce dernier, sans peur de perdre ses modifications.
Qu’est-ce qu’un thème enfant ?
Un thème enfant est un thème basé sur le thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi il est possible d’apporter des modifications à son enfant et en cas de mise à jour du parent, rien n’est perdu.
Tout fichier placé dans le thème enfant et portant le même nom que dans le thème parent, prendra le dessus et écrasera le fichier d’origine (sauf le functions.php).
Comment créer un thème enfant ?
Pour faire un thème enfant, nous avons besoin du thème d’origine que l’on qualifie de thème parent et de 2 fichiers que nous allons créer. Il faudra également créer un répertoire pour y placer les fichiers du thème enfant.
La première des choses à faire est donc de créer un dossier pour son thème enfant dans le FTP. Il suffit d’aller créer le dossier du thème enfant dans /wp-content /themes /nomduthemeenfant/.
Nous allons maintenant créer les deux fichiers dont nous avons besoin et que nous placerons dans le dossier de notre thème enfant :
- un fichier functions.php
- un fichier style.css
Pour l’exemple, je vais me baser sur un thème parent qui porte le nom de OceanWP.
Le fichier functions.php
Dans le fichier functions.php, nous allons intégrer le code qui va permettre de combiner ou d’écraser le fichier style.css du parent.
Voici donc le code à mettre dans le fichier functions.php du thème enfant :
<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}Le fichier style.css
Puis, il faut créer le fichier style.css du thème enfant, qui contient les informations suivantes :
/*
Theme Name: Theme enfant
Description: Theme enfant de Pascal Furlan
Author: Pascal Furlan - OceanWP
Author URI: https://www.furlan-webdesigner.fr/
Template: OceanWP
Version: 0.1.0
*/Description ligne par ligne du fichier style.css :
- Theme Name : Le nom que l’on souhaite donner à son thème enfant
- Description : La description du thème enfant qui apparaîtra dans le gestionnaire de thème WordPress
- Author : L’auteur du thème enfant, en l’occurrence vous
- Author URI : L’url du site de l’auteur
- Template : Le nom du thème parent, celui du répertoire tel qu’il est écrit sur le FTP
- Version : La version du thème enfant à titre indicatif
Petits détails à ne pas oublier sinon votre thème enfant ne fonctionnera pas :
- Ne jamais mettre d’espace avant les deux points. Theme Name: fonctionnera mais Theme Name : ne fonctionnera pas
- Pour l’attribut Template : Si le thème dans l’admin se nomme par exemple “oceanwp” mais que le nom affiché dans le répertoire FTP est “OceanWP” alors il faudra obligatoirement respecter la casse et écrire OceanWP et non oceanwp
Le fichier screenshot.jpg
Pour illustrer le gestionnaire de thèmes WordPress, il est souhaitable de mettre un fichier screenshot.jpg (600×450 px conseillé) qui affichera la miniature du thème enfant dans le gestionnaire de thèmes.
Au final…
Nous pouvons maintenant ajouter toutes modifications CSS dans le fichier style.css du thème enfant et ne plus les perdre lors des mises à jour du thème parent. Il en va de même pour les modifications dans le PHP : que ce soit dans le single.php ou le header.php, il suffit de les copier du parent vers le thème enfant et de les modifier. Nous pouvons également ajouter des fonctions dans le functions.php de son enfant, tout en sachant que le functions.php du parent sera toujours chargé en dernier et qu’il prendra le dessus en cas de fonctions identiques.