Pourquoi et comment créer un thème enfant sur WordPress ?

Ça y est, vous avez choisi votre thème WordPress sur ThemeForest ou tout autre site qui en propose ? Félicitations ! Maintenant, que votre thème est installé, et avant d’aller plus loin et même de l’activer, c’est son thème enfant que vous devez activer. Mais qu’est-ce qu’un thème enfant et à quoi cela sert-il ?

A quoi sert un thème enfant ?

Un thème enfant WordPress, c’est comme du papier calque. Je vous explique… Quand vous utilisez du papier calque, en général, c’est parce que vous souhaitez reproduire ou adapter un dessin, non ? On garde intacte le modèle original et on personnalise la reproduction. L’association thème parent/thème enfant, c’est grossièrement la même chose. Si vous utilisez le modèle tel quel, sans y apporter la moindre modification, vous n’avez pas besoin de thème enfant. Mais si vous souhaitez modifier la moindre chose, vous avez besoin d’un thème enfant. En d’autres termes, si vous changez une couleur, un logo, un espacement, une police, un alignement, faites le sur le thème enfant.

En effet, au fur et à mesure, les développeurs du thème vont le mettre à jour. Et si vous travaillez directement sur le thème, la moindre mise à jour va écraser les modifications que vous y aviez apportées. Ainsi, les heures passées à configurer votre thème pour qu’il s’adapte à votre image de marque sont réduites à néant. Tandis que si vous travaillez sur un thème enfant, il va enregistrer les modifications apportées et vous pourrez bénéficier des mises à jour.

En résumé : si vous souhaitez modifier la moindre chose sur un thème, ne serait-ce qu’une couleur, je vous conseille de vivement installer un thème enfant. C’est la première chose à faire.

Comment installer un thème enfant sur WordPress ?

Vous l’avez compris, le thème enfant, pour exister a besoin d’un thème parent. Donc dans un premier temps, vous avez besoin d’un thème parent installé. Je vous conseille d’ailleurs de ne pas l’activer immédiatement pour ne pas rester dessus et d’oublier d’activer le thème enfant.

Solution numéro 1 : il est proposé avec le thème parent

Les thèmes premiums sont nombreux à proposer un sous-dossier contenant directement le thème enfant. Il se présente en général sous le format « nomduthème-child ». Ce qui signifie que tout est déjà fait. Deux méthodes s’offrent à vous :

La première méthode consiste à avoir ce dossier sous format .zip et à passer par le tableau de bord de WordPress. Pour cela, allez dans Apparence > Thèmes > Ajouter des thèmes > Téléverser un thème et vous n’avez plus qu’à localiser le dossier au format .zip et le « téléverser » ;

La deuxième méthode se fait grâce à un transfert par FTP, vous n’avez plus qu’à glisser ce dossier dans le dossier « themes » de votre installation WordPress (wp-content > themes).

Solution numéro 2 : installer le thème enfant vous-même (et c’est facile, n’ayez pas peur)

Je sais que cela peut faire peur mais croyez-moi, il suffit de créer un dossier, de faire du copier-coller et de placer 2 fichiers au bon endroit. Oui, seulement deux fichiers, trois pour le confort. Je vais vous accompagner pas à pas. En moins de cinq minutes, ce sera réglé !

Tout d’abord, vous devez copier le nom du dossier parent. Ensuite créez un nouveau dossier, collez le nom et ajouter « -child » à la fin.

La feuille de style ou style.css

Maintenant, il faut créer le fichier style.css. Si vous êtes sous Windows : clique droit > nouveau document texte et renommez-le. Attention, vous devez pouvoir changer l’extension du fichier de .txt à .css. (C’est une option que vous pouvez activer dans l’onglet Affichage de Windows). Pour Mac, je ne sais pas !

Ensuite, ouvrez le document en double cliquant et remplissez-le en suivant le modèle ci-dessous. L’usage veut qu’ils contiennent les informations suivantes :

/*
Theme Name: Twenty Twentyone Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Twentyone Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/

Ici, c’est un exemple. Vous devez le personnaliser selon votre thème. Seuls les deux éléments suivants sont nécessaires :

• Theme Name – le nom unique de votre thème enfant ;
• Template – le nom du thème parent comme écrit dans le nom du dossier.

Et c’est tout pour ce fichier ! vous pouvez enregistrer et passons au suivant. C’était pas si terrible, si ? 

Le fichier functions.php

Afin que le thème enfant récupère les fonctionnalités et l’habillage du thème parent, il faut qu’il communique avec lui. C’est là qu’entre en jeu le fichier functions.php . Pour créer ce fichier, procédez comme pour le fichier style.css. Ensuite, copiez-collez le code suivant :

<?php

/* Activation du thème */

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

Ce code dit à WordPress de récupérer les informations contenues dans « style.css » (le fichier créé à l’étape précédente) et de les utiliser à la place de celles du thème parent.

Votre thème enfant est prêt !

Charger le thème enfant

Pour cela, rien de plus simple :

• soit vous chargez le dossier en l’état dans le dossier « themes » (Dossier WordPress wp-content > themes)  de votre dossier WordPress par FTP ;
• soit vous le mettez dans un dossier .zip et vous passez par le tableau de bord de WordPress (Apparences > Thèmes > Ajouter des thèmes > Téléverser un thème).

Bonus : pour le confort, le screenshot (la capture d’écran)

Si vous regardez votre thème enfant, vous verrez que l’aperçu est vide. Si vous souhaitez y ajouter une miniature, localisez l’image « screenshot.jpg » dans le dossier du thème parent et copiez collez-la dans le dossier du thème enfant. Vous pouvez même créer votre propre capture d’écran et nommez-là « screenshot.jpg ». Il ne vous reste plus qu’à charger l’image dans le dossier en ligne 🙂

Solution numéro 3 : installer le thème enfant WordPress avec une extension

Si la solution précédente ne vous convainc pas, vous avez toujours l’option d’utiliser une extension. Dans le catalogue des extensions WordPress (Tableau de bord > Extensions > Ajouter), cherchez « thème enfant » ou « child theme » et choisissez une extension. A l’heure de la rédaction de cet article, l’extension « Child Theme Configurator » est celle que j’ai déjà testé. Mais je vous avoue que je suis adepte de la solution précédente. Je n’aime pas l’accumulation d’extensions. Cela peut participer au ralentissement du site… D’ailleurs, une fois le thème enfant installé et activé, pensez à supprimer l’extension désormais inutile.

Pour vous aider : Comment installer une extension sur WordPress ?

Peu importe la solution que vous utiliserez le plus important ensuite est de bien activer le thème enfant et non le thème parent. Croyez-moi, même après des années, j’ai récemment oublié d’activer le thème enfant…. Il ne me reste plus qu’à vous souhaiter bonne configuration !