By Carl Heaton

Comments are an integral part of any WordPress site and as such our theme should also make the most out of them and have them styled accordingly.

Let us use the post we worked with previously to style the comments. First we need to allow them in the post itself. This is done by editing the post and placing a tick next to “Allow comments” just as you see it done on the following screenshot:

allowing comments

Since we now have the option to post comments, let us post two of these with the second being a reply to the first:

comments unstilled

This is how our comment section works after we allowed the comments and posted one comment and a reply. The aim here is to see how Underscores styles comments by default and examine our starting point before we begin making changes to the template outputting the comments.

We already have a section for comments in style.css called “Comments” and this is where we will place all our related styles. If you inspect the source code of the comments section in the browser, you will see that it consists of three areas with classes “comments-title”, “comment-list” and “comment-respond” all wrapped up in a div with the id of “comments”.

comments source code

The following two styles set a left and right margin of 30px so that our comments section aligns with the rest of our design and removes some unnecessary padding that comes with Underscores. Add them at the end of the “Comments” section.

#comments {

margin: 0 30px;

}

.comment-list {

padding: 0;

}

Next, I would like to style the replies and by examining the source code, I see that they have a class of “children” applied to them. I would like to maintain the same margin of 30px between the first level comment and the replies that follow so I’ll add this style too:

#comments .children {

padding: 0;

margin: 20px 0 0 30px;

}

Save the styles, and if you examine the comments section and the list of comments, you should see a noticeable improvement in how our elements are aligned on the screen:

comments - proper margins

WordPress is also outputting Gravatars before the names of people posting the comments and it is good for us to be able to style them the way we want it. Let’s see how we can change their size to make the look of our comments section more unique.

gravatars

The Gravatar is generated by the wp_list_comments() function found inside comments.php and the function itself looks like this:

wp_list_comments

The way we define the Gravatar size inside the function is by adding another variable called “avatar_size” and specifying a size. Currently, the size is 32px by 32px, but if we want it to be a little bit larger, we can set a size of 45px by 45px this way:

wp_list_comments( array(

‘style’      => ‘ol’,

‘short_ping’ => true,

‘avatar_size’=> 45,

) );

Add the variable to the function or replace the entire function with this code and the avatars should be somewhat larger now. If you don’t want to display Gravatars, just set their sizes to 0.

The next thing I’m going to do is to style the titles of comments by applying the necessary font family, font size and color of text:

.comments-title {

font-weight: 900;

font-size: 26px;

font-size: 2.6rem;

font-family: "Times New Roman", Times, serif;

color: #3b6a26;

margin: 10px 0;

}

I would also want to remove the numbering of comments with the following styles:

.comments-area > ol {

padding: 0;

margin: 10px 0;

list-style-type: none;

}

ol.children { list-style-type: none; }

And I’m also floating the author’s avatar to the left so that the meta displays on the left side of it with a margin of 10px between them:

.comment-author .avatar {

width: 45px;

display: block;

float: left;

margin-right: 10px;

}

You can examine the result from these changes on the screenshot below:

comment meta and avatars

As you can still see from the last screenshot, there isn’t proper space between different comments. Let’s add it:

.comment{

margin-bottom: 20px;

}

 

comments margin

Next comes the reply button. I’m making it a little bit smaller and bolder, removing the underline style and setting its color to match the headings of our post:

.reply a {

font-weight: 600;

font-family: "Times New Roman", Times, serif;

font-size: 14px;

font-size: 1.4rem;

color: #3b6a26;

text-decoration: none;

}

reply

We should also make the comments responsive and remove the comment indentation when we are on a small screen so let us add a media query too:

@media screen and (max-width: 37.5em) {

#comments .children {

margin-left: 0;

}
}

Save this style and refresh the page. All the comment indentation should disappear below the width of 37.5em:

mobile styles

The last thing I would like to do is to style the submit button at the bottom of the comments section by adding the following styles:

#comments input.submit {

text-align: center;

color: white;

padding: 10px;

background: #7bc144;

text-decoration: none;

display: block;

width: 160px;

}

 

And now we have responsive comments that match the styles of our original design and we should already have a good idea of how to style the comment section of our Underscores-based themes.

Here is a list of all the other parts: part 1part 2part 3part 4part 5part 6part 7part 8part 9part 10part 11part 12part 13

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.