Depuis sa sortie fin novembre avec WordPress 5.3, Twenty Twenty tourne sur presque tous les postes de développement de l’agence. Avant de le remplacer par un thème maison sur un projet client, l’équipe a pris le temps de l’ouvrir dans un éditeur et de lire, ligne par ligne, comment ses auteurs ont résolu des problèmes qu’on croise tous les jours : où ranger les réglages du Customizer, comment calculer une teinte dérivée sans plugin, comment nommer ses classes CSS pour qu’elles survivent à un an de maintenance.
Ce n’est pas un tutoriel d’installation. C’est une visite guidée du code source, avec l’idée de repartir avec trois ou quatre habitudes solides à réutiliser dans le prochain thème sur mesure.
Une arborescence qui sépare vraiment les responsabilités
Premier constat en ouvrant le dossier du thème : les fichiers PHP ne sont pas entassés à la racine. Le dossier classes/ contient des classes utilitaires (SVG, script à charger de façon conditionnelle), inc/ regroupe les fonctions liées au Customizer, au block editor et aux templates, et template-parts/ isole les fragments réutilisables comme l’en-tête ou le pied de page. Rien d’extraordinaire sur le papier, mais peu de thèmes premium respectent cette discipline : on trouve encore régulièrement des functions.php de deux mille lignes qui mélangent réglages, shortcodes et requêtes personnalisées.
La leçon à retenir n’est pas la structure exacte, mais le principe : un fichier, une responsabilité. Charger les fichiers via des require explicites en tête de functions.php plutôt que de tout écrire au même endroit facilite énormément la relecture six mois plus tard.
La couleur d’accent, ou comment éviter les media queries à rallonge
Le point le plus instructif concerne la gestion de la couleur d’accent choisie dans le Customizer. Plutôt que de proposer une palette figée, Twenty Twenty part d’une seule teinte définie par l’utilisateur et calcule côté PHP plusieurs variantes dérivées (plus claires, plus sombres, en niveaux de gris) pour les boutons, les liens survolés et les bordures. Le résultat est injecté sous forme de règles CSS via wp_add_inline_style(), directement à la suite de la feuille de style principale.
Concrètement, cela ressemble à ceci dans une version simplifiée :
function agence_get_customizer_css() {
$accent = get_theme_mod( 'accent_color', '#cd2653' );
$css = sprintf(
':root { --accent-color: %1$s; --accent-color-hover: %2$s; }',
esc_html( $accent ),
esc_html( agence_darken_color( $accent, 15 ) )
);
wp_add_inline_style( 'agence-style', $css );
}
add_action( 'wp_enqueue_scripts', 'agence_get_customizer_css' );
L’intérêt de cette approche : une seule variable saisie par l’utilisateur, et toutes les déclinaisons de couleur restent cohérentes entre elles, sans qu’un intégrateur ait besoin de recalculer une palette entière à la main à chaque changement de teinte.
Des sections de Customizer pensées pour l’utilisateur final
Twenty Twenty ne se contente pas d’ajouter des contrôles au Customizer : il les regroupe en panneaux logiques (Couleurs, Mise en page, En-tête) avec des descriptions courtes et des valeurs par défaut sensées. Chaque $wp_customize->add_setting() est accompagné d’un sanitize_callback précis — sanitize_hex_color pour les couleurs, absint pour les nombres — ce qui évite qu’une valeur mal formée casse l’affichage du site.
- Chaque section porte un intitulé compréhensible par un client non technique.
- Les réglages avancés (largeur du contenu, densité de la grille) sont dans une section séparée, repliée par défaut.
- Les valeurs par défaut sont choisies pour que le thème reste utilisable sans aucune configuration.
Des classes utilitaires qui ne dépendent d’aucun framework
Autre détail qui mérite d’être copié : les classes comme .alignwide, .alignfull ou .has-text-align-center sont pensées pour fonctionner aussi bien avec l’éditeur de blocs qu’avec du contenu saisi à l’ancienne. Le thème ne réinvente pas ces classes : il s’appuie sur celles que le cœur de WordPress attend déjà, ce qui garantit leur compatibilité avec les futures versions de l’éditeur sans code supplémentaire.
Le cas du menu mobile
Le menu de navigation mobile mérite aussi le détour : il repose sur un Walker_Nav_Menu personnalisé qui ajoute des attributs ARIA (aria-expanded, aria-haspopup) sur les éléments à sous-menu, sans JavaScript superflu pour le rendu initial. Le script associé se contente d’ajouter et de retirer des classes CSS, ce qui garde le menu utilisable même si le fichier JavaScript échoue à charger.
Un thème par défaut du cœur de WordPress reste la meilleure documentation vivante des bonnes pratiques du moment : il est audité par des milliers de développeurs et doit fonctionner sans configuration.
Ce qu’on en retire pour nos prochains thèmes
Rien dans Twenty Twenty n’est révolutionnaire, et c’est précisément ce qui en fait une référence utile. La séparation stricte des fichiers, le calcul de couleurs dérivées côté serveur plutôt qu’en CSS pur, des sanitize_callback systématiques et des classes utilitaires alignées sur le cœur de WordPress : ce sont quatre habitudes qu’on a immédiatement intégrées au prochain thème sur mesure du studio, celui d’un cabinet d’architectes qui souhaitait un Customizer simple pour son équipe communication.
La prochaine étape logique consistera à observer comment Twenty Twenty-One, prévu pour la fin d’année, gère le mode sombre nativement — un sujet qu’on suivra dès sa sortie.
