To style an entire WordPress post, target the classes WordPress adds to its post container with post_class(). For page-level styling, use body_class(); for one block, add a custom CSS class to that block and target it. If you use a block theme, check its Styles controls first. The right method depends on whether the change should affect one post, a group of posts, one block, or a broader part of the page.
Choose the scope of the change
Before writing CSS, decide exactly what should look different. A post-container selector can style the post’s title, content, and other elements inside it. A body selector can affect page-level elements beyond the post. A custom class on a block lets you target that block instance. Block-theme Styles may offer an editor-based route, but global or block-type rules can affect more than one post.
| Method | Typical scope | What you need |
|---|---|---|
post_class() classes |
One post or a group, depending on the class you target | A post template that outputs the classes, plus CSS |
body_class() classes or filter |
The page context and elements selected within it | A body element with the classes, plus CSS; a filter if you need a custom body class |
| Custom class on a block | One block instance | An editor field for additional CSS classes, plus CSS |
| Block-theme Styles | Potentially site-wide settings or a block type | A block theme and the relevant Styles controls |
Style a post using its post-container classes
In a theme template, post_class() outputs classes for the post’s container. WordPress documents that these classes can be used to style a particular post or posts assigned to a category or post format. The function accepts an optional post ID or object.
- Inspect the active theme’s rendered markup and find the element wrapping the post. Confirm that it outputs the classes from
post_class(). - Identify the actual class in that markup that distinguishes the post or group you want to change.
- Write CSS using that observed class, and scope it to the post container where practical.
For example, if inspection shows that the post container has a class named category-news, a selector could be .category-news .entry-title. Use the class and element names your theme actually outputs; this example is illustrative, not a guarantee that every theme uses those names.
#1 Best Overall
If the template does not output the classes you need, the theme’s template markup may need to be changed. The available elements and classes depend on the active theme, so check its markup before relying on a selector. WordPress’s CSS administration documentation explains the role of theme markup in the selectors available to you.
Use body classes when the page context matters
body_class() adds classes to the page’s <body> element. This is useful when a style depends on the overall page context rather than only the post container. If the built-in classes do not identify the condition you need, WordPress provides the body_class filter for adding a custom class.
Because body-level selectors can reach page elements outside the post, scope the CSS deliberately. For instance, a rule aimed at a post title should include the relevant body class and title selector rather than styling every title site-wide. As with post-container classes, verify the class names in the rendered page before using them.
Target one block in the editor
If only one paragraph, image, heading, or other block should look different, give that block a custom CSS class rather than styling the entire post. In the editor, select the block and look in its settings for the additional CSS class field. The exact controls can vary by editor and site; the WordPress.com guide to adding classes to blocks describes this approach.
Free tools Windows power users keep installed
One-click scans. No signup required.
- Select the specific block in the post editor.
- Enter a distinct class name in the block’s additional CSS classes field.
- Add a CSS rule that targets that class, and preview the post to confirm the result.
Choose a class name that describes the intended treatment, such as feature-callout, then target it as .feature-callout in CSS. A unique class makes it easier to avoid changing other blocks that share the same block type.
Check block-theme Styles before adding custom CSS
With a block theme, open the Site Editor’s Styles controls and check whether they provide the change you need. WordPress’s Styles overview covers global settings and custom CSS options, and the Theme Handbook guide to applying styles explains how styles are applied.
Rank #4
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Distinguish a rule for a block type from a rule for one block instance: a block-type CSS rule can affect that type across the site, while a custom class on a selected block provides a narrower target. Prefer the available Styles controls when they suit the job, but consider the scope before saving a global or block-type change. WordPress documentation notes that CSS customizations saved through Styles are cleared when you switch themes.
Quick Recap
Verify the result and avoid unintended changes
- Inspect the rendered post or page to confirm that your selector matches the active theme’s markup.
- Check another post in the same category or using the same block type to see whether it is affected too.
- If the style reaches too far, narrow the selector to the post container or add a unique block class.
- If nothing changes, re-check the class spelling and whether the template outputs the expected classes; theme and WordPress-version differences can change the available controls or markup.
- Preview the page at the sizes and contexts where readers will see it before publishing the change.
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.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →
