Zudem erlaubt WordPress Frontend-Entwicklern viele Freiheiten bei der Gestaltung der Seite. Dafür nutzt WordPress zum Beispiel verschiedene Default-Klassen im CSS, die sich nur schwer ändern lassen. Diese hat Karol K. im Artikel Back to Basics with WordPress CSS: Understanding the Native Classes zusammengefasst und erklärt, wie sich damit das eigene CSS so WordPress-optimiert wie möglich gestalten lässt.

Die verschiedenen Default-WordPress-Klassen

WordPress bietet seinen Nutzern vielfältige Möglichkeiten, eine individuell gestaltete Website zu designen und hat nur wenige Einschränkungen, was die Gestaltung des CSS angeht. Allerdings gibt es verschiedene Default-Klassen, die WordPress ausgibt – egal, welche Struktur man seiner Website verpasst.

So werden WordPress-Widgets immer .widget {} und.widget-title {} zugewiesen; zudem erhält jeder mögliche Widget-Typ wie zum Beispiel Archive, Kalender, Kategorien, Meta oder Seiten ihr jeweils eigenes CSS-Klassen-Set. Auch beim Body gibt es zahlreiche Klassen, die dem -Tag hinzugefügt werden können, um unterschiedliche Seiten und Seitentypen individuell zu stylen. Dazu gehören etwa Kategorie-Archive, Post-IDs oder Autorenseiten.

Genauso teilen Posts und Seiten die gleiche grundsätzliche Struktur, sodass WordPress dem Haupt-Content-Tag die entsprechenden Klassen zuweist, beispielsweise .post-XX und .format-YY. Damit lässt sich nicht nur ein individuelles Styling für einen beliebigen Post oder eine beliebige Seite in der Datenbank anwenden, sondern auch zwischen verschiedenen vom Seiten-Admin genutzten Content-Typen unterscheiden.

Auch für die verschiedenen Content-Typen gibt es Default-Klassen in WordPress, etwa hinsichtlich ihrer Ausrichtung oder Größe, was gerade bei Bildern wichtig ist. Eine Ausnahme stellen die Menüs in WordPress dar: Jedes Menü wird in einer ungeordneten Liste dargestellt, in der sich maximal die einzelnen Elemente individuell stylen lassen. So liegt die Entscheidung über die Menüstruktur beim Nutzer; WordPress stellt sie dann automatisch als Liste innerhalb der Struktur dar.

Bevor mit der Arbeit am CSS einer Website begonnen wird, bietet es sich an, die Default-Tags zu resetten. Am einfachsten geht dies mit dem Reset-Bereich des jeweils aktuellen Default-WordPress-Themes. Anschließend ist der Weg frei, sein eigenes CSS-Stylesheet für das eigene WordPress-Theme zu erstellen.