Im letzten Schritt hatte ich mich damit beschäftigt, eine [einzelne Kategorie aus der rechten Seitenleiste auszublenden](https://www.warmann.net/wordpress-kategorie-in-der-sidebar-mit-css-ausblenden/). Diesmal bleibe ich gleich bei dieser Kategorienliste – allerdings geht es jetzt nicht darum, was dort angezeigt wird, sondern wie es aussieht.
Die ursprüngliche Darstellung der Kategorien in meiner Sidebar hat mir optisch noch nicht ganz gefallen. Die einzelnen Einträge standen für meinen Geschmack etwas zu schlicht untereinander und hätten etwas mehr Struktur vertragen können.
Also habe ich auch hier wieder mit ein paar Zeilen zusätzlichem CSS nachgeholfen und die **WordPress Kategorien in der Sidebar gestaltet**.
## Etwas mehr Struktur für die Kategorienliste
Mein Ziel war überschaubar.
Die normalen Listenpunkte sollten verschwinden. Zwischen den einzelnen Kategorien wollte ich etwas mehr Abstand haben und zusätzlich eine dezente Trennlinie einsetzen.
Für diese Linie habe ich denselben Farbton verwendet, den ich bereits an anderer Stelle meiner Sidebar als [Trenner](https://www.warmann.net/wordpress-sidebar-trennlinie-mit-einfachem-css-einfuegen/) nutze: `#DDDAD3`.
Dadurch wirkt die rechte Seitenleiste für mich etwas ruhiger und einheitlicher.
[WordPress Kategorien in der Sidebar gestalten](https://www.warmann.net/wp-content/uploads/2026/09/WordPress-Kategorien-in-der-Sidebar-gestalten-ohne-code.avif)
Zum Vergleich sieht dieselbe Liste mit meiner CSS-Anpassung entsprechend strukturierter aus.
[WordPress Kategorien in der Sidebar gestalten](https://www.warmann.net/wp-content/uploads/2026/09/WordPress-Kategorien-in-der-Sidebar-gestalten-mit-code.avif)
## Mein CSS für die Kategorien in der Sidebar
Der komplette Codeschnipsel sieht bei mir so aus:
„`
/**
* Kategorien in der Seitenleiste
*/
.widget_categories ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget_categories li {
padding: 0.45em 0;
border-bottom: 1px solid #DDDAD3;
}
.widget_categories li:last-child {
border-bottom: none;
}
„`
Auch hier steckt keine besonders komplizierte Technik dahinter. Es sind im Grunde nur drei kleine Gestaltungsschritte.
## Listenpunkte und Standardabstände entfernen
Der erste Abschnitt betrifft die eigentliche Liste:
„`
.widget_categories ul {
list-style: none;
margin: 0;
padding: 0;
}
„`
Mit `list-style: none;` entferne ich die üblichen Listenzeichen vor den Kategorien.
`margin: 0;` und `padding: 0;` setzen anschließend die normalen Außen- und Innenabstände der Liste zurück.
Damit habe ich zunächst eine neutrale Ausgangsbasis und kann die Abstände anschließend selbst festlegen.
## Abstand und Trennlinie für jede Kategorie
Der nächste Abschnitt kümmert sich um die einzelnen Listeneinträge:
„`
.widget_categories li {
padding: 0.45em 0;
border-bottom: 1px solid #DDDAD3;
}
„`
Mit `padding: 0.45em 0;` bekommt jeder Kategorieeintrag oben und unten etwas Platz. Links und rechts füge ich dagegen keinen zusätzlichen Innenabstand ein.
Die zweite Zeile erzeugt darunter eine ein Pixel starke Trennlinie.
Der Farbwert `#DDDAD3` ist bei mir bewusst sehr dezent gewählt. Die Linie soll die Kategorien optisch voneinander trennen, aber nicht zum eigentlichen Gestaltungselement der Sidebar werden.
Natürlich lässt sich diese Farbe an das eigene Theme anpassen. Auch Stärke und Abstände sind keine festen Werte, die man übernehmen muss.
## Keine Linie nach der letzten Kategorie
Würde ich es bei diesen beiden Regeln belassen, hätte auch der letzte Eintrag noch eine Linie darunter.
Das wollte ich nicht.
Deshalb kommt noch diese Regel hinzu:
„`
.widget_categories li:last-child {
border-bottom: none;
}
„`
`:last-child` spricht jeweils das letzte entsprechende Element innerhalb seines übergeordneten Elements an. Dort wird die zuvor gesetzte untere Rahmenlinie wieder entfernt.
Damit befinden sich die Trenner zwischen den Kategorien, aber nicht noch einmal unnötig unter dem letzten Eintrag.
## Warum ich dafür zusätzliches CSS verwende
Auch für diese kleine Anpassung wollte ich nicht direkt die CSS-Dateien meines Themes verändern.
Das würde zwar ebenfalls funktionieren, hätte aber einen entscheidenden Nachteil: Wird das Theme aktualisiert, können eigene Änderungen an dessen Dateien überschrieben werden.
Für ein paar Zeilen CSS ist mir außerdem ein eigenes Child-Theme zu aufwendig.
Deshalb liegt der Codeschnipsel bei mir im zusätzlichen CSS von WordPress. Dort bleibt er bei normalen Aktualisierungen des aktuell verwendeten Themes erhalten.
Bei einem Theme-Wechsel muss ich dagegen daran denken, dass WordPress zusätzliches CSS an das jeweilige Theme bindet. Möchte ich dieselbe Darstellung mit dem neuen Theme weiterverwenden, muss ich den Code dort übernehmen und erneut kontrollieren.
## Der Code passt nicht automatisch zu jedem Theme
Bei meinem Aufbau funktioniert `.widget_categories`, weil ich die klassische WordPress-Kategorienliste beziehungsweise das entsprechende Widget verwende.
Andere Themes oder moderne Block-Aufbauten können Kategorien anders ausgeben und andere CSS-Klassen verwenden.
Dann muss der Selektor entsprechend angepasst werden.
Das gilt besonders nach einem Theme-Wechsel. Nur weil ich den Codeschnipsel in das zusätzliche CSS des neuen Themes kopiere, bedeutet das noch nicht automatisch, dass dort dieselbe HTML-Struktur vorhanden ist.
## Unterkategorien sollte man ebenfalls kontrollieren
Eine kleine Besonderheit gibt es noch, wenn Kategorien hierarchisch dargestellt werden und Unterkategorien vorhanden sind.
Meine Regeln beziehen sich auf sämtliche `ul`- und `li`-Elemente innerhalb von `.widget_categories`. Damit können auch verschachtelte Listen der Unterkategorien von den zurückgesetzten Abständen und den Trennlinien betroffen sein.
Das kann durchaus gut aussehen und gewollt sein. Wer eine deutlich eingerückte Hierarchie zwischen Haupt- und Unterkategorien möchte, sollte diesen Fall aber gesondert kontrollieren.
## Keine große Sache – aber für mich die schönere Darstellung
Natürlich braucht eine Kategorienliste keine Trennlinien, um zu funktionieren.
Die ursprüngliche Darstellung war technisch vollkommen in Ordnung. Mir gefiel sie nur optisch nicht so gut.
Mit ein paar Zeilen CSS konnte ich die Listenpunkte entfernen, etwas mehr Abstand schaffen und denselben dezenten Trenner einsetzen, den ich bereits an anderer Stelle in der Sidebar verwende.
Kein neues [Plugin](https://www.warmann.net/wichtige-wordpress-plugins-was-du-wirklich-brauchst-und-was-nicht/), kein Child-Theme und kein Umbau an WordPress.
Nur ein bisschen CSS, damit die rechte Seite am Ende so aussieht, wie ich sie haben möchte.