The design for comments might look very simple. And it is! But I think simple is effective in this case. Comments are such an important part of CSS-Tricks I want them to be very readable and comfortable.

Now we're going to jump into WordPress and make this comment thread a reality. The first thing we do is find a template in which we'll be displaying comments. single.php is probably the most important (individual blog posts). We find in that template that the function comments_template() is all we need to call to get the entire comments area. Essentially what that function does is go get the file comments.php and plop it in there. So, we start looking at that.

The code in that file starts with <section id="comments">. That's highly appropriate. The comments are certainly a section and it should have an identifier. Remember we don't do any styling based on ID's, but having your comments wrapped in an element with an ID of comments is good because:

  1. You can always hash-link down to comments by appending #comments to the URL.
  2. People who hate comments can hide them in their user stylesheet with a guessable ID.

We keep going through the code in this file. We delete some stuff that we're pretty sure we aren't going to use. We change some things to match what we've designed in Photoshop.

We then come across the function wp_list_comments() which is the function responsible for spitting out the entire comment thread. Then it goes on to spit out the stuff like the comment form. All the while, there is logic in place to show things in different situations, like when comments are closed or when comments are open but there aren't any.

We find a little weird function called cancel_comment_reply_link() which we look at and see that handles the functionality for moving the comment form back down to the bottom in the case that a Reply link has been clicked and the form has moved up, but we didn't want it to.

Then we dig into the HTML that we get from wp_list_comments(). Without doing anything, we'll get HTML from this function that is perfectly reasonable. But also, it is what it is and won't fit every possible design. Personally, I prefer having complete control over markup. So instead of just taking what it gives us, we take control over it by using a custom function in our functions.php file that overrides the default markup.

Now that we have HTML control, we can get into kinda "design mode" where we bounce back and forth between CSS and HTML getting our design done. Comments CSS, like any other small modular bit of CSS in this project, we'll relegate to a _comments.scss file that we can include in the global. Perfect case where separating out CSS into it's own file makes sense. Although, we should be using as many global styles as we can. For instance, each comment is certainly a .module, the header styles should be perfectly fine in here for names, and typography in general should just come from the global typography styles.

We even use our grid system within the comments since each comment is essentially a two column grid. Other little things are totally custom to comments, like where and how we position the reply links.

At the end of the screencast, we figure out that our Photoshop design has one fatal flaw. Nested comments live within a parent comment and it's pretty difficult to make our nested modules look as if they are separate. We might have to make some compromises here.

Comments

  1. JoeShmoe
    Permalink to comment#

    @Chris, including a file in functions.php might work, you just forgot to save the actual comment.php…

  2. aarango9
    Permalink to comment#

    How can we download the videos?

    • Chris Coyier
      Permalink to comment#

      The Bear level plan has downloadable videos. Please feel free to contact me at chriscoyier@gmail.com if you’d like to upgrade. I’m going to bury this since it doesn’t have anything to do with this particular video.

  3. Josh Eaton
    Permalink to comment#

    It looks like your

    <section id="comments">

    is missing from the video write-up. Needs pre/code tags?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.