Il est vrai que les thèmes WordPress sont personnalisables. Cependant, il y a toujours des choses que nous souhaitons changer : modifier certains styles CSS ou ajouter de nouvelles fonctions au thème. BON ! Le seul problème, c’est que modifier un thème vous empêche de mettre à jour votre thème ultérieurement ! Mettez à jour votre thème et vous perdrez toutes vos modifications ! Évidemment, vous ne voulez pas que cela arrive à votre site Web ou pire, au site Web de vos clients !
Heureusement, il existe une solution très simple à ce problème, celle du thème enfant.
Qu’est-ce qu’un thème parent ?
Un thème parent est un thème complet qui inclut tous les fichiers de modèle WordPress et les ressources nécessaires pour que le thème fonctionne. Tous les thèmes, à l’exception des thèmes enfants, sont considérés comme des thèmes parents. TOUT thème que vous installerez est par défaut un thème parent.
Qu’est-ce qu’un thème enfant ?
Un thème enfant hérite du design de son parent ainsi que de toutes ses fonctions. Cependant, la bonne nouvelle est qu’il peut être modifié, prolongé ! Les personnalisations sont séparées du thème parent afin que, lorsque le thème parent est mis à niveau, vous puissiez le faire sans perdre vos propres personnalisations.
Les thèmes enfant ont de nombreux avantages, parmi lesquels :
- rendre vos modifications portables et réplicables;
- garder le design spécifique séparé du thème parent;
- garder les fonctionnalités spécifiques séparées du thème parent;
- permet au thème parent d’être mis à jour sans perdre les personnalisations;
- sauvegarder du temps de développement, ne pas réinventer la roue;
De nombreux modèles premium incluent déjà un thème enfant. Prudence ! Vous devez toujours installer le thème parent au préalable, mais sans l’activer. Si vous utilisez GeneratePress, vous devrez créer vous-même le thème enfant. Mais c’est assez rapide ! Nous allons voir ça.
Comment mettre en place un thème enfant ?
Pour mettre en place un thème enfant, il vous faut le thème parent. Ensuite, vous devez créer un dossier spécifique que vous pourrez appeler « child-theme » par exemple.
A l’intérieur de ce dossier, créez 3 fichiers :
- functions.php
- style.css
- screenshot.jpg
Dans le fichier functions.php, placez le code php permettant de dire à WordPress qu’il doit prendre en compte le fichier style.css du thème enfant :
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);
function child_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
}
if ( get_stylesheet() !== get_template() ) {
add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
update_option( 'theme_mods_' . get_template(), $value );
return $old_value; // prevent update to child theme mods
}, 10, 2 );
add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
return get_option( 'theme_mods_' . get_template(), $default );
} );
}
?>Maintenant que nous sommes capable « d’appeler » le fichier style.css du thème enfant, nous pouvons le mettre à jour comme suit :
/*
Theme Name: Generate Press Child Theme
Description: Child Theme from Webstreet
Author: Roxane Webstreet Agency
Author URI: https://www.webstreet.io
Template: generatepress
Version: 0.1.0
*/Dans mon exemple, j’ai créé un thème enfant, pour le merveilleux template GeneratePress ! Voici les explications des différentes lignes de ce fichier :
- Theme Name : Le nom que je souhaite donner à mon thème enfant
- Description : La description de mon thème enfant, c’est aussi ce qui apparaître dans l’interface d’administration WordPress
- Author : L’auteur du thème enfant, vous donc !
- Author URI : L’URL de l’auteur du thème enfant
- Template : Le nom du thème parent : vous devez mettre ici exactement le même nom que celui que vous avez dans votre dossier FTP sur votre serveur
- Version : La version du thème enfant
Mon template spécifique de thème enfant ! 🙂
Pour vous aider, j’ai créé un thème enfant, spécialement pour vous ! Cliquez sur le bouton ci-dessous pour télécharger le thème enfant.
Pour adapter ce thème enfant à vos besoins, décompressez-le sur votre machine locale, mettez à jour les différentes lignes en conséquence et téléchargez-le via FTP à l’intérieur du dossier /wp-content/themes.
Pour finir, activez votre thème enfant dans WordPress en allant dans Appearance => Themes. Vous verrez cette magnifique image apparaître
Que puis-je faire maintenance que mon thème enfant est en place ?
Vous pouvez commencer facilement en mettant à jour les styles de fichiers. css et voir si les modifications sont prises en compte. Maintenant, disons que vous voulez modifier un autre fichier de votre modèle, par exemple header.php ou footer.php. Copiez JUSTE ce fichier de votre thème parent vers votre thème enfant et apportez vos modifications. Vous pouvez également mettre à jour le fichier functions.php de votre thème enfant, mais, sachez que le fichier functions.php du thème parent sera toujours téléchargé en dernier et si des fonctions avec des noms identiques sont dans les deux fichiers, le thème parent est toujours gagnant !
Voilà, cet article est terminé ! N’hésitez-pas à poser vos questions ! 🙂
