Le fait de pouvoir créer un thème enfant sous WordPress a déjà été abordé par de nombreux blogueurs. L’information est facilement accessible sur la toile, y-compris en français. Il suffit de taper les mots-clés « wordpress theme enfant » dans Google pour s’en rendre compte.
Pourquoi alors publier un énième billet sur le sujet? Parce que j’ai moi-même récemment cherché à rapidement (à mon sens, un truc aussi simple ne doit pas me faire perdre trois heures de mon temps) mettre en place un thème enfant sous WordPress. Parce qu’au bout du troisième tutoriel passé à copier/coller des lignes de code laissées en exemple qui ne fonctionnaient pas et parce qu’après avoir mis bout-à-bout des informations glanées sur différents forums d’entraide j’ai finalement trouvé la solution à un problème qui ne devrait vraiment pas en être un, j’ai décidé de tout remettre à plat.
En d’autres termes: si vous n’avez jamais mis en place de thème enfant sous WordPress et que vous choisissez de passer par du code plutôt que par un plugin, vous pouvez continuer la lecture de cet article.
Utilité de la création d’un thème enfant sous WordPress
L’un des nombreux avantages à utiliser WordPress reste la force de production de sa communauté. Vous n’avez pas l’âme d’un graphiste? Vous pourrez choisir parmi une multitude de thèmes payants ou gratuits mis à disposition sur de nombreux sites, sur GitHub et pour certains même, directement depuis l’interface d’administration de WordPress.
Dans certains cas, le thème choisi peut ne pas correspondre tout-à-fait à vos attentes et vous allez chercher à agir sur son code source pour en modifier l’affichage, les fonctionnalités, etc… Il faut, à ce moment là, ne pas perdre de vue le fait que le développeur de votre thème peut également le faire évoluer de son côté pour corriger des bugs ou apporter lui aussi de nouvelles fonctionnalités. Vous serez notifié des possibles mises à jour en vous connectant à votre interface d’administration. Si vous avez modifié, de votre côté, les fichiers source du thème et que vous effectuez une mise à jour de ce dernier, vos modifications seront écrasées et vous perdrez le bénéfice de votre travail de personnalisation.
Effectuer vos modifications de code dans un thème enfant va notamment vous permettre:
- de bénéficier de toutes les fonctionnalités du thème que vous avez précédemment installé et activé (dit thème parent) sans jamais avoir à le modifier,
- d’isoler totalement vos développements spécifiques,
- de bénéficier des mises à jour du thème parent sans que celles-ci ne viennent écraser vos modifications et, ainsi, d’en conserver le bénéfice.
A l’exception du fichier functions.php, tous les fichiers surchargés (fichiers aux noms et aux fonctionnalités similaires dans les deux thèmes) dans votre thème enfant, prendront le dessus.
Cas pratique
Dans l’exemple qui va suivre, je choisis de partir du thème parent Wilson que vous pourrez ajouter à WordPress directement depuis l’interface d’administration.
Pour créer le thème enfant, nous allons ajouter un dossier wilson-child à la racine du dossier contenant l’ensemble des thèmes installés sur votre instance WordPress (wp-content/themes/).
Nous allons ensuite, à l’intérieur de ce nouveau dossier, créer 2 fichiers :
wp-content/themes/wilson-child/functions.php :
|
1 2 3 4 5 |
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } |
wp-content/themes/wilson-child/style.css :
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Wilson Child Theme URI: https://{mon-site.com}/themes/wilson-child/ Description: Child theme based on Wilson Author: John DOE Author URI: - Template: wilson Version: 1.0.0 Tags: tag0, tag1, tag2 Text Domain: wilson-child */ |
- Theme Name: Le nom de votre thème enfant
- Theme URI: http://votre-site.com/url-de-votre-theme-enfant/
- Description: Thème enfant basé sur {le thème parent}
- Author: John DOE
- Author URI: http://votre-site.com
- Template: [le nom du dossier qui contient le thème parent]
- Version: 1.0.0
- License: GNU General Public License v2 or later
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
- Tags: [les mots clés pour décrire votre thème enfant]
- Text Domain: [theme-parent-child]
Il est également possible d’ajouter un screenshot…
Pour activer notre thème enfant…