WordPress comments layout

Comments are a great way to keep site visitors engaged with what they read. But to encourage activity in this section, the layout of comments section should be attractive in order to give your users a great commenting experience.

The good thing is that you do not need to install additional plugins to have a comments system on a WordPress site. It comes with a WordPress core by default.

Often, the comments section can be found at the bottom of the main content area of your page. In case your site does not show this section, check possible solutions on how to resolve the issue regarding comments not showing in WordPress.

Who is responsible for a comments layout?

Since a WordPress theme is responsible for an appearance of your site, the comments layout also comes from the theme.

Each theme provides its own styles for the comments area to match a general design concept of a WordPress site.

So, if the layout of the comments section on your site does not look right, or it seems broken to you, then you should contact the author of your theme for a solution.

Even though WordPress provides the same comments functionality for all sites by default, styles of this section can vary from site to site. Let’s review a few comments layouts found on WordPress sites.

These are examples of comments sections in official WordPress themes: Twenty Twenty-One (left) and Twenty Nineteen (right).
These are examples of comments areas shown in professional WordPress themes by Themes Harbor: Fortune (left) and Venture (right).

As you can see the structure of the comments section looks the same in all examples, but a visual presentation is completely different in each theme.

How to customize a comments design?

It is possible to modify a visual presentation of the comments area on your WordPress site. However, it requires applying custom CSS styles to the theme.

Before styling WordPress comments layout, you need to know CSS classes for the elements located in the area.

Thankfully, modern web browsers come with a special tool that you can use to find out these classes in the comments area.

For example, you can try Chrome DevTools to inspect element you want to modify. It also allows you to test your CSS styles.

However, it’s important to remember that anything you change using this tool is only visible to you. You can make the changes permanent by adding a custom CSS to your WordPress site.

Example of customized comments section

In the begging of this article, I’ve posted a screenshot of the comments section in Twenty Twenty-One.

Let’s make some changes to this section:

  • Change background color of the comments section
  • Modify color, size and alignment of the comments title
  • Change links color in the comments area

First, collect CSS classes for the comments section and the comments title using a tool provided by the browser. For the Twenty Twenty-One theme, these classes are: comments-area and comments-title.

Next create and then add custom CSS to your WordPress site. Here is a custom CSS I am using to make the changes:

/* change background color of the comments section */
.comments-area {
  background-color: #ffffff;
  padding: 2em;
}

/* modify color, size and alignment of the comments title */
.comments-area .comments-title {
  font-size: 1em;
  color: gray;
  text-align: center;
}

/* change links color in the comments area */
.comments-area a {
  color: red;
  font-weight: bold;
}

Once the custom CSS is saved on a site, the comments layout on a WordPress site will have a modified appearance:

Example of edited version of the comments section displayed in Twenty Twenty-One.

Solution with a custom CSS does not work

The are cases when the solution above might not work for your theme. If the custom CSS you’ve used for the comments section does not work then it’s possible that your theme overrides your custom styles.

  • If you are using a free theme from WordPress.org then please post your support request at WordPress.org support forum.
  • If you are using one of our themes, please contact us using the link located in the site header.
  • If you are using the theme other vendor, please contact the author of your theme for support.

Make your site look its best with Themes Harbor

By using a professional WordPress theme, you can unleash more of the potential of your WordPress site and give visitors a great experience. Themes Harbor enables you to create a human-centered and future proof WordPress site.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.