Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The right way to style WordPress comments depends on your theme. A block theme lets you edit the Comments block in Appearance → Editor; a classic theme gets its comment structure from PHP, usually comments.php, plus the theme’s stylesheet. Identify the theme architecture first, then use built-in controls before adding scoped CSS or changing template markup.
First, identify whether your theme is block-based or classic
Open Appearance in the WordPress dashboard. If you see Editor, the active theme supports the Site Editor and is a block theme. Block themes define layouts with block markup and templates. Classic themes use traditional PHP templates and normally expose fewer layout controls in the dashboard.
| Decision | Block theme | Classic theme |
|---|---|---|
| Main editing surface | Appearance → Editor (Site Editor) | Theme files and stylesheet |
| Comment structure | Comments block, including a nested Comment Template | comments.php and the HTML it outputs |
| Best first styling method | Built-in block color, typography, spacing, border and layout settings | Existing theme settings, then narrowly scoped CSS |
| When code is needed | To add a class or style markup the controls do not expose | To change template markup or style theme-specific output |
| Key dependency | The active theme must be a block theme | Markup and selectors differ between themes |
Do not copy a selector list from another site and assume it will work. Themes can use different element names, wrapper classes and nesting. Inspect the rendered comments in your browser’s developer tools before writing selector-specific CSS.
Style comments in a block theme
Open the comments area in the Site Editor
- Go to Appearance → Editor.
- Open the relevant single-post or post template. The exact template name depends on the theme.
- Use List View to find and select the Comments block.
- Make the visual changes in the block settings, then save and preview the template.
The Comments block is the container for the comment heading, repeated comment entries, pagination and comment form. Selecting it rather than an individual nested block lets you control the overall section.
Use the Comments block’s built-in settings first
Depending on the WordPress and theme versions in use, the block settings expose controls for:
- Text and background colors
- Typography, including font family, size, weight and line height where supported
- Dimensions and spacing, such as padding and margins
- Border width, style, color and radius
- Alignment and layout options
- An additional CSS class in Advanced settings
These controls are safer than editing theme files because the block stores the design with the template. If you need CSS, add a descriptive class such as post-comments in Advanced → Additional CSS class(es), then target that class rather than a generic element.
Rearrange each comment with the Comment Template
Expand the Comments block in List View and select its nested Comment Template. This is the repeated layout used for each individual comment. Its inner blocks can include:
- Avatar
- Author name
- Date
- Comment content
- Reply link
- Edit link
Move these blocks to change their order, or select one to style it independently. For example, you can place the author and date on one row, give the content more vertical spacing, or move the reply link below the text. Changes to the Comment Template repeat for every comment generated by that template.
Understand what saving changes
Saving a Site Editor template can affect every post that uses that template, not only the post you happened to preview. Confirm the selected template before saving, and check a published post, a post with no comments and a post with several comments.
Add targeted CSS when the controls are not enough
Use the class added to the Comments block as the scope for custom rules. A generic pattern is:
.post-comments {
/* overall section rules */
}
.post-comments a {
/* link rules limited to comments */
}Replace the example selectors after inspecting your theme’s actual HTML. Keep rules scoped to the comments wrapper so you do not unintentionally change links, headings or forms elsewhere. Test keyboard focus, mobile wrapping, nested replies and error messages after adding CSS.
Style comments in a classic theme
Know which file controls the layout
Classic themes generally retrieve and display comments through a comments.php template. WordPress loads that template with comments_template() for a single post or page when comments are open or the post already has comments; the function’s default template path is /comments.php.
The template controls the order and markup of the comment list, metadata, reply links, pagination and form. The stylesheet controls how that markup looks. Because every theme can structure these elements differently, open the active theme’s comments.php and inspect the rendered HTML before changing CSS.
Rank #4
Use a maintainable customization layer
If you must edit PHP, work in a child theme or another update-safe customization layer rather than changing the parent theme directly. The exact setup and deployment process varies, so follow the documentation for your hosting and theme. Back up the site and keep a copy of the original template before making changes.
Change the markup only when layout requires it
Use the template when you need a different element order, wrapper, class or conditional behavior. For color, spacing, typography and responsive adjustments, CSS is usually enough. Scope rules to classes already present in the theme, or add your own wrapper class in the template. Avoid assuming that selectors from another classic theme—such as a particular comment-list or author class—exist in yours.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11A practical styling sequence
- Record the theme and WordPress versions. Editor controls and generated markup can change between versions.
- Inspect the current output. View a post with comments, a nested reply, pagination and the form.
- Choose the editing surface. Use the Site Editor for a block theme; use the template and stylesheet for a classic theme.
- Set the visual system. Decide on readable type, contrast, spacing, avatar size, borders and reply-link treatment before fine-tuning selectors.
- Apply built-in settings first. Add CSS only for gaps the interface cannot cover.
- Test states and devices. Check logged-out and logged-in views, moderation or error messages, long names, long comments, nested replies, pagination and narrow screens.
- Save and verify scope. For Site Editor changes, confirm which template was saved; for classic themes, confirm the child theme or customization layer is active.
Common problems and fixes
“I cannot find Appearance → Editor”
The active theme is probably classic, or the WordPress installation does not currently expose the Site Editor. Use the theme’s settings and PHP/CSS workflow instead, or activate a block theme after checking compatibility.
“My CSS works on one theme but not another”
That is expected when markup and selectors differ. Inspect the new theme’s HTML and scope rules to a stable class you control.
“Only one post changed”
Check whether you edited a post-specific template or a template part. In a block theme, selecting the wrong template can limit or broaden the effect. In a classic theme, confirm that the edited file belongs to the active child theme.
“The layout breaks for replies or the comment form”
Inspect nested comment markup and form validation states separately. A rule written for top-level comments may need a narrower selector or a different spacing rule for nested replies and form notices.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
What to check before publishing the redesign
- Text and controls meet your site’s contrast requirements.
- Author names, dates and reply links remain distinguishable without color alone.
- Avatars do not push comment text off narrow screens.
- Nested replies have a clear visual relationship without excessive indentation.
- The form, pagination and moderation messages remain usable after styling.
- Template or child-theme changes survive a normal theme update process.
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.
