The Underscores (_s) theme with Sass and Gulp Part 8: all about comments

Untitled Document

==================================================================

On this page:

  1. Get to know the comments template.
  2. Configure comments output including Gravatars.
  3. Apply CSS to comments.
  4. Highlight post author comments.
  5. Change the display of the comment form using CSS.
  6. Configure the comment section title and navigation.

==================================================================

42. Get to know the comments template.

Github repo branch: part7_42

Now that we've configured the single post template to display the post the way we want, it's time to turn our attention to the comments section. In this Part 8, we'll work with both how to display the comments themselves, and how to display the comments form. To get things started, we need a post with a lot of comments, and lucky for us the theme unit test data comes complete with a post called template: comments that has 19 comments threaded 10 levels deep.

As you scroll down this post through the comments, you'll see the comment currently looks exactly the same as a post. So inside this post I have a very hard time telling that I'm in a comment. We'll deal with that a little later on

So how do the comments get displayed in the post? Well, if we go to content single and scroll all the way to the bottom, you'll remember, we copied in the section from single.php that says if comments are open, then run the comments template. Now this comments template is a file in the theme. Down here in the theme, you'll find file called comments.php, it's a required file in WordPress, and when you open it, this is the actual comments template.

43.1 comment navigation.

The default setting for WordPress is 15 comments, so that means if there's 15 comments on a single page, then they'll be split up into multiple pages, and you have to navigate between them. Comments navigation appears both on the top of the comments section, and on the bottom of the comments section. And the markup for this comments navigation is very, very similar to the markup for the post's navigation. That's why, when we marked up the style sheet for the post's navigation, I also included references to comment navigation.

43.2 The comments loop.

Below the navigation, we get to the comments themselves. They're marked up in an ordered list, with a class comment list. And this here is the actual loop that outputs all the comments. A simple function, wp_list_comments, that currently displays the comments as on ordered list, and sends short pings for each of the comments. That's it, this is the function that creates all those comments that you see displayed

<?php the_comments_navigation(); ?>
 <ol class="comment-list">
  <?php
  wp_list_comments( array(
  'style'      => 'ol',
  'short_ping' => true,
  
  ) );
  ?>
  </ol><!-- .comment-list -->
<?php the_comments_navigation();
code 8.42.2 The navigation and the comment loop in comments.php

43.3 Comments opened or closed?

At the very bottom, we have a conditional statement that tests whether or not we can currently leave comments. So all of these conditions here test whether or not the comments are currently open. If they are not open, the following text appears, comments are closed. If, on the other hand, they are open, we display the comment form instead. And again, the comment form is auto-generated from WordPress core, you can pass values to it to change it, but for the most part, we can just use that the way it is.


// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() ) : ?>
<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'pre_underscores' ); ?></p>
<?php
endif;
code 8.42.3 Conditional statement checking if comments are open or closed.

==================================================================

43. Configure comments output including Gravatars

Github repo branch: part7_43

If you ever want to change the output of the comments themselves in your theme, you do that by passing parameters to wp_list_comments. To see all the available parameters, go to the wordpress.org code reference for the function, wp_list_comments, and here you'll get a full list. As you can see, there are a lot of parameters to choose from, and you can send pretty much any information you want to the comments section and augment the output in quite advanced ways.

And in particular if you want to change the entire output of the comments, you can pass information to the walker class. Now the walker class is the function that actually actively walks through each of the comments and outputs them. And that's where you would intercept any output and change it into something you want. But, for the most part, these settings are very advanced and only for a very specific circumstances. Maybe with the exception of one. You notice that each of the comments currently has an avatar displaying next to it, and out of the box, in underscores, that avatar is really small. Chances are, you may want to change the size of this avatar to something bigger, and right now, if you do, you just get a nice and crusty up sized image.

You can change that using the avatar sized parameter in wp_list_comments, so let me show you how that's done. You can change that using the avatar sized parameter in wp_list_comments, so let me show you how that's done. Inside comments.php I'll scroll down until I find wp_list_comment, right now there are two parameters set. Style is output as an ordered list and short ping. I'm going to add an additional line here, and then I'll put in avatar_size and set it to 96.

By doing this, I'm telling WordPress I want the avatar image to be 96 by 96 pixels tall and wide. Open the page again and scroll down to the comments, and you'll see now the image is much bigger. In fact, it's actually about twice as big as what I will eventually display it as, and that's done on purpose. If I have an image that is twice as big, and I then reduce it's size, I end up getting an image that will display nicely on 2x screens, so screens with higher resolution. This is a little trick that in this case applies really well if you want to display content for high resolution screens.

 <ol class="comment-list">
  <?php
  wp_list_comments( array(
  'style'      => 'ol',
  'short_ping' => true,
  'avatar_size' =>'96',
  ) );
  ?>
  </ol><!-- .comment-list -->
  

==================================================================

44. Apply CSS to comments.

Github repo branch: part7_44

In this movie I want to break down the HTML of a single comment for you to show you how it all fits together, and show you how I use CSS to completely change the appearance of the comment. I created the sass/site/primary/_comments.scss for this purpose. These styles are mobile first, so I start out with baseline styles and then we have a series of media queries that increase the width and change the layout of the comments when there is available space.

 .comments-area {
   width: 100%;
   margin: 3em 0;
   padding: 1.5em 0;
   border-top: 1px solid hsl(0, 0%, 80%);
   }
 .comments-title {
   margin-bottom: 2em;
   font-size: 2.5em;
   font-weight: 900;
   }
 .comment-list {
   padding: 0;
   margin: 0;
   list-style-type: none;
  
   ol {
   list-style-type: none;
   }
   }
 .comment-body {
   border-bottom: 1px solid #c3c3c3;
   margin-bottom: 3em;
   }
 .comment-meta {
   position: relative;
   margin-left: 70px;
   font-family: $font__sans;
   font-size: 80%;
   }
 .comment-meta,
   .comment-form {
   a {
   text-decoration: none;
   border: none;
  
  &:hover,
  &:focus {
   text-decoration: underline;
   } 
   }
   }
 .comment {
  .avatar {
   position: absolute;
   top: -5px;
   left: -70px;
   width: 50px;
   height: 50px;
   border-radius: 50px;
   }
 } 
 .children {
   margin-left: 1em;
   padding-left: 0;
  
   @media screen and (min-width: $query__medium) {
   margin-left: 2em;
   }
   }
 .no-sidebar {
  .children {
  @media screen and (min-width: $query__medium) {
  margin-left: 2em;
  .comment-meta {
   margin-left: 80px;
   font-size: 90%;
   }
  .comment .avatar {
   top: -7px;
   left: -80px;
   width: 60px;
   height: 60px;
   }
  .comment-content {
   margin-left: 80px;
   }
  }
   }
 
  @media screen and (min-width: $size__max-width) {
  .children {
   margin-left: 3em;
   }
  .comment-meta {
   margin-left: 90px;
   }
  .comment .avatar {
   top: -8px;
   left: -90px;
   width: 70px;
   height: 70px;
   }
  .comment-content {
   margin-left: 90px;
   }
   }
   }
  
 .comment-metadata {
   margin-top: .2em;
   padding-bottom: .5em;
   font-size: .8em;
   line-height: 1em;
  
   a {
   color: #7D7D7D;
  &:hover,
  &:focus {
   border-color: #c3c3c3;
   }
   }
   }
 .comment-author {
   font-size: 1.4em;
   line-height: 1.3em;
   }
 .says {
   font-size: 80%;
   }
 .reply {
   margin-bottom: 1.5em;
   text-align: right;
  
   a {
   display: inline-block;
   padding: .5em 1.4em;
   font-family: $font__sans;
   font-size: 85%;
   color: #000;
   line-height: 1.3em;
   text-decoration: none;
   border: 1px solid #c3c3c3;
  
  &:hover,
  &:focus {
   color: #fff;
   background: $color__interactive;
   border-color: $color__interactive;
   }
   }
   }
 
 .comment-content {
  ol {
   list-style-type: decimal;
   }
  
   a {
   word-wrap: break-word;
   }
  
   } 
   
code 8.43.1 The sass/site/primary/_comments.scss file.

When I work with comments, I find it best to start with a post that only has one comment like "Hello world", then style the comment to make it look and feel exactly as I want, and then I move on to post with several comments to make sure nesting works and relationships are displayed properly.

==================================================================

45. Highlight post author comments

Github repo branch: part7_45

This comment section has some hidden features that you wouldn't know about unless someone showed you how to use them. And one of those features is if a post author comments on their own post, that post author can have their comments highlighted. I'm going to show you how that works. So, right now, in the Hello world! post, I am the author. See it here, Morten, and I'm currently logged in as Morten. That means that if I leave a comment here, and click post comment, this comment has some special markup. If I go inspect the comment, you'll that see up here in the list item for the comment, there's a special class applied. So, right now, in the Hello world! post, 'maarten' is the author, and I'm currently logged in as 'Maarten'. That means that if I leave a comment here, and click post comment, this comment has some special markup.

If I go inspect the comment, you'll that see up here in the list item for the comment, there's a special class applied: 'bypostauthor'. And this by post author class can be used to augment any element within the comment to clearly highlight that this comment is different from the other ones. Now exactly how you would choose to highlight a comment left by a post author is hotly contested, because some people will add actual text to the comment saying, "By post author." Others will change the color completely. I like to be more subtle, so the only thing I want to do is add a little gray ring around the author icon to clearly indicate there's something different about this particular comment.

To do so, I'll go into sass/site/primary/_comments.scss. Here, I'll set up a new rule:

 .bypostauthor .avatar {
box-sizing: content-box;
border: 5px solid $color__interactive;
margin-top: -5px;
margin-left: -5px;
}

Save that and go back to the browser and you'll see the avatar now has a red ring around it, indicating there is something different about this comment. And I believe that this red ring is enough to tell people that this is probably a special comment: "Look who wrote it, aha, that's the author." But of course, you can disagree and change the styling of this comment to absolutely anything you want to highlight that this is an author comment.

==================================================================

46. Change the display of the comment form using CSS

Github repo branch: part7_46

If comments are open in a post or page, we can either click the reply button, or scroll down to the bottom of the comments section to get to the comments form. Now the comments form borrows it's styling from the rest of the comments, so for the most part, it will already be styled when we start working. However, it's still a good idea to apply your own styling to make sure everything looks exactly right and fits with the overall look and feel of the theme. For example, one important thing is to make sure the post comment button has the same styling as the other buttons on the site, so you can see hovering over this reply button here, it's red, hovering over the post comment button, we have the same behavior.

I've added a short comment form section to the end of sass/site/primary/_comments.scss:

/* Comment Form */

.comment-reply-title {
  margin-bottom: 1em;
  }
.comment-list .comment-reply-title {
  text-align: left;
  }
.comment-form {
  font-family: $font__sans;
  line-height: 1.3em;
  
  a {
  font-weight: 500;
  }
  
  .form-submit {
  text-align: right;
  }
  
  .form-submit input {
  padding: .5em 1.4em;
  font-size: 85%;
  color: #000;
  line-height: 1.3em;
  text-decoration: none;
  border: 1px solid #c3c3c3;
  
  &:hover,
  &:focus {
  color: #fff;
  background: $color__interactive;
  border-color: $color__interactive;
  
  }
  }
  
  label {
  width: 33%;
  display: block;
  font-style: italic;
  padding-bottom: .4em;
  }
  
  .required {
  color: #D54E21;
  }
  }
  
Code 8.46 The code added to sass/site/primary/_comments.scss file.

there's just a little bit of styling to make the comment form look the same as the rest of the site, majority of it has to do with the comment form submit button and labels.

When you work with comment forms, it's important to remember there are actually two forms available. There's the one you when you are in, it says at the top, logged in as ..., and it allows me to log out, and then it just has a huge comment field, where I can type in my comment.

And then if I open the same post, in an incognito window so I'm not logged in, we get a different comment form. Here when I scroll down, it says, your e-mail address will not be published, required fields are marked with an asterisk, then we have the same comment field, and below that, we have name, e-mail, website, and then post comment. This is the forward facing form the majority of people who comment in your theme will be using. So it's important that you get this form right. It's actually more important than the other form, because if you style this one right, the other form will automatically be correct too. So let's look at the markup for this form, the form you get when you're not logged in.

==================================================================

47. Configure the comment section title and navigation

Github repo branch: part8_47

As we wrap up this chapter on comments, let me draw your attention to two more components that you may want to customize for your own themes. In the post, Template: Comments, that has the 19 comments, when we scroll down to the comments section, you see "19 thoughts on "Template: Comments". Personally, I don't like this, because it's way too casual

Inside comments.php, at the very top here, we have an h2 with a class, comments-title, and this is the actual comments title text. So there:

<h2 class="comments-title">
<?php
$comment_count = get_comments_number();
if ( 1 === $comment_count ) {
printf(
/* translators: 1: title. */
esc_html_e( 'One thought on &ldquo;%1$s&rdquo;', 'pre_underscores' ),
'<span>' . get_the_title() . '</span>'
);
} else {
printf( // WPCS: XSS OK.
/* translators: 1: comment count number, 2: title. */
esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'pre_underscores' ) ),
number_format_i18n( $comment_count ),
'<span>' . get_the_title() . '</span>'
);
}
?>
</h2><!-- .comments-title -->

will be:

<h2 class="comments-title">
<?php
$comment_count = get_comments_number();
if ( 1 === $comment_count ) {
printf(
/* translators: 1: title. */
esc_html_e( 'One Comment', 'pre_underscores' ),
'<span>' . get_the_title() . '</span>'
);
} else {
printf( // WPCS: XSS OK.
/* translators: 1: comment count number, 2: title. */
esc_html( _nx( '%1$s comments', '%1$s comments', $comment_count, 'comments title', 'pre_underscores' ) ),
number_format_i18n( $comment_count ),
'<span>' . get_the_title() . '</span>'
);
}
?>
</h2><!-- .comments-title -->

That's it. Save comments.php, go back to the site, and now it says 19 comments. Personally, I like this way more than 19 thoughts on the post title

The second component is comments navigation. But, to see comments navigation, we have to first change a setting inside WordPress Core, because, by default, WordPress will only display comments navigation if you have 50 or more comments, and we don't have any posts with 50 or more comments right now. So, I'll go to the back end of my site, open it in a separate tab, then go to settings and discussion. Here, under Other comment settings, we have an option, Break comments into pages with, and then a number, top level comments per page. So, I'll activate this, and then change the number from 50, to two. That should give us a lot of navigation to work with. Save changes, and go back to my template, and reload the page, and here, we have comments navigation.

Now, previously in the course, I styled the posts navigation, and you may remember, when we did that, I added some additional classes to the post navigation. You can see the following code if you go into sass/navigation/_content-navigation.scss:

.comment-navigation,
.posts-navigation,
.post-navigation,
.paging-navigation {
padding: 2em 0;
font-family: $font__sans;
text-align: left;
overflow: hidden;

a {
display: block;
width: 100%;
text-decoration: none;
padding: 1em;
border: 1px solid hsl(0, 0%, 80%);
color: black;

&:hover,
&:focus {
color: white;
border-color: $color__interactive;
background: $color__interactive;
}
}

}

Up here at the top, I called in .comment-navigation, .posts-navigation, .post-navigation, and .paging-navigation. So, I'm applying the same styling to all navigation that has to do with going to the previous or next item, regardless of where we are in the site. As a result, the comments navigation is now borrowing the same styling, so when I hover over older comments, it looks red, just like the comments up here. Now, of course, I could take this further by applying custom styles to just comments navigation, but, for my purposes, this works just fine.

Here's the thing, though. As you can see, there is comments navigation at the top of the comments. If I click on Older Comments, I now have both Older Comments and Newer Comments, and if I scroll to the bottom of my comments section, I, again, have comments navigation. I'm not quite sure why it's like this. I guess the developers of Underscore felt like having navigation in two places made sense. I don't personally think that, so I want to take one of these out, and I want to remove the one at the top here, cause I don't think that navigation should be at the very top.

So, I'll go into comments.php again, and delete the first

<?php the_comments_navigation(); ?>

Save the file, jump back into comments. Now we don't have any navigation at the top. Scrolling down you'll see 'Older Comments, Newer Comments'. And, because I'm borrowing the styling from the post navigation, this is already responsive, so if I inspect this element and reduce the width of the screen, the post navigation breaks into a single, vertical list, and the comments navigation does the same. So, when you style your comments, make sure you style the comments navigation, as well, and the easiest way to do that is to simply borrow the stylings from some other navigation element on the page, for example, paging navigation.

Leave a comment