Free tools Windows power users keep installed
One-click scans. No signup required.
WordPress-generated CSS classes are class names added to front-end HTML to describe the page, post, alignment, or block. Use body_class() for page-level classes, post_class() for post-wrapper classes, and the rendered markup to confirm what is present before writing a selector.
Which element gets each WordPress class?
The function or block that outputs the markup determines where a class appears. That matters because a selector only matches elements carrying that class.
| Element or feature | Common classes or pattern | What it describes |
|---|---|---|
| Page body | home, blog, archive, search, search-results, search-no-results, error404, wp-singular, wp-theme-{theme}, wp-child-theme-{theme} |
The current request, queried object, or theme context. The exact combination varies by page and site. WordPress body_class() reference |
| Post container | post-{ID}, post type name, type-{post_type}, status-{post_status}, format-{format}, hentry, category-{slug}, tag-{slug}, and taxonomy-term patterns |
Identifies a post and, where applicable, its type, status, format, or taxonomy membership. Not every post has every class. WordPress post_class() reference |
| Aligned content | alignnone, alignleft, aligncenter, alignright |
Alignment choices for images and block elements documented in the CSS handbook. WordPress CSS handbook |
| Captions | wp-caption and related caption-markup classes |
Caption-related markup; inspect the rendered HTML to find the class on the exact element you want to style. WordPress CSS handbook |
| Blocks | .wp-block-{namespace}-{slug}; core blocks commonly use .wp-block-{slug} |
Block identity. For example, the core Image block is commonly targeted with .wp-block-image; a third-party block can customize its output. WordPress Block Stylesheets handbook |
This is a practical selection, not an exhaustive or version-independent inventory. The theme, request, post data, registered taxonomies, and third-party code can all affect the generated markup.
What does body_class() do?
body_class() prints a class attribute on the page’s <body> element. In a theme template, the common placement is:
#1 Best Overall
<body <?php body_class(); ?>>The resulting classes provide context about the page and site. The official function reference illustrates output such as <body class="page page-id-2 page-parent page-template-default logged-in">. Treat that as an example of possible classes, not as a list every page or installation will emit. WordPress body_class() reference
To add a class conditionally, use the body_class filter and return the class array. This example adds example on pages using page-example.php:
Rank #2
add_filter( 'body_class', function( $classes ) {
if ( is_page_template( 'page-example.php' ) ) {
$classes[] = 'example';
}
return $classes;
} );Returning the array matters: the WordPress hook reference warns that failing to return it clears the classes and can affect the site’s visual state. WordPress body_class() reference
What does post_class() add?
post_class() prints classes on a post’s wrapper, often an <article> or <div>. Add it where that wrapper is opened:
<article <?php post_class(); ?>>Depending on the post and site, the class list can identify its post ID, type, status, format, and category, tag, or other taxonomy terms. The function reference includes a contributed example with names such as post-4564, post, type-post, status-publish, format-standard, hentry, and category-news. These illustrate naming families; they are not guaranteed output for every post. WordPress post_class() reference
How do you target a generated class in CSS?
In CSS, write a period followed by the class name. For example:
.category-news {
/* styles for elements carrying this class */
}
.wp-block-image {
/* styles for the core Image block */
}Choose the selector scope to match the change you want:
- Page context: a class on
<body>can scope rules to a request or site context, such as.error404. - Post context: a post type or taxonomy class can match a broader group of posts; a class such as
.post-4564targets one particular post ID when that class is present. - Block context: a block class such as
.wp-block-imagetargets matching block markup. Third-party block output may use a different class.
A generated class is a selector hook, not a promise of a visual effect. The active theme’s CSS determines how it looks, and a rule only applies when its selector matches the actual markup.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →How can you check which classes are present?
- Open the front-end page you want to style.
- Use your browser’s developer tools to inspect the relevant element:
<body>for page context, the post wrapper for post context, or the block element for block styles. - Read that element’s
classattribute and copy the exact class name you intend to use. - Write a CSS selector with a leading period, then check the result on the intended page and any other pages the rule could match.
This check is especially important for post and block classes: their output depends on the content, theme, and any third-party code in use. The get_body_class() and get_post_class() counterparts return arrays for code that needs to inspect or process class names rather than print them. get_body_class() · get_post_class()
Where should custom CSS go?
Avoid editing an updateable parent theme’s files directly; a theme update may overwrite those changes. WordPress’s CSS handbook explains that Custom CSS loads after the theme’s original CSS, allowing it to override specific declarations. Keep custom code in a maintainable customization point, such as a child theme when that fits your setup. WordPress CSS handbook
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
