Créer un thème enfant WordPress

thème enfant WordPress
Partagez !

Vous avez fini de créer votre site WordPress, vous avez fait des personnalisations, modifié les templates et paf, une mise à jour de votre thème les supprime. La raison est simple, vous avez tout simplement oublié de créer un thème enfant.

Alors, pour remédier à cela et ne pas faire la même bêtise la prochaine fois, voyons tout de suite ce qu’est un thème enfant, son utilité et comment le créer.

Qu’est-ce qu’un thème enfant ?

En français, on appelle ça un thème enfant, mais, comme les thèmes WordPress sont souvent dans la langue de Shakespeare, vous le trouverez plus communément sous l’appellation child theme.

En bref, tous les thèmes que vous installez dans WordPress sont potentiellement considérés comme des thèmes parents.

Il est à noter que le thème parent regroupe tous les fichiers qui permettent au thème d’être fonctionnel.

Le thème enfant, quant à lui, est un sous-thème que vous créez et qui hérite des fonctionnalités de son thème parent. Il vous sera utile pour apporter des modifications pérennes à n’importe quelle partie du thème.

Pourquoi créer un thème enfant ?

Imaginez que vous ayez customisé votre thème afin qu’il ait exactement l’apparence que vous souhaitiez. Vous avez changé les couleurs du thème, la police, et également modifié les templates de pages.

Oui, mais voilà, sans réfléchir, vous avez ajouté du PHP ou encore du JavaScript directement dans votre thème parent.

Alors là, c’est ballot !

Vous avez passé probablement beaucoup de temps à créer le site dont vous rêviez. Mais, une mise à jour de thème pointe le bout de son nez. Sans tarder, vous cliquez OK pour mettre à jour en oubliant de créer une sauvegarde, et là, abracadabra, toutes vos modifications se sont envolées.

Sans thème enfant, il vous faudra donc refaire les modifications à chaque mise à jour du thème.

Ou pire, ne plus faire les mises à jour, mais, dans ce cas, vous vous exposez à des risques de failles liées à la sécurité.

Mais, tout cela ne serait pas arrivé si vous aviez créé un thème enfant.

En effet, le thème enfant est, en quelque sorte, une copie de votre thème parent. Mais, son gros avantage est qu’il possède ses propres fichiers style.css (fichier pour la personnalisation de votre style) et functions.php (fichier pour ajouter des fonctionnalités au thème).

Le thème enfant vous permet donc de réaliser toutes les personnalisations possibles, mais, surtout, de les conserver en cas de mise à jour du thème parent.

Comment créer le thème enfant ?

Il existe plusieurs méthodes pour créer un thème enfant, suivez le guide…

Téléverser le thème enfant de l’éditeur

Certains éditeurs de thèmes sympas mettent à disposition du public le thème enfant de leurs thèmes.

Pour les trouver, il vous suffit d’aller dans la documentation sur le site de l’éditeur. Il est à noter que, bien souvent, il se trouve dans le paragraphe concernant l’installation du thème.

C’est le cas, par exemple, pour :

Si vous ne le trouvez pas, petite astuce, tapez “le nom de votre thème+child theme” dans votre moteur de recherche préféré. Toutefois, faites attention à choisir le lien du site de l’éditeur et non un lien farfelu qui pourrait vous injecter du code malveillant.

Dès que vous l’aurez trouvé, il vous suffira de télécharger le dossier du thème enfant sur votre ordinateur, puis de le téléverser dans vos thèmes, soit par FTP, soit via votre tableau de bord Apparence/thèmes/téléverser un thème et enfin de l’activer.

Créer le thème enfant manuellement

Les développeurs ne jurent que par cette méthode.

Il est vrai que ce n’est pas très compliqué à faire. Mais bon, créer un thème enfant manuellement est quand même un peu plus long qu’avec un plugin.

Avant toute chose, vous devez vous connecter au FTP de votre site (via FileZilla, un autre client FTP de votre choix ou bien encore via le gestionnaire de fichiers de votre hébergeur).

Pour info, pour le tuto, je passe par FileZilla, mais, la procédure est la même pour tout autre client FTP.😉

Créer le dossier de votre thème enfant

Il faut savoir que chaque thème que vous installez sur votre site Web possède son propre dossier dans un répertoire de thèmes dédié sur votre serveur. Pour commencer, nous allons donc créer un nouveau sous-répertoire pour le thème enfant dans /wp-content/themes/

L’usage veut que vous lui donniez le nom de votre thème suivi de -child mais, vous pouvez tout à fait choisir un tout autre nom.

Ici, je vais faire un thème enfant pour le thème Astra. Pour faire simple, je vais nommer le dossier du thème enfant, astra-child.

En premier lieu, pour créer le dossier, vous vous positionnez sur le dossier themes, vous faites un clic droit avec la souris et choisissez “créer un dossier”.

création dossier thème enfant
nom dossier thème enfant

Générer le fichier functions.php

Deuxièmement, vous devez créer le fichier functions.php.

A noter que c’est dans ce fichier que vous pourrez, par la suite, ajouter les fonctionnalités que vous souhaitez dans votre thème enfant.

Pour créer le fichier, vous n’avez pas besoin d’éditeur de code, vous pouvez très bien le faire via le bloc-notes de Windows, personnellement, c’est ce que je fais.

Donc, vous ouvrez le bloc-notes, vous copiez-collez le code ci-dessous et vous l’enregistrez sous le nom functions.php.

<?php
/* enqueue script for parent theme stylesheeet */
function childtheme_parent_styles() {

// enqueue style
wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘childtheme_parent_styles’);

fichier functions.php du thème enfant

Créer le fichier style.css

Tertio, vous créez le fichier style.css de la même manière que précédemment et l’enregistrez sous le nom style.css.

A noter que c’est dans ce fichier qu’atterriront tous les personnalisations de style.

Cette fois, il vous faudra remplir soigneusement le fichier afin qu’il soit reconnu par WordPress.

Voici, l’exemple de prose à inclure en vous rappelant que, dans ce test , je crée un thème enfant pour Astra :

*
Theme Name: astra child theme
Description: Thème enfant du theme astra
Author: Christine SIEMBIDA
Author URL: https://test.metaforweb.com
Template: astra
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

Faites bien attention de ne pas mettre d’espace avant les 2 points (:), sinon, WordPress ne reconnaitra pas le fichier.

Explications :

*
Theme Name: ici vous mettez le nom que vous souhaitez donner à votre thème enfant
Description: ici vous pouvez mettre une description,mais, ce n’est pas obligatoire
Author: ici, votre nom, non obligatoire également
Author URL: l’URL de votre site, non obligatoire aussi
Template: Ici, c’est très important, il faut mettre le nom du thème parent et l’écrire exactement comme il est écrit dans le dossier de thème en respectant la casse
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ici, le nom du thème enfant
*/

fichier style.css du thème enfant

Téléverser les fichiers par FTP

Là-dessus, il ne vous reste plus qu’à téléverser les fichiers style.css et functions.php dans le dossier de votre thème enfant préalablement créé (dans mon exemple, astra-child).

téléversement des fichiers dans le dossier du thème enfant

Activer le thème enfant

Enfin, allez dans votre tableau de bord WordPress, dans Apparence/thèmes, activez votre thème enfant et admirez le résultat

Encore un petit conseil, avant d’activer, prévisualisez en direct pour être sûr qu’il n’y a pas de bug… on ne sait jamais.

activation thème enfant

Notons que le thème enfant créé manuellement ne comporte aucune image (screenshot).🤔

Mais, rien ne vous empêche de copier-coller l’image de votre thème parent dans le dossier de votre thème enfant ou bien d’en créer un.

En effet, il est possible de créer un screenshot en mettant une image personnalisée avec votre logo par exemple. Pour faire cela, trouvez une image, faites une copie d’écran de votre site ou créez une image. Puis, redimensionnez-la à la taille 1200×900 px, et enfin, nommez-la screenshot.

Pour finir, téléchargez votre image via FTP, File Manager ou le gestionnaire de fichiers de votre hébergeur dans /wp-content/themes/nomdevotrethemeenfant.

Créer le thème enfant en ligne avec WPMarmite

Oui, il est possible de créer votre thème enfant, directement en ligne.

Cool, non ?

Pour cela, il vous suffit de passer par le générateur de thème enfant créé par l’équipe de WPMarmite…coucou Alex 👋

Alors là, c’est tout simple, 2 clics de souris et votre thème enfant est prêt.

Il est à noter que ce générateur vous offre 2 options :

Première option : Si votre site est déjà en ligne, il vous suffit d’entrer l’URL de votre site.

Deuxième option : si votre site n’est pas encore en ligne, en ce cas, cliquez sur le lien “votre site n’est pas encore en ligne” en dessous du bouton.

générateur thème enfant WPmarmite

Pour la deuxième option, renseignez le nom de votre thème parent tel qu’il est indiqué dans votre dossier de thème, en respectant bien la casse.

renseignement nom du thème parent dans générateur thème enfant WPmarmite

Et voilà, le générateur reconnait le thème utilisé et l’indique dans son message final (ici Color Blog pour le thème de mon blog).

télécharger thème enfant WPMarmite

Maintenant, vous n’avez plus qu’à télécharger le zip de votre thème enfant et à le téléverser dans vos thèmes via Apparence/personnaliser/thèmes ou bien encore via FTP de la même façon que si vous téléversiez un thème parent.

N’oubliez surtout pas de l’activer.

Créer le thème enfant avec un plugin

Je trouve cette méthode plus rapide. En effet, quelques secondes suffisent et le tour est joué. En outre, vous n’avez pas besoin de sortir de votre site.

Mon extension préférée pour créer le thème enfant de mon thème parent est WP Child theme generator.

Il s’agit d’une extension gratuite référencée sur WordPress.org.

Plugin Child Theme Generator pour créer un thème enfant

Tout d’abord, installez et activez le plugin.

Puis, allez dans Apparence/Child-Theme-Gen ou cliquez en haut de votre barre d’administration sur “Make Child Theme”.

Vous pouvez alors créer votre thème enfant de deux manières.

Soit, vous choisissez la création en un clic. En ce cas, il vous suffira juste de choisir le thème parent et de cliquer sur “Create Child Theme”.

créer un thème enfant avec Child Theme Generator

Soit, vous souhaitez modifier à votre guise certaines informations du thème enfant comme l’auteur, l’URI de l’auteur, le nom du thème enfant, etc.

Cette option s’avère très utile si vous ne désirez pas que votre thème enfant se prénomme nomdevotrethemeparent child theme.

Alors, dans la case Child Theme Name, renseignez le nom que vous souhaitez, et ce, sans utiliser de caractères spéciaux ni de caractères accentués.

Vous pouvez également indiquer votre nom en tant qu’auteur dans Author Name, modifier la description du thème enfant,…

Une autre fonctionnalité vraiment sympa de ce plugin est que vous pouvez remplacer l’image par défaut du thème parent par une image que vous téléverserez.

Il suffira juste de décocher “Use parent theme’s screenshot” pour faire apparaitre “Choose custom screenshot” et de téléverser une image au format PNG avec pour taille 1200×900 px.

Lorsque vous aurez fini vos personnalisations, cliquez sur “Create Child Theme”.

activer thème enfant

Pour finaliser la création du thème enfant, retournez dans Apparence/thème et n’oubliez pas de l’activer.

Vous pouvez maintenant supprimer le plugin.

Le mot de la fin

Voilà, c’est fini, vous savez, à présent, ce qu’est un thème enfant, à quoi il sert et comment le créer.

A vous de jouer maintenant !

Alors, quelle est votre méthode préférée pour créer votre thème enfant ?

Racontez-moi tout !


Partagez !
Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
5 1 voter
Évaluation de l'article
S’abonner
Notifier de
guest
4 Commentaires
le plus récent
le plus ancien le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
4
0
J'aimerai bien avoir votre avis sur cet article 😉x