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:
- You can always hash-link down to comments by appending #comments to the URL.
- 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.