En tant que développeur, on nous demande régulièrement de créer des thèmes WordPress, avec ou sans page builder. Personnellement, je préfère travailler sans 😅, mais il faut savoir s’adapter à la demande tout en garantissant un code propre, optimisé et SEO-friendly.
Elementor est devenu incontournable dans l’écosystème WordPress. Il permet à des utilisateurs non techniques de créer des pages visuellement en glisser-déposer. Mais en tant que développeur, tu as sans doute remarqué que les performances en pâtissent souvent, surtout quand les clients utilisent des thèmes premium tout-en-un. Alors comment concilier performance, personnalisation, et compatibilité avec Elementor ?
Dans cet article, je te montre pas à pas comment créer un thème WordPress sur mesure, 100 % compatible Elementor, tout en étant léger, rapide et optimisé.
Pourquoi créer ton propre thème au lieu d’utiliser un thème premium ?
Les thèmes premium vendus sur les marketplaces sont séduisants : design impressionnant, nombreuses fonctionnalités intégrées, promesse de « tout faire en un clic ». Mais en coulisses :
- Le code est souvent surchargé (sliders, shortcodes, builders intégrés…)
- Le CSS/JS est chargé sur toutes les pages, même inutilisé
- La personnalisation est parfois bloquée ou nécessite des hacks
- Les performances sont médiocres (scores Lighthouse faibles, pages lentes)
Créer ton propre thème compatible Elementor te donne le meilleur des deux mondes :
- Performance (contrôle total des assets chargés)
- Flexibilité (tu ajoutes seulement ce dont tu as besoin)
- Expérience utilisateur claire (surtout pour tes clients)
Étape 1 : Démarre sur une base propre et légère
Pour commencer, tu peux t’appuyer sur Underscores (ou « _s »), un starter theme minimaliste développé par Automattic. Il contient juste ce qu’il faut pour commencer :
- Structure de fichiers bien pensée
- Hooks WordPress essentiels
- Support des menus, images mises en avant, etc.
Une fois téléchargé, supprime tout ce qui ne te sert pas (templates inutiles, commentaires, styles par défaut) et ajoute ta propre structure de dossier si besoin (/assets/css, /assets/js, /includes, etc.).
Étape 2 : Rendre ton thème compatible Elementor
Elementor peut remplacer complètement l’affichage du site via son Theme Builder. Pour le permettre, ajoute ce hook dans functions.php :
add_action( 'elementor/theme/register_locations', function( $elementor_theme_manager ) {
$elementor_theme_manager->register_all_core_location();
});
Tu dois aussi activer les fonctionnalités de base :
add_action( 'after_setup_theme', function() {
add_theme_support( 'elementor-headings' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'menus' );
});
Étape 3 : Nettoyer les templates
Les fichiers header.php, footer.php, page.php et single.php doivent être simples et propres :
<?php get_header(); ?>
<main id="site-content">
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
</main>
<?php get_footer(); ?>
Astuce performance : je recommande de ne pas utiliser Elementor pour le header et le footer.
Tu gagnes en performance, accessibilité, et maîtrise du HTML sémantique.
Coder le header/footer toi-même permet :
- Une structure propre (
<header>,<nav>,<footer>) - Un meilleur SEO (balises claires, intégration microdonnées)
- Une réduction drastique du DOM et des fichiers JS/CSS inutiles
- Une meilleure personnalisation via
wp_nav_menu()et des hooks PHP
Laisse Elementor uniquement pour gérer le contenu central (the_content()), là où le client a besoin de flexibilité visuelle.
Étape 4 : Optimiser le chargement des assets
Un thème optimisé ne doit pas charger tout, tout le temps. Utilise des conditions pour charger des scripts uniquement là où c’est nécessaire. Par exemple :
if ( is_singular( 'formation' ) ) {
wp_enqueue_style( 'formation-style', get_template_directory_uri() . '/css/formation.css' );
}
Tu peux aussi désactiver les Google Fonts d’Elementor dans l’onglet « Performances » du plugin, et charger tes propres polices localement.
Étape 5 : Ajouter des styles personnalisés compatibles Elementor
Tu peux créer un fichier elementor-style.css et l’ajouter dans l’interface frontend d’Elementor :
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_enqueue_style( 'mon-style-global', get_template_directory_uri() . '/css/elementor-style.css' );
});
Tu y ajoutes les règles CSS de base : typographies, boutons, couleurs, animations, etc. Cela te permet d’harmoniser tous les blocs Elementor selon ta charte sans devoir les styliser à la main à chaque fois.
Étape 6 : Gérer les performances
Pour rester rapide :
- Active la mise en cache avec WP Rocket, LiteSpeed Cache ou autre
- Utilise Asset CleanUp pour décharger les CSS inutiles
- Minifie et concatène les scripts en local (ou via un build front-end type Gulp/Vite)
Un thème Elementor sur mesure peut afficher des scores supérieurs à 90 sur Lighthouse si il bien développé.
Conclusion
Elementor est un excellent outil de design, mais il ne faut pas se reposer sur des thèmes lourds si tu veux garder la main sur les performances. En tant que développeur, tu peux proposer une solution hybride : un thème sur mesure, ultra-léger, mais totalement compatible avec Elementor pour donner la liberté de design à tes clients… tout en gardant un site rapide, propre, et bien référencé.
Tu veux proposer ce type de thème à tes clients ? Je peux t’aider à le mettre en place, ou à le développer pour toi. Contacte-moi pour en discuter !
