Le calendrier WordPress par défaut, ce détail qui trahit un thème bâclé en trois secondes. Un tableau dense sans espacement, fond gris par défaut, texte tassé dans les cellules. Le développeur du thème a passé une semaine sur les polices et les couleurs mais a oublié #wp-calendar.

Vingt lignes de CSS changent tout. Voici le code que vous pouvez copier dans n’importe quel projet, accompagné d’un décryptage ligne par ligne pour que vous ne vous contentiez pas de le coller, mais que vous compreniez ce que fait chaque sélecteur.

💡 Aperçu rapide:

• CSS prêt à l’emploi pour #wp-calendar, un seul bloc, à copier en entier
• Où insérer le code: personnalisateur, extension de snippets ou thème enfant
• Que faire si le CSS ne fonctionne pas, la spécificité et comment la surcharger
• Pourquoi l’ombre de la capture d’écran concerne uniquement l’article, elle ne figure pas dans le code réel

Fonctionnement du widget calendrier

Avant de copier le code, voici un rapide aperçu de la structure. WordPress génère ce balisage pour le widget:

• .widget_calendar, le conteneur du widget dans la barre latérale
• #wp-calendar, le tableau lui-même (chaque widget possède son propre id)
• #wp-calendar caption, le nom du mois (titre du tableau)
• #wp-calendar thead th, les noms de jours abrégés
• #wp-calendar tbody td, les cellules de jour; les dates avec des articles deviennent des liens
• #wp-calendar tbody .pad, les cellules vides avant le premier jour et après le dernier
• #wp-calendar tfoot #prev / #next, les liens vers le mois précédent et le mois suivant

Ces classes n’ont pas changé depuis des années et fonctionnent avec toutes les versions de WordPress de la 5.0 jusqu’aux dernières versions. Aucune magie, juste le balisage standard du cœur.

Une courte vidéo sur la façon d’ajouter et de configurer le widget calendrier dans l’administration:

CSS prêt à l’emploi: copiez et collez

Ajoutez ce code aux styles de votre thème. Le résultat est un tableau clair avec des cellules grises, un effet de survol blanc et un fond désactivé pour les jours vides.

1
/* calendar widget — minimalistic styling */
2
.widget_calendar {float: left;}
3
#wp-calendar {width: 100%;}
4
#wp-calendar caption {
5
    text-align: right;
6
    color: #333;
7
    font-size: 12px;
8
    margin-top: 10px;
9
    margin-bottom: 15px;
10
}
11
#wp-calendar thead {font-size: 10px;}
12
#wp-calendar thead th {padding-bottom: 10px;}
13
#wp-calendar tbody {color: #aaa;}
14
#wp-calendar tbody td {
15
    background: #f5f5f5;
16
    border: 1px solid #fff;
17
    text-align: center;
18
    padding: 8px;
19
}
20
#wp-calendar tbody td:hover {background: #fff;}
21
#wp-calendar tbody .pad {background: none;}
22
#wp-calendar tfoot #next {
23
    font-size: 10px;
24
    text-transform: uppercase;
25
    text-align: right;
26
}
27
#wp-calendar tfoot #prev {
28
    font-size: 10px;
29
    text-transform: uppercase;
30
    padding-top: 10px;
31
}

Décryptage par groupes:

Conteneur et largeur. .widget_calendar {float: left;} évite les collisions de flottement dans les barres latérales étroites. #wp-calendar {width: 100%;} force le tableau à s’étirer sur toute la largeur de son parent; sans cela, le calendrier se comporte comme un élément en ligne et se réduit à la largeur de son contenu. En savoir plus sur le CSS dans WordPress.

Titre du mois. caption est aligné à droite, en gris foncé avec des marges supérieure et inférieure. Le mois se lit comme un titre de tableau, pas comme un texte orphelin.

En-tête avec les noms de jours. thead et th, petite police de 10px et marge intérieure inférieure. Les noms de jours abrégés (lun, mar, mer) n’attirent pas l’attention sur eux.

Cellules de jour. Couleur de texte principale #aaa, gris atténué. Chaque cellule reçoit un fond #f5f5f5 et une bordure blanche qui sépare visuellement les jours. padding: 8px donne de l’air autour des chiffres. Au survol, la cellule devient blanche, un survol simple et clair sans animations.

Cellules vides. .pad supprime le remplissage du fond pour que les «trous» en début et en fin de mois ne ressemblent pas à des jours actifs.

Navigation mensuelle. tfoot #prev et #next, les liens vers les mois adjacents. Les deux en petites capitales; #prev à gauche, #next à droite.

Remarque: l’ombre autour du calendrier dans la capture d’écran ci-dessous sert uniquement à l’illustration de l’article. Elle ne figure pas dans le code réel.

Trois façons d’ajouter du CSS à votre site

De la plus simple à la plus appropriée.

Méthode 1: personnalisateur. Allez dans Apparence → Personnaliser → CSS additionnel et collez le code. Avantages: aperçu instantané, pas besoin de toucher aux fichiers. Inconvénients: les styles sont liés au thème, perdus si vous changez de thème.

Méthode 2: extension de snippets. Installez l’extension gratuite Code Snippets ou WPCode et ajoutez le code en tant que snippet CSS activé sur tout le site. Avantages: les styles vivent indépendamment du thème. Inconvénients: une extension de plus dans l’administration.

Méthode 3: thème enfant. Créez style.css dans un thème enfant et collez-y le code. C’est la bonne voie pour les projets en production: les styles survivent aux mises à jour du thème parent et vivent dans le contrôle de version. Si vous n’avez pas encore de thème enfant, le guide WordPress.org vous accompagne en dix minutes.

Résultat

Après avoir ajouté le CSS, le widget ressemble à ceci:

Les jours sont centrés, les cellules sont séparées par des bordures blanches, le survol rend le fond blanc. Les cellules vides ne distraient pas, elles n’ont pas de fond gris. Le nom du mois se lit comme un titre soigné.

Que faire si le CSS ne fonctionne pas

Si le widget n’a pas changé après avoir collé le code, votre thème contient déjà des styles pour #wp-calendar avec une priorité plus élevée. Ouvrez l’inspecteur du navigateur (F12), trouvez l’élément #wp-calendar tbody td et vérifiez quelles règles surchargent background et padding.

Pour surcharger les styles intégrés du thème, ajoutez l’ID de la barre latérale aux sélecteurs ou enveloppez le code dans un contexte plus spécifique, par exemple #sidebar .widget_calendar #wp-calendar tbody td. Cela augmente la spécificité sans !important.

Widget ou bloc: que choisir

Avec la sortie de Gutenberg, le cœur a introduit un bloc «Calendrier», un remplacement moderne du widget classique. Il produit le même tableau #wp-calendar et se style avec le même CSS. La différence réside dans le placement:

• Widget classique, via Apparence → Widgets, fonctionne uniquement dans les barres latérales et les zones de widget du thème.
• Bloc «Calendrier», inséré dans n’importe quelle page ou article via l’éditeur de blocs, ainsi que dans les zones de widget via Apparence → Widgets (à partir de WordPress 5.8, les blocs y sont également disponibles).

Le CSS de cet article fonctionne avec les deux options sans modification. Choisissez le bloc si vous avez besoin du calendrier dans le corps de la page; le widget classique s’il est uniquement dans la barre latérale et que vous ne souhaitez pas changer votre flux de travail habituel.

⁉️🤔 Questions fréquentes

Pourquoi mon calendrier ne réagit-il pas au CSS de l’article?

Très probablement, votre thème contient déjà des styles pour #wp-calendar avec une priorité plus élevée. Ouvrez l’inspecteur (F12 dans le navigateur), cliquez sur une cellule du calendrier et voyez quelle règle surcharge votre background. Solution: ajoutez l’ID du conteneur de la barre latérale avant le sélecteur, par exemple #secondary .widget_calendar #wp-calendar tbody td. Cela augmente la spécificité sans !important.

Est-il nécessaire de créer un thème enfant pour 20 lignes de CSS?

Pour un seul widget, non. Commencez par le CSS additionnel dans le personnalisateur (Apparence → Personnaliser). Quand vous aurez accumulé suffisamment de règles personnalisées pour une personnalisation complète, créez alors un thème enfant. Le seuil du «c’est le moment» se situe environ à 50 lignes de CSS ou au premier changement dans functions.php.

Ce CSS fonctionne-t-il avec le bloc «Calendrier» dans Gutenberg?

Oui, complètement. Le bloc «Calendrier» génère le même tableau #wp-calendar avec les mêmes classes. Le code fonctionne sans modification.

Puis-je changer le jeu de couleurs?

Facilement. Remplacez #f5f5f5 (fond des cellules) et #fff (survol et bordure) par les couleurs de votre thème. Pour un jeu de couleurs sombre, essayez background: #2c2c2c; color: #ccc; pour tbody td et background: #1a1a1a; pour le survol. L’essentiel est de maintenir le contraste entre le fond des cellules et le texte.

Le widget calendrier est-il encore utile en 2026?

Pour les sites d’actualité et les blogs actifs, oui. Le calendrier offre aux lecteurs une navigation dans les anciens contenus sans recherche par catégories. Pour les cartes de visite et les pages d’atterrissage, il est inutile. Mais si votre thème est vendu sur une place de marché, un widget stylisé est obligatoire: l’acheteur ne doit pas voir un tableau brut, même s’il n’utilise pas le calendrier lui-même.

Calendrier WordPress: corrigez en cinq minutes ou oubliez

Le calendrier est un petit détail qui trahit complètement un thème inachevé. Corrigé en copiant-collant vingt lignes de CSS.

• Vous créez un thème pour vous-même, copiez le code dans le CSS additionnel du personnalisateur et oubliez-le.
• Vous écrivez un thème destiné à la vente, incluez les styles dans le style.css du thème enfant, c’est de l’hygiène de base.
• Vous n’avez pas du tout besoin du calendrier, stylez-le quand même. Un acheteur du thème pourrait activer le widget, et il ne doit pas paraître cassé.

Vérifiez l’aspect de votre calendrier dès maintenant: ajoutez le widget à la barre latérale via Apparence → Widgets et ouvrez le site. Un tableau brut? Le code est ci-dessus, prenez-le et corrigez-le en cinq minutes.