WordPress Kategorie in der Sidebar mit CSS ausblenden

Auf dieser Website verwenden wir die Kategorie „Aktuelles und Einblicke“ als eine Art News-Bereich. Neue Beiträge landen dort und der Bereich ist bereits über das Hauptmenü erreichbar.

Damit ist er für unsere Besucher an der Stelle vorhanden, an der wir ihn haben möchten.

Etwas störend fand ich allerdings, dass „Aktuelles und Einblicke“ zusätzlich noch einmal in der Kategorienliste in der rechten Sidebar auftauchte. Dort stehen die verschiedenen thematischen Kategorien der Website. Den News-Bereich brauchte ich an dieser Stelle nicht noch ein zweites Mal.

Also habe ich die betreffende WordPress Kategorie in der Sidebar ausgeblendet.

Hier wird die Kategorie noch nicht ausgeblendet:

Die Kategorie bleibt bestehen

Wichtig ist zunächst: Mit dieser Methode lösche ich die Kategorie nicht aus WordPress.

Auch die zugeordneten Beiträge bleiben selbstverständlich in der Kategorie. Die Kategorie-Seite funktioniert weiterhin und kann beispielsweise über das Hauptmenü aufgerufen werden.

Mit CSS wird lediglich der entsprechende Eintrag in der Kategorienliste optisch ausgeblendet.

Für meinen Zweck reicht das vollkommen aus. „Aktuelles und Einblicke“ soll als eigener Bereich der Website bestehen bleiben, nur eben nicht zusätzlich in dieser einen Kategorienliste erscheinen.

Und hier wird sie jetzt ausgeblendet:

Mein CSS zum Ausblenden der Kategorie

Bei meiner Website hat die Kategorie die ID 1. Der verwendete Code sieht deshalb so aus:

/**
 * Kategorie "Aktuelles und Einblicke" (ID 1)
 * in der Kategorienliste ausblenden
 */
.widget_categories .cat-item-1 {
    display: none;
}

Mehr ist für diesen konkreten Fall nicht notwendig.

Was bedeutet cat-item-1?

WordPress besitzt für Kategorien interne numerische IDs.

Bei der Ausgabe einer normalen Kategorienliste erzeugt WordPress für die einzelnen Listeneinträge unter anderem CSS-Klassen nach dem Muster cat-item-ID.

Hat eine Kategorie beispielsweise die ID 27, kann der entsprechende Eintrag als cat-item-27 ausgegeben werden.

In meinem Fall hat „Aktuelles und Einblicke“ die ID 1. Deshalb lautet der Selektor:

.cat-item-1

Mit display: none; wird genau dieses Element nicht mehr sichtbar dargestellt.

Warum steht davor noch .widget_categories?

Ich möchte die Kategorie nicht zwangsläufig überall auf der Website ausblenden.

Der zusätzliche Selektor .widget_categories begrenzt die Regel bei meinem Aufbau auf die Kategorienliste des entsprechenden Widgets.

Das ist gezielter als einfach nur:

.cat-item-1 {
    display: none;
}

Eine solche allgemeine Regel könnte die betreffende Kategorie auch in anderen Kategorienlisten ausblenden, wenn dort dieselbe WordPress-Klasse verwendet wird.

Mein Ziel war aber konkret die Kategorienliste in der Sidebar.

Die eigene Kategorie-ID herausfinden

Natürlich hat nicht jeder die Kategorie-ID 1.

Wer den Codeschnipsel übernehmen möchte, muss deshalb zuerst die ID der eigenen Kategorie herausfinden.

Das lässt sich im WordPress-Backend erledigen. Dazu geht man zu den Beitragskategorien und öffnet beziehungsweise bearbeitet die gewünschte Kategorie.

In der aufgerufenen Adresse findet man üblicherweise einen Bestandteil nach dem Muster:

tag_ID=27

In diesem Beispiel wäre 27 die gesuchte Kategorie-ID.

Der CSS-Code würde entsprechend angepasst:

.widget_categories .cat-item-27 {
    display: none;
}

Dann verschwindet nicht meine Kategorie mit der ID 1, sondern die Kategorie mit der ID 27 aus dieser Liste.

Das funktioniert nicht automatisch mit jeder Kategorienliste

Bei solchen CSS-Schnipseln sollte man immer berücksichtigen, wie das eigene Theme beziehungsweise WordPress die betreffende Liste tatsächlich ausgibt.

Die Klasse cat-item-ID gehört zur normalen WordPress-Ausgabe von Kategorienlisten. Die umgebende Klasse widget_categories passt dagegen zu meinem konkreten Widget-Aufbau.

Bei modernen Block-Themes oder dem WordPress-Kategorienblock kann die umgebende HTML-Struktur anders aussehen. Dann funktioniert der Codeschnipsel möglicherweise nicht unverändert.

Das bedeutet nicht, dass die Idee nicht mehr funktioniert. Man muss dann lediglich den CSS-Selektor an die tatsächlich ausgegebene Struktur anpassen.

Warum wieder zusätzliches CSS?

Auch für diese Kleinigkeit wollte ich weder direkt die CSS-Dateien meines Themes verändern noch ein Child-Theme anlegen.

Der Aufwand wäre für eine einzelne ausgeblendete Kategorie schlicht unnötig gewesen.

Im zusätzlichen CSS bleibt meine Änderung bei einem normalen Update des aktuell verwendeten Themes erhalten, weil ich keine Theme-Datei direkt verändere.

Wechsle ich allerdings zu einem anderen Theme, muss ich daran denken, den Codeschnipsel gegebenenfalls zu übernehmen und dort erneut zu prüfen.

Zusätzliches CSS ist in WordPress an das jeweilige Theme gekoppelt. Und gerade bei diesem Beispiel ist die erneute Prüfung besonders wichtig, weil ein anderes Theme auch eine andere Struktur für seine Sidebar oder Kategorienliste verwenden kann.

Ausblenden ist nicht Löschen

Diese Unterscheidung sollte man im Hinterkopf behalten.

Das CSS entfernt die Kategorie nicht aus WordPress und auch nicht aus der zugrunde liegenden Kategorienstruktur. Es sorgt nur dafür, dass der betreffende HTML-Eintrag an dieser Stelle nicht sichtbar dargestellt wird.

Wer eine Kategorie tatsächlich aus einer technisch erzeugten Liste ausschließen möchte, kann das auch bereits bei der Generierung der Liste lösen. Für meinen einfachen optischen Anwendungsfall war das aber nicht notwendig.

Eine kleine Aufräumaktion für die Sidebar

Bei uns ist „Aktuelles und Einblicke“ bereits deutlich im Hauptmenü vorhanden.

Die zusätzliche Ausgabe in der rechten Kategorienliste brachte deshalb für mich keinen Mehrwert. Mit einer einzigen CSS-Regel konnte ich genau diesen Eintrag ausblenden, ohne an der eigentlichen Kategorie etwas zu verändern.

Kein zusätzliches Plugin, kein Child-Theme und keine größere Umbaumaßnahme.

Manchmal soll einfach nur ein Eintrag verschwinden.