« functions.php », « style.css », et rien de plus : voilà à quoi peut se réduire un thème enfant destiné à accompagner un projet construit intégralement sous Elementor. Cette sobriété n’est pas un raccourci de paresse, elle répond à un principe précis : plus un thème enfant embarque de règles CSS génériques, plus il risque d’entrer en conflit avec les styles que génère dynamiquement Elementor pour chaque page.
Sur un projet récent construit avec Hello Elementor comme thème parent, ce principe a guidé la structure du thème enfant du premier au dernier fichier, avec un objectif simple : laisser Elementor gérer la présentation, et réserver le thème enfant aux ajustements strictement impossibles à faire autrement.
L’arborescence retenue
La structure complète du thème enfant tient en une poignée de fichiers, chacun avec un rôle précis et volontairement limité.
hello-enfant/
├── style.css (en-tête obligatoire + variables CSS globales)
├── functions.php (chargement des styles, quelques filtres ciblés)
├── screenshot.png (aperçu dans l'administration)
└── inc/
└── custom-widgets.php (chargement des widgets maison, si besoin)Le fichier style.css réduit à l’en-tête
Le fichier style.css d’un thème enfant WordPress doit obligatoirement contenir un en-tête de commentaire précisant le nom du thème et le thème parent, via la directive Template. Au-delà de cet en-tête, ce fichier reste volontairement vide de toute règle de mise en page : les marges, les couleurs, les tailles de police relèvent d’Elementor lui-même, via ses réglages globaux ou son panneau de CSS personnalisé par page.
/*
Theme Name: Hello Enfant
Template: hello-elementor
Version: 1.0
*/Ajouter des règles générales dans ce fichier — par exemple un * { margin: 0; } — provoque régulièrement des effets de bord inattendus sur des widgets Elementor qui reposent justement sur des marges calculées dynamiquement selon les réglages du panneau. Le principe retenu ici est simple : le thème enfant ne doit toucher que ce qu’Elementor ne peut structurellement pas gérer lui-même.
Le fichier functions.php et le chargement des styles
Le fichier functions.php se limite à charger la feuille de style du thème enfant après celle du thème parent, via le hook wp_enqueue_scripts, en respectant la dépendance entre les deux :
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'hello-elementor-parent',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'hello-enfant',
get_stylesheet_directory_uri() . '/style.css',
array( 'hello-elementor-parent' )
);
} );Ce petit bloc suffit à garantir l’ordre de chargement correct entre les deux feuilles de style, sans quoi les éventuelles règles du thème enfant risqueraient d’être écrasées par celles du parent, chargées après.
Où placer les ajustements réellement nécessaires
Certains besoins ne peuvent pas être couverts par les réglages natifs d’Elementor : une police d’icônes maison, un correctif d’affichage pour un navigateur précis, une variable CSS partagée entre plusieurs templates. Ces cas, peu nombreux sur un projet bien pensé, trouvent leur place dans le fichier style.css du thème enfant, sous forme de règles ciblées, jamais génériques.
- Une variable CSS globale déclarée sur
:root, réutilisée ensuite dans le CSS personnalisé d’Elementor. - Un correctif de compatibilité pour un navigateur précis, documenté par un commentaire expliquant pourquoi.
- Le chargement d’une police locale non couverte par la bibliothèque de polices d’Elementor.
Un thème enfant qui grossit démesurément sur un projet Elementor est souvent le signe que des réglages auraient dû rester dans l’éditeur plutôt que dans du code.
En résumé
Un thème enfant minimal, réduit à trois ou quatre fichiers, laisse à Elementor toute la responsabilité de la présentation visuelle et réserve le code aux seuls cas où l’interface ne suffit pas. Cette discipline, simple à énoncer, demande une vigilance constante face à la tentation d’ajouter « juste une petite règle CSS de plus » à chaque nouvelle demande client.
