Découvrez Comment Créer un Thème Enfant WordPress Facilement et Rapidement !

Avoir un site WordPress personnalisé est un atout majeur. Cependant, une mise à jour de votre thème peut anéantir toutes les personnalisations que vous avez apportées. La solution ? Créer un thème enfant (child theme). Cet article vous guidera à travers les étapes de création d'un thème enfant, son utilité et les différentes méthodes pour le faire.

Qu'est-ce qu'un Thème Enfant WordPress ?

Un thème enfant est un sous-thème qui hérite des fonctionnalités et du style de son thème parent. Tous les thèmes que vous installez dans WordPress sont potentiellement des thèmes parents. 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.

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. 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é.

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.

Pourquoi Utiliser un Thème Enfant ?

Préservation des modifications : Toutes les personnalisations effectuées (CSS, templates, fonctions PHP) sont conservées lors des mises à jour du thème parent.
Isolation des interventions : Le thème enfant offre une structure indépendante pour organiser clairement vos ajustements.
Expérimentation sans risque : Vous pouvez tester de nouvelles mises en page, scripts ou fonctions en toute sécurité.
Bonnes pratiques de développement WordPress : C’est la méthode recommandée par l’équipe WordPress.
Sécurité des mises à jour : Vous pouvez mettre à jour le thème parent sans perdre vos personnalisations du thème enfant.
Meilleure organisation : Votre thème enfant contient uniquement vos personnalisations.

Avez-vous vraiment besoin d’un thème enfant WordPress ?

Dès lors que vous avez choisi votre thème WordPress, vous pouvez créer et installer un thème enfant, mais concrètement, ceci est facultatif et ce ne sera utile que si vous avez besoin de coder de nouvelles fonctionnalités ou si vous devez modifier des fichiers présents dans le thème parent. Cela signifie que vous devrez avoir de bonnes connaissances en langages de programmation (PHP - HTML - JS). Par exemple, si vous utilisez un constructeur de page tel que Divi Builder ou Elementor Pro cela réduit fortement le besoin d’installer un thème enfant sur votre site. En effet, ces outils sont tellement puissants que vous pouvez réaliser la plupart des personnalisations poussées directement sur le site, sans avoir à coder du PHP, du HTML, du JavaScript ou du CSS dans un thème enfant. Donc pour résumer : un thème enfant OUI, c’est une bonne pratique… Mais si vous ne savez pas coder, il ne sert carrément à rien ! Je préfère insister sur ce sujet, car je reçois de nombreux messages régulièrement : comment créer un thème enfant ? À quoi ça sert ? Est-ce utile ? Si vous vous posez ces questions, c’est que vous n’avez pas réellement besoin d’en créer un. Certains élèves ou utilisateurs se prennent la tête durant des heures parce que leur thème enfant ne fonctionne pas… Honnêtement, laissez tomber 😇 Si vous ne savez pas coder un thème enfant (qui nécessite seulement quelques lignes de code) c’est que vous ne saurez pas non plus coder le reste. Si par contre, vous savez quoi faire avec votre thème enfant, que vous avez de l’affection pour le code et que vous avez quelques idées et les compétences pour réaliser des modifications sur votre thème parent, alors foncez ! En fait, créer un thème enfant n’est pas si compliqué à réaliser. C’est peut-être contradictoire avec mon discours précédent, mais si vous ne savez pas coder, vous êtes capable de le faire en quelques minutes.

Méthodes de Création d'un Thème Enfant

Il existe plusieurs méthodes pour créer un thème enfant :

Téléverser le thème enfant de l'éditeur
Créer le thème enfant WordPress manuellement
Créer le thème enfant WordPress en ligne avec WPMarmite
Créer le thème enfant WordPress avec un plugin

1. Téléverser le Thème Enfant de l'Éditeur

Certains éditeurs de thèmes mettent à disposition 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. Bien souvent, il se trouve dans le paragraphe concernant l'installation du thème.

C'est le cas, par exemple, pour :

OceanWP
Hestia
Astra
GeneratePress
Sydney
Neve
Zakra

Si vous ne le trouvez pas, 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.

2. Créer le Thème Enfant WordPress 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).

Étape 1 : 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. Je vais donc créer un dossier nommé astra-child.

Lire aussi: Micro-crèche : le guide de A à Z

Étape 2 : Créer le fichier style.css

C'est le fichier obligatoire pour qu'un thème soit reconnu par WordPress. Dans le dossier astra-child, créez un fichier nommé style.css.

Ouvrez le fichier style.css du thème parent à l’aide d’un éditeur de texte tel que SublimText. Repérer les commentaires placés en début de fichier, commençant par les caractères /* et se terminant par */. Sélectionnez le code d’en-tête (y compris les caractères /* et */) et copiez-le dans un document vierge également nommé style.css, créé à l’aide de votre éditeur de texte.

Ajoutez les informations suivantes dans ce fichier :

/*Theme Name: Astra ChildTheme URI: http://example.com/astra-child/Description: Thème enfant pour AstraAuthor: Votre NomAuthor URI: http://example.comTemplate: astraVersion: 1.0.0Text Domain: astra-child*//* Chargement des styles du parent */@import url("../astra/style.css");/* Vos styles personnalisés commencent ici */

Explication ligne par ligne :

Theme Name : Le nom affiché dans le tableau de bord WordPress.
Theme URI : (Facultatif) L’URL du thème enfant.
Description : Brève explication de votre thème.
Author / Author URI : Vos informations en tant que créateur.
Template : Très important ! C’est le nom exact du dossier du thème parent (respectez majuscules/minuscules).
Text Domain : Utile pour la traduction.

⚠️ Important : il n’y a jamais d’espace avant les deux-points (:) de chaque début de ligne.

La ligne @import url("../astra/style.css"); permet de charger la feuille de style du thème parent. Assurez-vous que le chemin vers le fichier style.css de votre thème parent est correct.

Étape 3 : Créer le fichier functions.php

Créez un fichier nommé functions.php dans le dossier de votre thème enfant. Ajoutez le code suivant :

<?phpadd_action( 'wp_enqueue_scripts', 'wpm_enqueue_styles' );function wpm_enqueue_styles() { 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'));}?>

Ce code permet de charger la feuille de style du thème parent avant celle du thème enfant. Cela permet de s'assurer que les styles du thème enfant surcharge bien ceux du thème parent.

Étape 4 : Ajouter une capture d'écran (screenshot.png)

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 1200x900 px, et enfin, nommez-la screenshot.png.

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.

Étape 5 : Activer le thème enfant dans WordPress

Allez dans votre tableau de bord WordPress. Menu Apparence > Thèmes. Vous verrez votre nouveau thème Astra Child (ou celui que vous avez nommé). Cliquez sur Activer.

3. Créer le Thème Enfant WordPress 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. 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.

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.

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).

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.

4. Créer le Thème Enfant WordPress 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.

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".
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 1200x900 px.

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

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.

Personnaliser Votre Thème Enfant

Une fois le thème enfant installé et activé, vous pouvez commencer les personnalisations (onglet Apparence > Personnaliser) comme vous le feriez pour un thème parent.

Adapter le code d’un modèle de page à vos besoins

Le principe d’un thème enfant est le suivant : s’il possède un modèle de page, ce dernier a la priorité par rapport à celui du thème parent. Je m’explique avec un exemple : imaginons que vous utilisez un thème WordPress classique, et que souhaitez modifier le pied de page de votre site pour y supprimer la référence au copyright et y ajouter d’autres informations. Pour ce faire, il va falloir copier le fichier footer.php qui se trouve dans votre thème parent puis le coller dans votre thème enfant. Maintenant que ce fichier existe dans votre thème enfant, c’est lui qui est utilisé : il surcharge le footer.php du thème parent (le fichier enfant a la priorité sur le parent). Pour ce qui est des autres modèles (header.php, page.php, etc.), votre thème continuera d’utiliser les éléments présents dans le parent, car ils ne sont pas présents dans le répertoire enfant.

Personnaliser la feuille de style

En ajoutant vos modifications dans le fichier style.css du thème enfant, vous allez pouvoir modifier la mise en forme de l’ensemble des éléments graphiques du site. Que ce soit les couleurs, les positionnements, les tailles des textes, les polices… bref, vous avez la main.

Ajouter de nouvelles fonctions à votre thème

En ce qui concerne les fonctions du thème (celles qui se trouvent dans le fichier functions.php), si vous créez un fichier functions.php dans le thème enfant, ce dernier sera chargé en premier, puis le fichier functions.php du thème parent. Le fichier functions.php du thème enfant sera chargé juste avant celui du thème parent. L’avantage, c’est que vous pouvez apporter toutes les nouvelles fonctions que vous souhaitez en étant sûr, qu’au moins, le fichier d’origine ne sera pas cassé.

Le Thème Enfant de WordPress ne Fonctionne Pas

C’est assez rare, mais il est possible que le thème enfant ne fonctionne pas malgré avoir suivi scrupuleusement notre procédure. Rassurez-vous, ce n’est pas de votre faute ! Certains themes sont codés différement, sans tenir compte de la possibilité de créer un thème enfant.

Si votre thème enfant ne s’affichage pas dans le tableau de bord, ou si votre site ne s’affiche pas correctement après l’avoir activé, voici quelques éléments que vous pouvez vérifier :

Vérifiez votre fichier functions.php : Assurez-vous que vous avez mis en file d’attente la feuille de style de votre thème enfant dans votre fichier functions.php. Si vous ne l’avez pas mise en file d’attente, votre thème enfant ne se chargera pas.
Vérifiez que vous avez correctement nommée la feuille « style.css » : Vérifiez que vous avez nommé votre feuille CSS « style.css », et non « stylesheet.css ».
Videz votre cache : Essayez de vider le cache de WordPress si vous en avez un. En effet, votre navigateur peut vous montrer une ancienne version de votre site, il faut donc également vider le cache du navigateur.
Ajoutez !important à votre code CSS : Si le thème parent écrase toujours le code CSS de votre thème enfant, ajoutez « !important » aux éléments que vous avez modifiés. Cela remplacera de force tout ce qui est écrit dans la feuille CSS du thème parent.
Contactez l’assistance de votre thème ou consultez le forum du thème.

Alternatives à l'Utilisation d'un Thème Enfant

Après, il faut savoir que si vous ne souhaitez faire que des modifications de style, il ne sert à rien de créer un thème enfant. En effet, il vous suffira d'ajouter votre CSS dans Apparence/personnaliser/CSS additionnel.

D'autre part, si vous avez dans l'idée d'ajouter quelques codes en PHP ou en HTML, là encore un thème enfant n'est pas indispensable. Vous pouvez vous servir d'une extension telle que Code Snippets ou WPCode pour le faire.

Si vous utilisez un constructeur de page tel qu'Elementor Pro, vous pouvez concevoir votre propre en-tête, pied de page et réaliser tous les modèles de pages de la hiérarchie des templates.

tags: #creer #un #theme #enfant #wordpress #tutoriel

Tutoriel : Créer un Thème Enfant WordPress