Enfant Hello Elementor : Le Guide Ultime pour Personnaliser Facilement Votre Site WordPress

Vous avez choisi un thème WordPress qui vous plaît, mais vous souhaitez le personnaliser sans risquer de perdre vos modifications lors de la prochaine mise à jour? C’est précisément la fonction du thème enfant. Dans le domaine du développement web, l’utilisation d’un thème enfant Elementor est presque incontournable. Bien que celui-ci reste facultatif, “un child theme” assure en toute confiance la sauvegarde de la mise en page et des fonctionnalités de votre site web.

⚠️ Cet article concerne uniquement les thèmes WordPress classiques, et non les thèmes FSE (Full Site Editing) comme Twenty Twenty-Four. Si vous utilisez un thème FSE, rendez-vous directement à la section "Et si vous utilisez un thème FSE".

Cet article vous expliquera à quoi il sert, comment le créer et comment l’installer pas à pas, même si vous débutez sur WordPress.

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

Un “Child Theme”, ou thème enfant en français, désigne un thème qui se base sur le thème parent de votre site. En d’autres termes, il possède le même design, les mêmes fonctionnalités que ce dernier. Qu’en est-il de WordPress dans tout ça ? Pour sa part, le CMS considérera en premier les fonctionnalités du thème enfant. Un thème enfant est un thème WordPress qui hérite de toutes les fonctionnalités, du style et des modèles d’un autre thème - appelé thème parent. Un thème parent installé et activé (ex. Ici se trouvent tous vos thèmes. En résumé, un thème enfant permet de personnaliser radicalement votre thème WordPress sans toucher au code du parent. Ce dernier pourra donc être mis à jour sans crainte.

Son utilité est à la fois simple et essentielle : il vous offre la possibilité de personnaliser votre site sans modifier directement les fichiers du thème principal. C’est aussi l’endroit idéal pour :

Ajouter des fonctions personnalisées en PHP
Déclarer des shortcodes
Ajouter des hooks et filtres WordPress

Les fonctions du thème parent restent actives, et celles du thème enfant s’ajoutent ou les complètent.

Pourquoi Utiliser un Thème Enfant ?

Un thème enfant, à quoi ça sert? Un thème enfant, c’est un thème qui va hériter des fonctionnalités, du design et de la mise en page d’un thème installé sur un site (qui devient le thème parent) et permettre de le personnaliser en profondeur. Le thème parent reste intact, toutes les modifications sont apportées au thème enfant. De son côté, WordPress va d’abord prendre en compte les fichiers du thème enfant. Et s’il a besoin d’autres fichiers pour fonctionner, il ira les chercher dans le thème parent. Pour ainsi dire, un thème enfant vous permet de remanier votre site sans toucher au code parent. En tout cas, sachez qu’utiliser un thème enfant n’est pas une étape obligatoire. Tout webmaster vous le confirmera.

Parfois, notre thème WordPress ne nous offre pas les options de personnalisation souhaitées. L’exemple typique, c’est la modification de cette satanée mention « Copyright » dans le pied de page. Si l’auteur du thème n’a pas ajouté de réglage au niveau de l’Outil de personnalisation, on n’a plus que nos yeux pour pleurer (même si, entre nous, c’est de plus en plus rare au sein des principaux thèmes WordPress gratuits). Bien entendu, il est hors de question de modifier directement le code de notre thème. Si ce dernier devait être mis à jour, les modifications seraient perdues ! La seule solution, c’est de créer un thème enfant. Grâce à lui, on personnalisera le fichier footer.php du pied de page et le tour sera joué. De même, ce dernier sera utile pour personnaliser la structure des pages d’archive, de taxonomie ou de n’importe quel autre fichier de la hiérarchie des templates. Une autre raison valable serait d’intervenir sur les templates proposés par certaines extensions. Dans ces 3 cas, utiliser un thème enfant est indispensable.

Avantages Clés

Sécurité des Modifications : Évitez de perdre vos personnalisations lors des mises à jour du thème parent.
Organisation du Code : Gardez vos modifications séparées du thème principal, facilitant la maintenance et le débogage.
Flexibilité : Personnalisez votre site en profondeur sans compromettre l'intégrité du thème parent.

Inconvénients Potentiels

Complexité Initiale : Nécessite une compréhension de base des fichiers et de la structure des thèmes WordPress.
Maintenance : Vous devez maintenir votre thème enfant à jour avec les changements du thème parent.

Comment Créer un Thème Enfant

Pour le créer en deux clics, vous pouvez utiliser notre générateur de thème enfant. Avant de commencer, éclaircissons la structure de votre site WordPress. Les thèmes installés sur votre site sont situés dans le répertoire suivant : /wp-content/themes/. Imaginons que je souhaite personnaliser le thème Twenty Twenty-Four. Ses fichiers sont situés dans le dossier suivant : /wp-content/themes/twentytwentyfour/. Ce thème est basé sur des blocs, ce qui signifie que vous pouvez utiliser les blocs de l’éditeur de contenu (Gutenberg) pour éditer toutes les parties de votre site (contenu, en-tête, pied de page, menu et modèles de pages). Ceci étant posé, nous pouvons nous lancer.

Étape 1 : Créer le Répertoire du Thème Enfant

La première étape pour créer votre thème enfant est de créer un répertoire pour celui-ci. Avec l’aide d’un client FTP, directement sur votre serveur, ou directement sur votre ordinateur si vous travaillez en local, vous allez devoir créer un nouveau répertoire qui, dans notre exemple, portera le nom : twentytwentyfour-enfant. Ce répertoire devra être créé ici : /wp-content/themes/twentytwentyfour-enfant/. La bonne pratique consiste à reprendre le nom du thème parent puis à y ajouter le suffixe -enfant ou -child, comme dans l’image ci-dessous. Une fois le répertoire créé, on passe à l’étape suivante.

Étape 2 : Créer une Feuille de Style (style.css)

La deuxième étape pour créer votre thème enfant est de créer dans le répertoire du thème enfant une feuille de style, nommée style.css, qui va indiquer que ce nouveau thème est… justement un thème enfant de votre thème parent. Vous venez de créer avec amour le fichier style.css de votre thème enfant.

À l’intérieur, vous devez inclure un en-tête spécifique qui informe WordPress que ce thème est un thème enfant. Voici un exemple de code à insérer dans votre fichier style.css :

/* Theme Name: Twenty Twenty-Four Enfant Theme URI: http://example.com/twenty-twenty-four-enfant/ Description: Thème enfant pour Twenty Twenty-Four Author: Votre Nom Author URI: http://example.com Template: twentytwentyfour Version: 1.0.0 Text Domain: twenty-twenty-four-enfant*//*Ajoutez ici vos styles CSS personnalisés*/

Explication des champs :

Theme Name : Le nom du thème que vous allez créer ;
Theme URI : L’adresse où on peut le télécharger, si applicable ;
Description : La description du thème ;
Author : L’auteur du thème… y mettre votre nom ;
Author URI : L’adresse où l’on va retrouver des infos sur l’auteur ;
Template : Le thème parent qui va être utilisé. Il faut y mettre le nom du répertoire de celui-ci, en respectant la casse ;
Version : Si vous tenez des numéros de version, c’est par ici que cela se passe.

N’ajoutez pas d’espace avant le double point. Deux champs sont obligatoires pour que votre thème enfant fonctionne : le champ Theme Name est nécessaire pour que WordPress reconnaisse les fichiers de ce dossier comme un thème ; le champ Template indique à WordPress le nom du thème parent. Les autres champs servent à ajouter des informations supplémentaires, comme celles que vous pouvez voir sur les autres thèmes.

Étape 3 : Importer le Style du Thème Parent

Pour importer le style du thème parent dans votre thème enfant, vous allez devoir créer un fichier functions.php, reconnu et chargé automatiquement. A minima, voici ce que donne la structure de notre thème enfant.

Créez un fichier functions.php dans le répertoire de votre thème enfant. Ce fichier est essentiel pour charger la feuille de style du thème parent. Ajoutez le code suivant à votre fichier functions.php :

<?phpadd_action( 'wp_enqueue_scripts', 'wpm_enqueue_styles' );function wpm_enqueue_styles() { wp_enqueue_style( 'enfant-style', get_stylesheet_uri() );}

Étudions ces lignes de code. À première vue, on peut voir qu’on associe le hook « wpenqueuescripts » à la fonction « wpmenqueuestyles() ». Un hook est un point d’accroche dans l’exécution de WordPress, sur lequel on peut greffer des fonctions afin d’en modifier le comportement. Pour vous en dire un peu plus, ce hook est déclenché au moment où WordPress est prêt à charger les scripts, et on vient y greffer notre code pour lui indiquer de charger les styles du thème enfant. Dans notre cas, il s’agit de charger le fichier style.css de notre thème enfant tout juste créé. Vous pouvez, si le cœur vous en dit, changer le nom de la fonction wpmenqueuestyles() en changeant par exemple le préfixe, « wpm » correspondant à WPMarmite. Ceci étant, cette méthode peut ne pas fonctionner si votre thème parent charge ses propres styles en ignorant ceux de l’enfant. Dans ce cas, voici la méthode à employer. Sauvegardez le tout pour finaliser la création de votre thème enfant.

Lire aussi: Bien-être des bébés en hiver

Méthode Alternative pour Importer les Styles

Si la méthode précédente ne fonctionne pas, essayez cette alternative dans votre fichier functions.php :

<?phpadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. 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 ), wp_get_theme()->get('Version') );}

Étape 4 : Activer le Thème Enfant

Une fois que vous avez créé votre thème enfant, il est temps de l’activer ! Rendez-vous dans l’administration WordPress, dans Apparence > Thèmes pour y retrouver votre thème enfant fraîchement sorti de l’œuf. Vous reconnaîtrez votre progéniture facilement : elle porte le nom que vous lui avez attribué à la naissance et affiche un fond transparent au lieu d’une capture d’écran de la page d’accueil. Si vous trouvez que votre thème enfant ne paye pas de mine sans capture, vous pouvez en ajouter une dans son dossier. Pour être reconnue par le thème, la capture doit être nommée screenshot.png et mesurer 1200×900px.Vous pouvez aussi copier le fichier screenshot.png du thème parent et le coller dans le thème enfant pour avoir la même capture, ou encore télécharger ce modèle. Si vous activez ce thème enfant sur un site tout neuf, vous pourrez voir que… rien ne change. Renversant, non ? 🙃 C’est bien normal, car nous n’avons pas encore modifié notre thème enfant. Pour le moment, on peut simplement constater que l’appel du thème parent est fonctionnel. Si vous activez un thème enfant sur un site existant, la configuration des menus, des widgets et de l’Outil de personnalisation devra être effectuée de nouveau.

Dans WordPress, allez dans Apparence > Thèmes. Cliquez sur Activer en dessous de votre thème enfant. C’est tout ! Félicitations 🎉. Votre thème enfant est activé : vous pouvez maintenant personnaliser votre site en toute tranquilité.

Personnaliser Votre Thème Enfant

Bien ! C’est maintenant que tous vos talents de développeur et de webdesigner vont être mis à rude épreuve… Car vous pouvez maintenant apporter toutes les modifications que vous souhaitez. Quelles sont les actions que vous allez pouvoir mener ?

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. La prochaine étape est donc d’identifier la ligne dans le code qui correspond au copyright et d’y ajouter vos différentes mentions en modifiant le code HTML. Attention, vous pourriez être tenté de copier tous les fichiers de votre thème parent pour pouvoir les modifier à loisir dans votre thème enfant. C’est tentant… mais c’est aussi une très mauvaise pratique. En effet, si vous faites cela, vos nouveaux fichiers auront toujours la main sur les fichiers du parent, et donc… les mises à jour des modèles de pages ne seront pas effectives sur votre site. Ne copiez les fichiers et modifiez QUE les éléments dont vous avez vraiment besoin et que vous ne pouvez pas impacter dans les feuilles de style.

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. Pour tester vos modifications en direct, vous pouvez utiliser l’inspecteur de votre navigateur favori, accessible par un clic droit sur l’élément qui vous intéresse, puis sur « Inspecter » (l’intitulé peut légèrement différer selon le navigateur que vous utilisez). Tout d’abord, je sélectionne l’élément que je veux modifier. Un nouvel espace permet d’identifier les éléments de style (dans l’encadré à droite) liés à telle ou telle partie du site. Pour sélectionner un autre élément, il vous suffit de cliquer sur la flèche en haut à gauche de l’inspecteur afin de survoler et de cliquer sur l’élément que vous souhaitez modifier. Ensuite, vous pouvez apporter vos modifications au CSS pour tester de nouvelles mises en forme en direct. Ici, je change la couleur de l’élément. Quand les modifications vous conviennent, il vous suffit d’ajouter les éléments de code correspondant au thème enfant. Par exemple, ici, pour modifier la couleur de la date du commentaire de l’article, il suffit d’ajouter ce contenu à la feuille de style que vous avez créée à l’étape 2, sous le code précédemment ajouté :

.wp-block-post-date a:where(:not(.wp-element-button)) { color: red;}

Et hop ! C’est fait !

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é. Par exemple, si vous souhaitez ajouter des dimensions d’images personnalisées pour vos imports d’images, il suffira d’ajouter les lignes suivantes dans le fichier functions.php du thème enfant.

// Ajout de tailles d’images personnaliséesfunction wpm_nouvelles_tailles_images() { add_image_size( 'taille-01', 580, 200 ); add_image_size( 'taille-thumb', 80, 80 );}add_action( 'after_setup_theme', 'wpm_nouvelles_tailles_images' );

Si vous souhaitez en savoir plus sur cette fonction addimagesize, je vous invite à découvrir la page dédiée du DevHub WordPress.

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

Aujourd’hui, certaines approches permettent d’éviter complètement les thèmes enfants, notamment si vous ne souhaitez que modifier un peu de CSS ou ajouter des fonctions PHP. Des extensions comme, par exemple, WPCode ou Code Snippets vous permettent d’ajouter du code :

Directement depuis l’admin WordPress
Avec des sauvegardes et un contrôle d’activation (on active ou pas le code ajouté)
Sans toucher aux fichiers du thème

Avantages de ces alternatives :

Pas besoin de FTP
Pas de risque de faire « planter » le site en cas d’erreur
Le code reste actif même si vous changez de thème

Thèmes FSE (Full Site Editing) et Thèmes Enfants

Depuis WordPress 5.9, de nouveaux thèmes appelés FSE (Full Site Editing) vous permettent de personnaliser entièrement l’apparence du site (en-tête, pied de page, pages, articles) directement depuis l’éditeur de site, sans toucher au code. Ces thèmes modernes (comme Twenty Twenty-Four, Tove, Spectra One, Frost…) fonctionnent différemment des thèmes classiques.

→ Avez-vous besoin d’un thème enfant avec un thème FSE ? Non, pas dans la plupart des cas. Vous pouvez :

Modifier l’apparence de votre site dans l’éditeur (bloc par bloc)
Créer des modèles de page ou d’article personnalisés
Et ajouter du CSS ou du code PHP via des extensions comme WPCode ou Code Snippets

Un thème enfant n’est utile que si vous souhaitez modifier en profondeur le fonctionnement du thème, comme ses modèles HTML (templates) ou son fichier theme.json.

Alternative : Créer un Thème Enfant avec une Extension

Pas à l’aise avec les fichiers ? Il existe des extensions gratuites qui vous permettent de créer un thème enfant en un clic. Ces outils génèrent automatiquement les fichiers.

Child Theme Configurator

Le générateur de thème enfant le plus complet. Interface en français. Vous avez même la possibilité d’importer les réglages du thème parent pour éviter les pertes. Ce qui veut dire que vous pouvez générer un thème enfant même si vous avez déjà travaillé sur votre site ou qu’il est terminé.

WP Child Theme Generator

Générateur de thème enfant un peu plus basique. Attention, c’est en anglais, mais si vous avez lu le chapitre sur le style.css, cela ne devrait pas vous poser de problème.

À savoir : il existe aussi des générateurs de thème enfant en ligne, pas besoin d’extension, par exemple, celui de WPMarmite

Astuce : Utiliser un Thème Enfant Prêt à l'Emploi

Si vous utilisez un thème populaire comme Astra, OceanWP, GeneratePress, ou encore Hello Elementor, sachez qu’il existe souvent des thèmes enfants préconfigurés par le développeur du thème, quoi de plus sûr ? 🙂

Par exemple, vous pouvez faire une recherche sur Google avec simplement : OceanWP child theme

Vous trouverez souvent un fichier .zip à télécharger et installer via Apparence > Thèmes > Ajouter > Téléverser un thème. C’est encore plus rapide, surtout si vous ne voulez pas manipuler les fichiers à la main.

Hello Elementor et les Thèmes Enfants

Vous utilisez Elementor pour créer votre site WordPress et vous cherchez un thème qui ne viendra pas compliquer les choses ? Hello Elementor pourrait bien être la solution idéale que vous attendiez. Avec plus d’1 million d’installations actives, Hello Elementor est le thème non-natif le plus populaire du répertoire officiel WordPress, aux côtés d’Astra.

Hello Elementor est le thème officiel développé par l’équipe d’Elementor. Contrairement aux thèmes WordPress traditionnels qui imposent leur propre design et leurs styles, Hello Elementor adopte une approche radicalement différente : c’est une toile vierge sur laquelle vous pouvez créer exactement ce que vous imaginez.

Gratuit et disponible dans le répertoire WordPress, ce thème minimaliste a été conçu spécifiquement pour fonctionner en parfaite harmonie avec Elementor. Pensez-y comme à une page blanche qui n’attend que votre créativité, sans aucun style préétabli qui viendrait limiter vos possibilités.

Caractéristiques de Hello Elementor

Hello Elementor se distingue par plusieurs atouts majeurs qui en font un choix privilégié pour votre projet web :

Une légèreté exceptionnelle : Avec seulement environ 6 Ko de code, Hello Elementor se charge à une vitesse impressionnante. Cette légèreté se traduit directement par un site plus rapide pour vos visiteurs.
Une compatibilité parfaite avec Elementor : Le thème est compatible à 100 % avec Elementor et Elementor Pro, ce qui signifie que vous ne rencontrerez aucun conflit ou bug bizarre.
Une liberté de design totale : L’approche minimaliste de Hello Elementor impose très peu de styles prédéfinis, vous offrant ainsi une liberté totale dans la conception de votre site.
Les fonctionnalités essentielles intégrées : Hello Elementor reste réactif et optimisé pour mobile, compatible avec les langues de droite à gauche (RTL), multilingue, et permet de personnaliser facilement votre logo, vos menus et les réglages de base.

Avantages SEO et Performance

Un code minimal se traduit par un chargement rapide, ce qui améliore l’expérience utilisateur et peut potentiellement favoriser un meilleur classement dans les moteurs de recherche. Google accorde une importance croissante à la vitesse de chargement des sites, particulièrement sur mobile.

Types de Projets Idéaux pour Hello Elementor

Hello Elementor s’adapte particulièrement bien à certaines situations :

Sites vitrines créés de A à Z
Landing pages et pages de vente
Projets nécessitant une personnalisation complète
Sites gérés avec Elementor Pro
Professionnels autonomes

Installation de Hello Elementor

Dans votre tableau de bord WordPress, rendez-vous dans Apparence puis Thèmes, cliquez sur Ajouter, recherchez « Hello Elementor« , puis installez-le et activez-le.
Une fois Hello Elementor activé, utilisez Elementor (et idéalement Elementor Pro) pour créer votre site depuis une page vierge ou un template, en construisant votre en-tête, votre pied de page et vos contenus.

Faut-il Créer un Thème Enfant pour Hello Elementor ?

Dans la plupart des cas, non. Voici pourquoi Hello Elementor fait exception à la règle habituelle :

Avec Elementor, vous personnalisez tout visuellement : Contrairement aux thèmes traditionnels où vous devez souvent modifier du code pour personnaliser l’apparence, avec Hello Elementor et Elementor, vous créez tout via l’éditeur visuel. Pas besoin de toucher au code.
Le thème est volontairement minimaliste : Il y a très peu de fichiers et pratiquement aucun style à modifier, ce qui réduit considérablement le besoin d’un thème enfant.
Les mises à jour ne touchent pas vos créations Elementor : Vos pages, en-têtes et pieds de page créés avec Elementor sont stockés dans la base de données, pas dans les fichiers du thème. Une mise à jour de Hello Elementor ne les affectera donc pas.

Quand un Thème Enfant est-il Indispensable pour Hello Elementor ?

Créez un thème enfant uniquement si :

Vous ajoutez du code PHP personnalisé dans functions.php
Vous modifiez directement les templates de page
Vous gérez du CSS complexe dans un fichier séparé
Vous travaillez pour un client (précaution professionnelle)

Comment Créer un Thème Enfant pour Hello Elementor

Avec un plugin : Installez un plugin comme « Child Theme Configurator » ou « WP Child Theme Generator » depuis votre tableau de bord WordPress.
Manuellement : Créez un nouveau dossier dans votre répertoire de thèmes (wp-content/themes), par exemple « hello-elementor-child ». Dans ce dossier, créez deux fichiers : style.css avec les informations d’en-tête du thème, et functions.php pour charger les styles du thème parent. Activez ensuite votre thème enfant depuis Apparence puis Thèmes dans WordPress.

Thème enfant ou pas ? Petite synthèse 🙂

Si vous utilisez un thème WordPress classique et souhaitez modifier du code, ajouter du CSS personnalisé ou surcharger un fichier (footer.php, single.php, etc.), le thème enfant est la bonne solution. Si vous utilisez un thème Full Site Editing (FSE), vous pouvez souvent vous passer de thème enfant.

tags: #theme #enfant #hello #elementor

Thème Enfant Hello Elementor: Guide Complet pour Personnaliser Votre Site WordPress