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:
Since we now have the option to post comments, let us post two of these with the second being a reply to the first:
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”.
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.
[code language=”css” 1=”true”]
#comments {
margin: 0 30px;
}
.comment-list {
padding: 0;
}
[/code]
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:
[code language=”css” 1=”true”]
#comments .children {
padding: 0;
margin: 20px 0 0 30px;
}
[/code]
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:
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.
The Gravatar is generated by the wp_list_comments() function found inside comments.php and the function itself looks like this:
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:
[code language=”php” 1=”true”]
wp_list_comments( array(
‘style’ => ‘ol’,
‘short_ping’ => true,
‘avatar_size’=> 45,
) );
[/code]
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:
[code language=”css” 1=”true”]
.comments-title {
font-weight: 900;
font-size: 26px;
font-size: 2.6rem;
font-family: "Times New Roman", Times, serif;
color: #3b6a26;
margin: 10px 0;
}
[/code]
I would also want to remove the numbering of comments with the following styles:
[code language=”css” 1=”true”]
.comments-area > ol {
padding: 0;
margin: 10px 0;
list-style-type: none;
}
ol.children { list-style-type: none; }
[/code]
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:
[code language=”css” 1=”true”]
.comment-author .avatar {
width: 45px;
display: block;
float: left;
margin-right: 10px;
}
[/code]
You can examine the result from these changes on the screenshot below:
As you can still see from the last screenshot, there isn’t proper space between different comments. Let’s add it:
[code language=”css” 1=”true”]
.comment{
margin-bottom: 20px;
}
[/code]
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:
[code language=”css” 1=”true”]
.reply a {
font-weight: 600;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-size: 1.4rem;
color: #3b6a26;
text-decoration: none;
}
[/code]
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:
[code language=”css” 1=”true”]
@media screen and (max-width: 37.5em) {
#comments .children {
margin-left: 0;
}
}
[/code]
Save this style and refresh the page. All the comment indentation should disappear below the width of 37.5em:
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:
[code language=”css” 1=”true”]
#comments input.submit {
text-align: center;
color: white;
padding: 10px;
background: #7bc144;
text-decoration: none;
display: block;
width: 160px;
}
[/code]
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 1, part 2, part 3, part 4, part 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13
