Skip to content

Alles für WordPress, Webentwicklung — und mehr

📋 Standard-WordPress-CSS-Klassen: ein vollständiger Spickzettel 2026
WordPress-ThemesWordPress
8 Min1,663 Wörter

📋 Standard-WordPress-CSS-Klassen: ein vollständiger Spickzettel 2026

Sie öffnen den Code-Inspektor Ihrer Website und sehen Dutzende Klassen am <body>: .home .logged-in .single-postid-432. Sie haben diese nicht geschrieben, Plugins sind nicht beteiligt. Woher stammen sie?

WordPress hat sie selbst hinzugefügt. Das CMS weist dem <body> automatisch Klassen zu, umschließt Beiträge mit post_class(), zeichnet Menüs, Widgets und Kommentare aus, alles direkt einsatzbereit, ohne eine einzige Zeile Ihres eigenen Codes. Das Problem: Anfänger kennen diese Klassen entweder nicht oder verstehen nicht, wie sie sie nutzen können. Das Ergebnis: kilometerlanges zusätzliches CSS, wo ein einziger Standard-Selektor genügen würde.

Dieser Spickzettel ist eine vollständige Liste der CSS-Klassen, die WordPress standardmäßig generiert. Sie erfahren, wie Sie über Body-Klassen bestimmte Seiten ansprechen, Beiträge nach Format gestalten und Menüs sowie Widgets ohne HTML-Änderungen designen. Nur das, was beim Erstellen eines Themes oder der Anpassung eines bestehenden Themes tatsächlich nützlich ist.

HTML- und CSS-Code auf einem Bildschirm

💡 Kurzüberblick:

  • Öffnen Sie den Code-Inspektor auf einer beliebigen Seite Ihrer Website, suchen Sie die Klassen .home .single .logged-in am <body> und stellen Sie fest, dass diese bereits ohne Ihr Zutun im Markup vorhanden sind.
  • Fügen Sie die Regel .search-results .sidebar { display: none; } in die style.css ein: Die Seitenleiste verschwindet nur auf der Suchseite, alle anderen Seiten bleiben unberührt.
  • Geben Sie post_class() in der Beitragsschleife aus und gestalten Sie .format-video als breite Karte, während .format-image ein quadratisches Layout erhält: eine Funktion, verschiedene Formate, verschiedene Designs.
  • Gruppieren Sie Widget-Selektoren mit Kommas: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, und vier Widgets erhalten mit einer Zeile identisches Styling.

Wie WordPress CSS-Klassen generiert: body_class() und post_class()

WordPress fügt Klassen über zwei zentrale Funktionen hinzu: body_class() und post_class(). Sie sind im Kernsystem integriert und werden vom Theme beim Rendern der Seite aufgerufen. Sie müssen nichts einbinden: Wenn das Theme den WordPress-Standards folgt, arbeiten diese Funktionen bereits.

body_class() gibt eine Liste von Klassen im class-Attribut des <body>-Tags aus. Welche Klassen das sind, hängt davon ab, welche Seite der Besucher gerade betrachtet: Startseite, Kategorie, Suche, Einzelbeitrag, Archiv. Diese Klassen erlauben es Ihnen, Hintergrund, Schrift oder Blöcke auf bestimmten Seiten selektiv zu ändern, ohne separate Templates zu erstellen.

post_class() tut dasselbe für jeden Beitrag in der Schleife. Die Funktion liefert Klassen wie .format-image oder .sticky zurück, die helfen, einen angepinnten Beitrag von einer Galerie zu unterscheiden und das Layout entsprechend anzupassen.

Beide Funktionen akzeptieren einen benutzerdefinierten Parameter: Sie können Ihre eigene Klasse hinzufügen. Zum Beispiel:

1<body <?php body_class( 'my-custom-class' ); ?>>

Dies fügt .my-custom-class auf allen Seiten hinzu. Nützlich, wenn Sie eine gemeinsame CSS-Datei einbinden und einen eindeutigen Aufhänger für Ihr Styling wünschen.

Klassen des Body-Tags: vollständige Liste

Dies ist der umfangreichste Satz an Klassen in WordPress. Intern analysiert body_class() die aktuelle URL, den Seitentyp und den Benutzerstatus und gibt dann Dutzende Selektoren aus. Nachfolgend die vollständige Liste dessen, was Ihnen im Markup begegnen kann.

1.rtl {}
2.home {}
3.blog {}
4.archive {}
5.date {}
6.search {}
7.paged {}
8.attachment {}
9.error404 {}
10.single postid-(id) {}
11.attachmentid-(id) {}
12.attachment-(mime-type) {}
13.author {}
14.author-(user_nicename) {}
15.category {}
16.category-(slug) {}
17.tag {}
18.tag-(slug) {}
19.page-parent {}
20.page-child parent-pageid-(id) {}
21.page-template page-template-(template file name) {}
22.search-results {}
23.search-no-results {}
24.logged-in {}
25.paged-(page number) {}
26.single-paged-(page number) {}
27.page-paged-(page number) {}
28.category-paged-(page number) {}
29.tag-paged-(page number) {}
30.date-paged-(page number) {}
31.author-paged-(page number) {}
32.search-paged-(page number) {}

In der Praxis ist das häufigste Szenario das Gestalten der Suchseite. Angenommen, Sie möchten die Seitenleiste in den Suchergebnissen ausblenden. Anstatt search.php zu bearbeiten, fügen Sie dies in die style.css ein:

1.search-results .sidebar { display: none; }

Die Klasse .search-results ist nur dann am <body> vorhanden, wenn die Suchseite aktiv ist. Auf anderen Seiten bleibt die Seitenleiste erhalten. Dasselbe Prinzip funktioniert für .error404 .archive .logged-in und jede andere Klasse aus der Tabelle.

Achten Sie auf dynamische Klassen mit Suffixen: .category-(slug) .tag-(slug) .author-(user_nicename). Sie ermöglichen es Ihnen, eine bestimmte Kategorieseite oder Autorenseite zu gestalten. Zum Beispiel färbt .category-news .entry-title { color: red; } Überschriften nur in der Kategorie „News".

Beitragsklassen: post_class() und Inhaltsformate

Die Funktion post_class() fügt dem <article>-Element (oder welchem Tag auch immer Ihr Theme für die Umhüllung von Beiträgen verwendet) Klassen hinzu. Die Klassen werden im class-Attribut ausgegeben und hängen vom Inhaltstyp ab.

1.post-id {}
2.post {}
3.page {}
4.attachment {}
5.sticky {}
6.hentry {}
7.category-misc {}
8.category-example {}
9.tag-news {}
10.tag-wordpress {}
11.tag-markup {}

Eine eigene Gruppe bilden die Klassen der Beitragsformate. WordPress unterstützt Formate standardmäßig: Bild, Galerie, Chat, Link, Zitat, Status, Video. post_class() fügt jedem Beitrag automatisch .format-{type} hinzu.

1.format-image {}
2.format-gallery {}
3.format-chat {}
4.format-link {}
5.format-quote {}
6.format-status {}
7.format-video {}

In der Praxis sieht das folgendermaßen aus: Sie zeigen auf der Startseite ein dreispaltiges Raster an, möchten aber für das Videoformat eine einzelne breite Spalte. Die Lösung ist eine Zeile CSS:

1.format-video { grid-column: span 3; }

Die Klasse .sticky kennzeichnet angepinnte Beiträge, und .hentry dient als Mikroformat-Marker (wird von Suchmaschinen und Parsern verwendet). Der entscheidende Punkt: Entfernen Sie post_class() nicht aus dem Template. Ohne diese Funktion verliert das Theme die Kompatibilität mit Plugins, die auf das standardisierte Beitrags-Markup angewiesen sind.

Wenn Sie im WordPress-Admin ein Menü anlegen, wird es in einen Container mit einer Klasse eingefasst, die Sie bei der Registrierung des Menüs angegeben haben. Im folgenden Beispiel ist dies main-menu. Im Inneren befindet sich eine standardmäßige Verschachtelung von <ul> → <li> → <a>, und jede Ebene erhält ihre eigenen Klassen.

1#header .main-menu {}               /* menu container */
2#header .main-menu ul {}            /* first-level list */
3#header .main-menu ul ul {}         /* nested list (dropdown menu) */
4#header .main-menu li {}            /* menu item */
5#header .main-menu li a {}          /* item link */
6#header .main-menu li ul {}         /* dropdown items list */
7#header .main-menu li li {}         /* dropdown item */
8#header .main-menu li li a {}       /* dropdown item link */
9 
10.current_page_item {}               /* current page */
11.current-cat {}                     /* current category */
12.current-menu-item {}               /* any current item */
13.menu-item-type-taxonomy {}         /* type: category */
14.menu-item-type-post_type {}        /* type: page */
15.menu-item-type-custom {}           /* type: custom link */
16.menu-item-home {}                  /* link to home */

Die Klassen .current_page_item, .current-cat und .current-menu-item sind die nützlichsten. Sie heben den aktiven Menüpunkt automatisch hervor. Sie müssen keine PHP-Bedingungen schreiben: Definieren Sie einfach ein Styling für .current-menu-item a, und der aktive Link wird auf jeder Seite der Website farblich oder per Unterstreichung markiert.

Editor-Klassen: Bilder, Galerien und Bildunterschriften

Der WordPress-Editor (sowohl der klassische TinyMCE als auch der blockbasierte Gutenberg) fügt beim Einfügen von Mediendateien Standardklassen zu <img>, Galerien und Bildunterschriften hinzu. Wenn Sie diese Klassen kennen, können Sie die Bildausrichtung und Galeriegestaltung über das CSS Ihres Themes steuern.

1.entry-content img {}
2.alignleft, img.alignleft {}
3.alignright, img.alignright {}
4.aligncenter, img.aligncenter {}
5.alignnone, img.alignnone {}
6 
7.wp-caption {}
8.wp-caption img {}
9.wp-caption p.wp-caption-text {}
10 
11.wp-smiley {}
12 
13blockquote.left {}
14blockquote.right {}
15 
16.gallery dl {}
17.gallery dt {}
18.gallery dd {}
19.gallery dl a {}
20.gallery dl img {}
21.gallery-caption {}
22 
23.size-full {}
24.size-large {}
25.size-medium {}
26.size-thumbnail {}

Die Klassen .alignleft, .alignright und .aligncenter steuern den Textumfluss. WordPress weist sie dem <img> automatisch zu, wenn der Nutzer im Editor eine Ausrichtung wählt. Die Klassen .size-full, .size-large, .size-medium und .size-thumbnail entsprechen den im Theme registrierten Thumbnail-Größen; Sie können sie nutzen, um max-width oder einen Border-Radius für Bilder einer bestimmten Größe festzulegen.

.wp-caption und .wp-caption-text sind der Container und die Bildunterschrift für ein Bild. In den meisten Themes ist die Bildunterschrift minimalistisch gestaltet: grauer, kursiver Text unter dem Bild. Wenn Sie die Klasse kennen, können Sie daraus mit einer einzigen CSS-Änderung ein aufgeräumtes Overlay-Badge auf dem Foto machen, ganz ohne Plugins.

Widget-Klassen: Suche, Kategorien, Kalender, Schlagwortwolke

WordPress wird mit einer Reihe von Standard-Widgets ausgeliefert: Suche, Kategorien, Neueste Beiträge, Schlagwortwolke, Kalender, Meta, Archive, Seiten, Text. Jedes hat seinen eigenen CSS-Wrapper mit vorhersagbaren Klassen. Sofern Sie die Standard-Widgets nicht per unregister_widget() entfernt haben, sind sie in der Seitenleiste vorhanden.

1.widget {}
2 
3.widget_search {}
4#searchform {}
5.screen-reader-text {}
6 
7.widget_meta {}
8.widget_meta ul {}
9.widget_meta ul li {}
10.widget_meta ul li a {}
11 
12.widget_links {}
13.widget_links ul {}
14.widget_links ul li {}
15.widget_links ul li a {}
16 
17.widget_archive {}
18.widget_archive ul {}
19.widget_archive ul li {}
20.widget_archive ul li a {}
21.widget_archive select {}
22.widget_archive option {}
23 
24.widget_pages {}
25.widget_pages ul {}
26.widget_pages ul li {}
27.widget_pages ul li a {}
28 
29.widget_tag_cloud {}
30.widget_tag_cloud a {}
31.widget_tag_cloud a:after {}
32.widget_tag_cloud a:before {}
33 
34.widget_calendar {}
35#calendar_wrap {}
36#calendar_wrap th {}
37#calendar_wrap td {}
38#wp-calendar tr td {}
39#wp-calendar caption {}
40#wp-calendar a {}
41#wp-calendar #today {}
42#wp-calendar #prev {}
43#wp-calendar #next {}
44#wp-calendar #next a {}
45#wp-calendar #prev a {}
46 
47.widget_categories {}
48.widget_categories ul {}
49.widget_categories ul li {}
50.widget_categories ul ul.children {}
51.widget_categories a {}
52.widget_categories select {}
53.widget_categories select#cat {}
54.widget_categories select.postform {}
55.widget_categories option {}
56.widget_categories .level-0 {}
57.widget_categories .level-1 {}
58.widget_categories .level-2 {}
59.widget_categories .level-3 {}
60 
61.widget_recent_comments {}
62#recentcomments {}
63#recentcomments li {}
64#recentcomments li a {}
65 
66.widget_recent_entries {}
67.widget_recent_entries ul {}
68.widget_recent_entries ul li {}
69.widget_recent_entries ul li a {}
70 
71.widget_text {}
72.textwidget {}
73.textwidget p {}

Viele Klassen teilen dieselbe Struktur: Kategorien, Archive, Seiten und Neueste Beiträge haben alle eine identische Verschachtelung von ul → li → a. In der Praxis können Sie so Selektoren mit Kommas gruppieren und Ihr Stylesheet verkürzen:

1.widget_categories ul,
2.widget_archive ul,
3.widget_pages ul,
4.widget_recent_entries ul {
5    list-style: none;
6    padding-left: 0;
7}

Vier Widgets, eine Zeile CSS. Ohne Kenntnis der Standardklassen würden Sie für jedes Widget manuell separate Regeln schreiben.

Kommentar-Klassen: Liste und Formular

Kommentare in WordPress haben das ausgefeilteste Klassensystem, besonders wenn das Theme verschachtelte Diskussionen unterstützt. Eine flache Liste erfordert nur drei oder vier Selektoren, aber der vollständige Satz deckt Verschachtelung, gerade/ungerade Parität, Autorenschaft und Tiefe ab.

1/* Comment list */
2.commentlist {}
3.commentlist li {}
4.commentlist li p {}
5.commentlist li ul {}
6.commentlist .reply {}
7.commentlist .reply a {}
8 
9.commentlist .alt {}
10.commentlist .odd {}
11.commentlist .even {}
12.commentlist .thread-alt {}
13.commentlist .thread-odd {}
14.commentlist .thread-even {}
15 
16.commentlist .vcard {}
17.commentlist .vcard cite.fn {}
18.commentlist .vcard span.says {}
19.commentlist .vcard img.photo {}
20.commentlist .vcard img.avatar {}
21.commentlist .vcard cite.fn a.url {}
22 
23.commentlist .comment-meta {}
24.commentlist .comment-meta a {}
25.commentlist .commentmetadata {}
26.commentlist .commentmetadata a {}
27 
28.commentlist .parent {}
29.commentlist .comment {}
30.commentlist .children {}
31.commentlist .pingback {}
32.commentlist .bypostauthor {}
33.commentlist .comment-author {}
34.commentlist .comment-author-admin {}
35 
36.commentlist li ul.children li {}
37.commentlist li ul.children li.alt {}
38.commentlist li ul.children li.byuser {}
39.commentlist li ul.children li.comment {}
40.commentlist li ul.children li.depth-{id} {}
41.commentlist li ul.children li.bypostauthor {}
42.commentlist li ul.children li.comment-author-admin {}
43 
44#cancel-comment-reply {}
45#cancel-comment-reply a {}
46 
47/* Comment form */
48#respond {}
49#reply-title {}
50#cancel-comment-reply-link {}
51#commentform {}
52#author {}
53#email {}
54#url {}
55#comment
56#submit
57.comment-notes {}
58.required {}
59.comment-form-author {}
60.comment-form-email {}
61.comment-form-url {}
62.comment-form-comment {}
63.form-allowed-tags {}
64.form-submit

Am nützlichsten in der Praxis sind .bypostauthor (hebt Kommentare des Beitragsautors mit einem farbigen Badge hervor) und .depth-{id} (Styling nach Verschachtelungsebene). Die Klassen .odd/.even ermöglichen es Ihnen, Kommentare für eine bessere Lesbarkeit in langen Diskussionen abwechselnd einzufärben.

Video: So nutzen Sie die WordPress-Standardklassen bei der Theme-Entwicklung

Eine praktische Vorführung ist stets klarer als ein trockener Spickzettel. Dieses Video zeigt, wie Sie die WordPress-Standardklassen bei der Anpassung eines bestehenden Themes finden und anwenden: vom Code-Inspektor bis zu den Änderungen in style.css.

⁉️🤔 Häufig gestellte Fragen

Ist es verpflichtend, body_class() und post_class() in meinem Theme zu verwenden?

Ja, wenn Sie ein Theme für die öffentliche Verbreitung entwickeln. Dies ist eine Anforderung der WordPress-Theme-Review-Standards: Ohne body_class() und post_class() besteht das Theme die Prüfung für das WordPress.org-Verzeichnis nicht. Für ein eigenes, nur für Sie selbst erstelltes Theme ist es nicht verpflichtend, aber diese Funktionen sparen Stunden an Arbeit, wenn Sie einzelne Seiten und Beitragstypen stylen.

Kann ich dem Body oder einem Beitrag eine eigene Klasse hinzufügen?

Ja. Übergeben Sie einen String mit der Klasse an den Funktionsaufruf: body_class('my-theme-body') fügt .my-theme-body zum <body>-Tag hinzu. Analog funktioniert post_class('featured') auf die gleiche Weise, und die Klasse .featured erscheint bei ausgewählten Beiträgen. Mehrere Klassen werden als Array übergeben: post_class( array( 'featured', 'no-sidebar' ) ).

Sind die Klassen in diesem Spickzettel auch für Gutenberg noch gültig?

Ja. Obwohl Gutenberg den Editor verändert hat, bleibt das Frontend-Markup von WordPress gleich. body_class() und post_class() funktionieren unabhängig vom Editor, und Gutenberg verwendet ebenfalls die Klassen .align*, .wp-caption und die Galerie-Klassen. Die Widget-Klassen gelten für klassische Widgets; bei Blöcken in der Seitenleiste weicht die Struktur ab, aber die Basisklasse .widget bleibt erhalten.

Wo sollte ich mein CSS einfügen: in der style.css des Themes oder in den Customizer-Einstellungen?

Für Anpassungen, die standardmäßige WordPress-Klassen nutzen, ist der sicherste Ort die style.css eines Child-Themes. Zusätzliches CSS im Customizer (Design → Customizer → Zusätzliches CSS) funktioniert ebenfalls, ist jedoch an das aktive Theme gebunden und in der Datenbank gespeichert: Wenn Sie das Theme wechseln, gehen die Stile verloren. Wenn Sie ein fremdes Theme anpassen, erstellen Sie ein Child-Theme und nehmen Sie die Änderungen dort vor.

Was tun, wenn das Theme keine Standardklassen ausgibt?

Prüfen Sie die header.php auf das Vorhandensein von body_class() innerhalb des <body>-Tags. Fehlt der Aufruf, fügen Sie ihn hinzu. Analog in den Schleifen-Templates: post_class() sollte im class-Attribut des umschließenden Elements für Beiträge stehen. Dies kommt in kommerziellen Themes selten vor, ist aber in älteren oder individuell erstellten Themes üblich.

Was Sie aus diesem Spickzettel zuerst mitnehmen sollten

Wenn Sie ein oder zwei Themes erstellt haben und sich nicht alle Klassen merken möchten, behalten Sie drei wesentliche Dinge im Kopf.

Erstens. body_class() ist Ihr wichtigstes Werkzeug, um bestimmte Seiten zu stylen. .home, .single, .category-slug, .logged-in decken die meisten Anpassungsaufgaben ab, ohne dass Sie Templates bearbeiten müssen.

Zweitens. post_class() mit Formaten (.format-video, .format-gallery) ermöglicht Ihnen den Aufbau eines Beitragsrasters, bei dem jedes Format anders aussieht, ohne Plugins oder zusätzliche Bedingungen in der Schleife.

Drittens. Die Standard-Widget-Klassen (ul → li → a) sind über alle Widgets hinweg identisch. Gruppieren Sie Selektoren mit Kommas, und Ihre style.css wird nur halb so lang.

Setzen Sie ein Lesezeichen auf diesen Spickzettel. Wenn Sie das nächste Mal den Code-Inspektor öffnen und eine unbekannte Klasse am <body> sehen, wissen Sie, woher sie stammt und wie Sie sie nutzen können.

Redaktion
RedaktionRedaktionsteam→ All publications

Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.