Der standardmäßige WordPress-Kalender, jenes Detail, das ein halbfertiges Theme in den ersten drei Sekunden entlarvt. Eine gedrängte Tabelle ohne Abstände, standardmäßig grau hinterlegt, beengter Text in den Zellen. Der Theme-Entwickler hat eine Woche in Schriftarten und Farben investiert, aber #wp-calendar vergessen.

Zwanzig Zeilen CSS ändern alles. Nachfolgend finden Sie Code, den Sie in jedes Projekt kopieren können, zusammen mit einer zeilenweisen Erläuterung, damit Sie ihn nicht nur einfügen, sondern auch verstehen, was jeder Selektor bewirkt.

💡 Kurzüberblick:

• Einsatzfertiges CSS für #wp-calendar, ein Block, komplett kopieren
• Wo Sie den Code einfügen: Customizer, Snippet-Plugin oder Child-Theme
• Was zu tun ist, wenn das CSS nicht greift, Spezifität und wie Sie sie übersteuern
• Warum der Schatten im Screenshot nur der Artikelillustration dient und nicht im eigentlichen Code enthalten ist

So funktioniert das Kalender-Widget

Bevor Sie den Code kopieren, ein kurzer Blick auf die Struktur. WordPress generiert dieses Markup für das Widget:

• .widget_calendar, der Widget-Container in der Seitenleiste
• #wp-calendar, die Tabelle selbst (jedes Widget hat seine eigene id)
• #wp-calendar caption, der Monatsname (Tabellenüberschrift)
• #wp-calendar thead th, abgekürzte Tagesnamen
• #wp-calendar tbody td, Tageszellen; Daten mit Beiträgen werden zu Links
• #wp-calendar tbody .pad, leere Zellen vor dem ersten und nach dem letzten Tag
• #wp-calendar tfoot #prev / #next, Links zum vorherigen und nächsten Monat

Diese Klassen haben sich seit Jahren nicht geändert und funktionieren in allen WordPress-Versionen von 5.0 bis zu den aktuellsten Releases. Keine Zauberei, nur standardmäßiges Core-Markup.

Ein kurzes Video, wie Sie das Kalender-Widget im Admin-Bereich hinzufügen und konfigurieren:

Einsatzfertiges CSS: Kopieren und einfügen

Fügen Sie diesen Code zu Ihren Theme-Styles hinzu. Das Ergebnis ist eine leichte Tabelle mit grauen Zellen, weißem Hover-Effekt und deaktiviertem Hintergrund für leere Tage.

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
}

Aufschlüsselung nach Gruppen:

Container und Breite. .widget_calendar {float: left;} verhindert Float-Kollisionen in schmalen Seitenleisten. #wp-calendar {width: 100%;} zwingt die Tabelle, sich über die volle Breite ihres Elternelements zu erstrecken; ohne diese Angabe verhält sich der Kalender wie ein Inline-Element und schrumpft auf die Inhaltsbreite. Mehr über CSS in WordPress.

Monatsüberschrift. caption ist rechtsbündig, dunkelgraue Farbe mit oberen und unteren Abständen. Der Monat liest sich als Beschriftung der Tabelle, nicht als verwaister Text.

Kopfzeile mit Tagesnamen. thead und th, kleine 10px-Schrift und unterer Innenabstand. Abgekürzte Tagesnamen (Mo, Di, Mi) ziehen keine Aufmerksamkeit auf sich.

Tageszellen. Haupttextfarbe #aaa, gedecktes Grau. Jede Zelle erhält einen #f5f5f5-Hintergrund und einen weißen Rahmen, der die Tage optisch trennt. padding: 8px schafft Raum um die Zahlen. Beim Überfahren mit der Maus wird die Zelle weiß, ein einfacher und klarer Hover ohne Animationen.

Leere Zellen. .pad entfernt die Hintergrundfüllung, sodass „Löcher" am Anfang und Ende des Monats nicht wie aktive Tage aussehen.

Monatsnavigation. tfoot #prev und #next, Links zu den angrenzenden Monaten. Beide in kleiner Großschrift; #prev links, #next rechts.

Hinweis: Der Schatten um den Kalender im folgenden Screenshot dient nur der Artikelillustration. Er ist nicht im eigentlichen Code enthalten.

Drei Wege, CSS zu Ihrer Website hinzuzufügen

Vom einfachsten zum saubersten Weg.

Methode 1: Customizer. Gehen Sie zu Design → Customizer → Zusätzliches CSS und fügen Sie den Code ein. Vorteile: sofortige Vorschau, kein Zugriff auf Dateien nötig. Nachteile: Styles sind an das Theme gebunden und gehen bei einem Theme-Wechsel verloren.

Methode 2: Snippet-Plugin. Installieren Sie das kostenlose Code Snippets oder WPCode und fügen Sie den Code als CSS-Snippet hinzu, das siteweit aktiviert ist. Vorteile: Styles leben unabhängig vom Theme. Nachteile: ein weiteres Plugin im Admin.

Methode 3: Child-Theme. Erstellen Sie eine style.css in einem Child-Theme und fügen Sie den Code dort ein. Das ist der richtige Weg für Produktivprojekte: Styles überleben Updates des Eltern-Themes und leben in der Versionsverwaltung. Falls Sie noch kein Child-Theme haben, führt Sie die WordPress.org-Anleitung in zehn Minuten durch den Prozess.

Ergebnis

Nach dem Hinzufügen des CSS sieht das Widget so aus:

Die Tage sind zentriert, die Zellen durch weiße Rahmen getrennt, beim Überfahren wird der Hintergrund weiß. Leere Zellen lenken nicht ab, sie haben keinen grauen Hintergrund. Der Monatsname liest sich als ordentliche Beschriftung.

Was zu tun ist, wenn das CSS nicht funktioniert

Wenn sich das Widget nach dem Einfügen des Codes nicht verändert hat, enthält Ihr Theme bereits Styles für #wp-calendar mit höherer Priorität. Öffnen Sie den Browser-Inspektor (F12), suchen Sie das Element #wp-calendar tbody td und prüfen Sie, welche Regeln background und padding überschreiben.

Um eingebaute Theme-Styles zu übersteuern, fügen Sie die Sidebar-ID zu den Selektoren hinzu oder betten Sie den Code in einen spezifischeren Kontext ein, zum Beispiel #sidebar .widget_calendar #wp-calendar tbody td. Das erhöht die Spezifität ohne !important.

Widget oder Block: Was Sie verwenden sollten

Mit der Einführung von Gutenberg hat der Core einen „Kalender"-Block bereitgestellt, einen modernen Ersatz für das klassische Widget. Er gibt dieselbe #wp-calendar-Tabelle aus und wird mit demselben CSS gestaltet. Der Unterschied liegt in der Platzierung:

• Klassisches Widget, über Design → Widgets, funktioniert nur in Seitenleisten und Theme-Widget-Bereichen.
• „Kalender"-Block, eingefügt in jede Seite oder jeden Beitrag über den Block-Editor, zusätzlich in Widget-Bereichen über Design → Widgets (ab WordPress 5.8 sind Blöcke auch dort verfügbar).

Das CSS aus diesem Artikel funktioniert mit beiden Optionen ohne Änderungen. Wählen Sie den Block, wenn Sie den Kalender im Seitenkörper benötigen; das klassische Widget, wenn er nur in der Seitenleiste sein soll und Sie Ihren gewohnten Workflow nicht ändern möchten.

⁉️🤔 Häufig gestellte Fragen

Warum reagiert mein Kalender nicht auf das CSS aus dem Artikel?

Höchstwahrscheinlich enthält Ihr Theme bereits Styles für #wp-calendar mit höherer Priorität. Öffnen Sie den Inspektor (F12 im Browser), klicken Sie auf eine Kalenderzelle und sehen Sie nach, welche Regel Ihr background überschreibt. Lösung: Stellen Sie die Sidebar-Container-ID vor den Selektor, zum Beispiel #secondary .widget_calendar #wp-calendar tbody td. Das erhöht die Spezifität ohne !important.

Ist es notwendig, für 20 Zeilen CSS ein Child-Theme zu erstellen?

Für ein Widget, nein. Beginnen Sie mit Zusätzliches CSS im Customizer (Design → Customizer). Wenn Sie genug eigene Regeln für eine vollständige Anpassung angesammelt haben, dann erstellen Sie ein Child-Theme. Die „Es ist Zeit"-Schwelle liegt bei etwa 50 Zeilen CSS oder der ersten Änderung an functions.php.

Funktioniert dieses CSS mit dem „Kalender"-Block in Gutenberg?

Ja, vollständig. Der „Kalender"-Block rendert dieselbe #wp-calendar-Tabelle mit denselben Klassen. Der Code funktioniert ohne Änderungen.

Kann ich das Farbschema ändern?

Problemlos. Ersetzen Sie #f5f5f5 (Zellenhintergrund) und #fff (Hover und Rahmen) durch Ihre Theme-Farben. Für ein dunkles Schema versuchen Sie background: #2c2c2c; color: #ccc; für tbody td und background: #1a1a1a; für den Hover. Die Hauptsache ist, den Kontrast zwischen Zellenhintergrund und Text zu wahren.

Wird das Kalender-Widget im Jahr 2026 überhaupt noch benötigt?

Für Nachrichtenseiten und aktive Blogs, ja. Der Kalender bietet Lesern eine Navigation durch ältere Inhalte, ohne nach Kategorien suchen zu müssen. Für Visitenkarten und Landingpages ist er nutzlos. Aber wenn Ihr Theme auf einem Marktplatz verkauft wird, ist ein gestaltetes Widget Pflicht: Der Käufer sollte keine nackte Tabelle sehen, selbst wenn er den Kalender selbst nicht nutzt.

WordPress-Kalender: In fünf Minuten beheben oder vergessen

Der Kalender ist eine Kleinigkeit, die ein unfertiges Theme vollständig entlarvt. Behoben durch das Kopieren und Einfügen von zwanzig Zeilen CSS.

• Erstellen Sie ein Theme für sich selbst, kopieren Sie den Code in Zusätzliches CSS im Customizer und vergessen Sie ihn.
• Schreiben Sie ein Theme für den Verkauf, nehmen Sie die Styles in die style.css des Child-Themes auf, das ist grundlegende Hygiene.
• Brauchen Sie den Kalender überhaupt nicht, gestalten Sie ihn trotzdem. Ein Theme-Käufer könnte das Widget aktivieren, und es sollte nicht defekt aussehen.

Prüfen Sie, wie Ihr Kalender jetzt aussieht: Fügen Sie das Widget über Design → Widgets zur Seitenleiste hinzu und öffnen Sie die Website. Kahle Tabelle? Der Code steht oben, nehmen Sie ihn und beheben Sie es in fünf Minuten.