Skip to content

Everything for WordPress, web development — and beyond

📋 Default WordPress CSS classes: a complete 2026 cheat sheet
WordPress ThemesWordPress
8 min1,698 words

📋 Default WordPress CSS classes: a complete 2026 cheat sheet

You open the code inspector on your site and see dozens of classes on <body>: .home .logged-in .single-postid-432. You did not write them, plugins are not involved. Where do they come from?

WordPress added them itself. The CMS automatically attaches classes to <body>, wraps posts in post_class(), marks up menus, widgets, and comments, all out of the box, without a single line of your code. The problem is that beginners either do not know about these classes or do not understand how to use them. The result: miles of extra CSS where a single standard selector would suffice.

This cheat sheet is a complete list of CSS classes that WordPress generates by default. You will learn how to target specific pages through body classes, style posts by format, and design menus and widgets without editing HTML. Only what actually comes in handy when building a theme or customizing an existing one.

HTML and CSS code on a monitor screen

💡 Quick overview:

  • Open the code inspector on any page of your site, find the classes .home .single .logged-in on <body>, and confirm they are already in the markup without your involvement.
  • Add the rule .search-results .sidebar { display: none; } to style.css: the sidebar will disappear only on the search page, leaving other pages untouched.
  • Output post_class() in the posts loop and style .format-video as a wide card while .format-image gets a square layout: one function, different formats, different designs.
  • Group widget selectors with commas: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, and four widgets get identical styling in one line.

How WordPress generates CSS classes: body_class() and post_class()

WordPress adds classes through two key functions: body_class() and post_class(). They are built into the core and called by the theme when rendering the page. You do not need to include anything: if the theme follows WordPress standards, these functions are already working.

body_class() outputs a list of classes in the class attribute of the <body> tag. The set of classes depends on which page the visitor is viewing: home, category, search, single post, archive. These classes let you selectively change the background, font, or hide blocks on specific pages without creating separate templates.

post_class() does the same for each post in the loop. It returns classes like .format-image or .sticky, which help distinguish a sticky post from a gallery and change the layout accordingly.

Both functions accept a custom parameter: you can add your own class. For example:

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

This adds .my-custom-class to all pages. Useful when you include a shared CSS file and want a unique hook for your styling.

Body tag classes: complete list

This is the richest set of classes in WordPress. Under the hood, body_class() analyzes the current URL, page type, and user status, then outputs dozens of selectors. Below is the complete list of what you may encounter in the markup.

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 practice, the most common scenario is styling the search page. Suppose you want to hide the sidebar on search results. Instead of editing search.php, add this to style.css:

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

The .search-results class is only present on <body> when the search page is active. On other pages, the sidebar remains in place. The same principle works for .error404 .archive .logged-in and any other class from the table.

Pay attention to dynamic classes with suffixes: .category-(slug) .tag-(slug) .author-(user_nicename). They let you style a specific category page or author page. For example, .category-news .entry-title { color: red; } will color headings only in the "News" category.

Post classes: post_class() and content formats

The post_class() function adds classes to the <article> element (or whatever tag your theme uses to wrap posts). The classes are output in the class attribute and depend on the content type.

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 {}

A separate group consists of post format classes. WordPress supports formats out of the box: image, gallery, chat, link, quote, status, video. post_class() automatically adds .format-{type} to each post.

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

In practice, this looks like the following: you display a three-column grid on the home page, but want a single wide column for video format. The solution is one line of CSS:

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

The .sticky class marks sticky posts, and .hentry serves as a microformat marker (used by search engines and parsers). The main point: do not remove post_class() from the template. Without it, the theme loses compatibility with plugins that rely on standard post markup.

When you create a menu in the WordPress admin, it is wrapped in a container with a class you specified when registering the menu. In the example below, this is main-menu. Inside is a standard nesting of <ul> → <li> → <a>, and each level receives its own classes.

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 */

The classes .current_page_item .current-cat and .current-menu-item are the most useful. They automatically highlight the active menu item. You do not need to write PHP conditions: simply set a style for .current-menu-item a, and the active link will be highlighted with color or underline on any page of the site.

Editor classes: images, galleries, and captions

The WordPress editor (both classic TinyMCE and the block-based Gutenberg) adds standard classes to <img>, galleries, and captions when inserting media files. Knowing these classes, you can control image alignment and gallery styling through your theme's CSS.

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 {}

The classes .alignleft .alignright .aligncenter control text wrapping. WordPress attaches them to <img> automatically when the user selects alignment in the editor. The classes .size-full .size-large .size-medium .size-thumbnail correspond to thumbnail sizes registered in the theme, and you can use them to set max-width or border-radius for images of a specific size.

.wp-caption and .wp-caption-text are the container and caption for an image. In most themes, the caption is styled minimally: gray italic text under the picture. Knowing the class, you can turn it into a neat overlay badge on top of the photo with a single CSS edit, no plugins needed.

Widget classes: search, categories, calendar, tag cloud

WordPress ships with a set of standard widgets: Search, Categories, Recent Posts, Tag Cloud, Calendar, Meta, Archives, Pages, Text. Each has its own CSS wrapper with predictable classes. If you have not removed the standard widgets via unregister_widget(), they are present in the sidebar.

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 {}

Many classes share the same structure: Categories, Archives, Pages, and Recent Posts all have identical nesting of ul → li → a. In practice, this lets you group selectors with commas and shorten your stylesheet:

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}

Four widgets, one line of CSS. Without knowing the standard classes, you would write separate rules for each widget manually.

Comment classes: list and form

Comments in WordPress have the most elaborate class system, especially if the theme supports threaded discussions. A flat list requires only three or four selectors, but the full set covers nesting, odd/even parity, authorship, and depth.

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

The most useful in practice are .bypostauthor (highlights comments by the post author with a colored badge) and .depth-{id} (styling by nesting level). The classes .odd/.even let you stripe comments for better readability in long discussions.

Video: how to use standard WordPress classes when building a theme

A practical walkthrough is always clearer than a dry cheat sheet. This video shows how to find and apply standard WordPress classes when customizing an existing theme: from the code inspector to edits in style.css.

⁉️🤔 Frequently asked questions

Is it mandatory to use body_class() and post_class() in my theme?

Yes, if you are developing a theme for public distribution. This is a requirement of the WordPress Theme Review standards: without body_class() and post_class(), the theme will not pass review in the WordPress.org directory. For a custom theme built for yourself, it is not mandatory, but these functions save hours of work when styling individual pages and post types.

Can I add my own class to body or a post?

Yes. Pass a string with the class to the function call: body_class('my-theme-body') will add .my-theme-body to the <body> tag. Similarly, post_class('featured') works the same way, and the .featured class will appear on selected posts. Multiple classes are passed as an array: post_class( array( 'featured', 'no-sidebar' ) ).

Are the classes in this cheat sheet still valid for Gutenberg?

Yes. Although Gutenberg changed the editor, the front-end markup of WordPress remains the same. body_class() and post_class() work regardless of the editor, and Gutenberg also uses the .align* .wp-caption and gallery classes. Widget classes are valid for classic widgets; for blocks in the sidebar, the structure differs, but the base .widget class is preserved.

Where should I add my CSS: in the theme's style.css or in the customizer settings?

For edits that use standard WordPress classes, the safest place is style.css of a child theme. Additional CSS in the customizer (Appearance → Customize → Additional CSS) also works, but it is tied to the active theme and stored in the database: when you switch themes, the styles are lost. If you are customizing someone else's theme, create a child theme and make changes there.

What should I do if the theme does not output standard classes?

Check header.php for the presence of body_class() inside the <body> tag. If the call is missing, add it. Similarly in loop templates: post_class() should be in the class attribute of the wrapping element for posts. This rarely happens in commercial themes, but it is common in older or custom-built themes.

What to take away from this cheat sheet first

If you have built one or two themes and do not want to memorize all the classes, remember three main things.

First. body_class() is your main tool for styling specific pages. .home .single .category-slug .logged-in cover most customization tasks without editing templates.

Second. post_class() with formats (.format-video .format-gallery) lets you build a post grid where each format looks different, without plugins or extra conditions in the loop.

Third. Standard widget classes (ul → li → a) are identical across all widgets. Group selectors with commas, and your style.css will be half as long.

Bookmark this cheat sheet. The next time you open the code inspector and see an unfamiliar class on <body>, you will know where it came from and how to use it.

Editorial Team
Editorial TeamContent Team→ All publications

A professional team of writers and editors specializing in creating quality content.