WordPress : Comment créer un thème enfant ?
I. Présentation
Lorsque l'on sélectionne son thème WordPress pour démarrer un nouveau projet ou changer le design d'un site existant, se pose forcément la question du choix du thème. Il est très important car c'est lui qui va définir le design du site et le layout global.
Les thèmes sont bien souvent mis à jour régulièrement par leurs auteurs, ce qui implique que vous allez écraser les fichiers existants du thème par ceux de la nouvelle version. Sauf que, il est bien souvent utile de modifier les fichiers du thème, notamment le design via le CSS ou encore des fonctions PHP pour ajouter des actions WordPress via le fichier functions.php. Il y a donc un problème... Mais rassurez-vous la solution existe !
Nous allons devoir créer ce que l'on appelle un thème enfant, c'est-à-dire un nouveau thème rattaché directement à un thème parent, qui sera le thème que vous vouliez utiliser. Dans le répertoire du thème enfant, on se contentera de créer un fichier CSS et un fichier functions.php, ces deux fichiers viendront compléter ceux existant dans le répertoire du thème parent.
De cette manière, vous pourrez continuer à mettre à jour votre thème, sans perdre vos ajouts. Voyons comment procéder.
II. Procédure : thème enfant WordPress
Nous partons du principe où le répertoire de stockage des thèmes est celui par défaut, à savoir "wordpress/wp-content/themes" et que le thème que nous souhaitons utiliser ce nomme "mon-theme-2017".
Commençons par se déplacer dans le dossier des thèmes :
wordpress/wp-content/themes/
Puis on va créer un nouveau dossier dans le répertoire "themes", en reprenant le nom du thème existant suivit de la mention "-child" :
mkdir mon-theme-2017-child
Créons maintenant le fichier functions.php :
touch functions.php
Editez-le ensuite et ajoutez le contenu suivant :
<?php
/** Activation du theme **/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Enregistrez et fermez ce fichier, nous allons passer à la création du fichier style.css :
touch style.css
Et voici le contenu du fichier CSS qu'il faut ajouter et adapter :
/* Theme Name: Mon theme 2017 (Child) Description: Ceci est le theme enfant de Mon theme 2017 Author: Florian, IT-Connect Author URI: https://www.it-connect.fr Template: mon-theme-2017 Version: 0.1 */
Le code ci-dessus est obligatoire, voici comment remplir les différentes lignes :
- Theme Name : Le nom de votre thème enfant
- Description : Une description pour votre thème enfant, je vous recommande d'y mentionner le nom du thème parent
- Author : L'auteur du thème enfant
- Author URI : L'URL vers le thème parent, pour ne pas oublier les origines de votre thème 🙂
- Template : Le nom exact du dossier de votre thème parent (en respectant la casse)
- Version : Un numéro de version pour votre thème enfant
Il ne vous reste plus qu'à retourner dans le back-office de WordPress, dans la section "Apparences" puis "Thèmes" : votre thème enfant apparaît dans la liste des thèmes, comme tout autre thème, il ne vous reste plus qu'à l'activer ! Pour la petite astuce, vous pouvez ajouter dans le dossier de votre thème enfant un fichier "screenshot.jpg", de préférence de dimensions 600 x 450 px, qui sera utilisée comme vignette pour le thème enfant.
