Twenty Twenty-Three, le thème par défaut livré avec WordPress 6.1, a popularisé une idée qui semblait presque contre-intuitive à l’époque : un seul thème, plusieurs identités visuelles complètes, sélectionnables en un clic depuis l’éditeur de site. Pas de thème enfant à créer, pas de fichier CSS à surcharger, juste un fichier JSON à choisir dans un menu déroulant du panneau Styles.
Cette fonctionnalité s’appelle les variations de styles. Elle repose sur un mécanisme simple mais puissant du thème de blocs : un dossier /styles contenant des fichiers JSON qui redéfinissent tout ou partie du theme.json principal. Voyons comment ça fonctionne, comment en créer une soi-même, et pourquoi cette approche change la donne face au thème enfant classique.
Comment Twenty Twenty-Three utilise les variations
Twenty Twenty-Three embarque dix variations de styles, chacune correspondant à une palette et une typographie différentes, allant d’ambiances sobres à des univers plus colorés. Dans l’éditeur de site, il suffit d’ouvrir le panneau Styles puis de cliquer sur l’icône de navigation entre styles pour voir apparaître les vignettes de chaque variation, avec un aperçu miniature généré automatiquement à partir du Style Book.
Techniquement, chaque variation est un fichier JSON placé dans styles/nom-variation.json à la racine du thème. WordPress les détecte automatiquement au chargement du thème, sans qu’aucune déclaration PHP ne soit nécessaire dans functions.php. Le client choisit une variation, WordPress l’enregistre en base dans les réglages globaux du thème, et l’ensemble du site en hérite instantanément, sans rechargement de fichiers ni recompilation.
Créer sa propre variation de styles
Créer une variation revient à écrire un fichier JSON qui suit la même structure que le theme.json principal, mais allégé aux seules clés que l’on souhaite modifier. Voici un exemple minimal, une variation « Contraste » qui change la palette de couleurs et la police de titre :
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"title": "Contraste",
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#101828", "name": "Primaire" },
{ "slug": "accent", "color": "#f97316", "name": "Accent" }
]
},
"typography": {
"fontFamilies": [
{
"slug": "heading",
"fontFamily": "\"Fraunces\", serif",
"name": "Titres"
}
]
}
},
"styles": {
"elements": {
"heading": {
"typography": { "fontFamily": "var(--wp--preset--font-family--heading)" }
}
}
}
}
Ce fichier placé dans styles/contraste.json suffit : WordPress fusionne ces réglages avec le theme.json principal du thème, en ne surchargeant que les clés présentes. Pas besoin de dupliquer l’intégralité du fichier, seulement les différences propres à cette identité visuelle.
Variations de styles contre thème enfant : le comparatif
Face à cette approche, le réflexe historique du thème enfant garde ses partisans, notamment pour des personnalisations qui touchent au PHP ou aux templates. Mais pour une simple déclinaison graphique, les deux approches ne jouent clairement plus dans la même catégorie.
| Critère | Variation de styles | Thème enfant |
|---|---|---|
| Fichier requis | Un simple JSON dans /styles | Un thème complet avec style.css et functions.php |
| Changement par le client | Instantané, depuis l’éditeur de site | Nécessite une intervention technique |
| Portée | Couleurs, typographies, espacements, styles de blocs | N’importe quoi, y compris logique PHP et templates |
| Maintenance | Suit les mises à jour du thème parent sans risque | Peut diverger si le thème parent change de structure |
| Réversibilité | Retour à une autre variation en un clic | Nécessite de désactiver le thème enfant |
| Cas d’usage typique | Décliner une identité graphique | Modifier un comportement ou un gabarit |
En clair, les deux ne sont pas concurrents mais complémentaires. Une variation de styles répond très bien à un besoin d’agence qui produit plusieurs sites déclinés d’un même thème pour différents clients ou différentes marques d’un groupe. Un thème enfant reste indispensable dès qu’on touche à la logique métier, aux templates PHP ou qu’on ajoute des fonctionnalités qui dépassent le simple habillage visuel.
Un cas d’usage d’agence concret
Sur un projet récent pour un réseau de plusieurs enseignes d’un même groupe, j’ai construit un unique thème de blocs avec une structure commune, puis une variation de styles par enseigne : logo, palette de couleurs et typographie propres à chacune, tout en partageant exactement les mêmes patterns et templates. Résultat : une seule base de code à maintenir, des mises à jour appliquées une fois pour tous les sites, et une flexibilité graphique que le thème enfant n’aurait offerte qu’au prix d’une duplication de code.
Mon conseil maison : listez d’abord ce qui varie réellement entre vos identités visuelles avant de choisir. Si ça se limite aux couleurs, à la typographie et aux styles de blocs, une variation suffit largement ; dès qu’un template ou une logique PHP diverge, repartez sur un thème enfant.
En résumé
Les variations de styles apportent une réponse élégante à un besoin très concret d’agence : proposer plusieurs identités visuelles sans multiplier les bases de code. Un dossier /styles, quelques fichiers JSON, et le client choisit son ambiance depuis l’éditeur de site sans intervention technique.
Le thème enfant garde toute sa place dès qu’il s’agit de modifier un comportement ou un gabarit, mais pour de la pure déclinaison graphique, les variations de styles sont aujourd’hui l’outil le plus adapté, et probablement celui qui devrait devenir le réflexe par défaut sur les projets de thème de blocs.
