Join Morten Rand-Hendriksen for an in-depth discussion in this video Working with the comments template, part of WordPress: Building Themes from Scratch Using Underscores.
- Comments have played a pivotal role in making the web what it is today. For better or for worse, when blogging platforms like WordPress started allowing readers to communicate with publishers and with other readers, the way we used the Web changed forever. Now that we've configured the single post template to display our posts the way we want, it's time to turn our attention to the comments section. In this chapter, 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.
Scrolling down, you'll see here underneath our main content we have all those comments. And here you see every single comment displays the avatar for the comment author followed by the comment author name, the word "says," then the publishing date of the comment, and then the full comment. You also notice that the comment is currently using the same styling as the main post. So this first comment that has the same HTML tags as the HTML tag post is displaying exactly the same. So when I'm scrolling down here, you'll notice that at this point, I can't really tell if I'm in a comment or on the post itself.
This is something we'll address later on. Scrolling past the first comment, you see after this we get a more normal comments section. Here you see several different comments. Some of them are responses to each other, so they are threaded in, and everything looks exactly as we would expect it, except it's not styled properly, and it looks pretty messy. So how does all this work? Well, if we go to single.php, you may remember that after get_template_part ('template-parts/content', 'single') we have a conditional statement that tests whether or not comments are open, and that we actually have comments, and then displays the comments template.
Now this function, comments_template(), goes to our theme and looks for a file called comments.php. And comments.php is to comments what single.php is to single posts. This is the framework that displays the comments and also sets up some parameters. So off the top in this chapter, let's take a quick tour of this file. At the very top, we check whether or not the post has a password on it. If it does, no comments are displayed and we just stop. Then, if the post does not have a password, we set up a div with a class comments-area.
And this div will contain everything that has to do with the comments. Within this div, we test to see whether or not we have comments, and if we do, we display an h2 with a class comments-title that either outputs "One thought on " the post title, or "%1$s thoughts on" the post title. This particular function may look a little bit messy. That's because it's using internationalization to display the comments number, because some different languages use different types of numbers. Next, we have the first of two comments navigation sections.
It tests whether or not we have more comments than there are room for on the page. And if we do, it sets up a nav with a class comment-navigation. And within this nav we have a div with a class nav-links and within that div we have two divs. One class nav-previous, and one class nav-next. Now if you think this looks familiar, it's because it's exactly the same as the post navigation. And that also means if we're clever about our CSS, we'll be able to take the styling from the previous movie and apply it to the comments navigation as well.
But that's jumping way ahead, so let's just ignore that for now. Below this navigation comes the main component. ol class="comment-list". And this is where the actual comment list is displayed. It's displayed inside an ordered list, and here we have a loop that runs through each of the comments in turn, and displays each of the comments in an ordered list. If you want to you can change this to an unordered list, but I would not recommend it. So this is the actual function that grabs all the comments and outputs each of the comments in turn.
You'll notice that, just like with single.php, the actual output of each comment is not controlled from in here. That is generated directly from WordPress core. Below the comment list we have another set of the exact same comment navigation because for whatever reason, Underscores wants us to have comment navigation both on top of the comments, and on the bottom, which I think is pretty superfluous, but that's me. And then finally, we wrap up by first testing if comments are open. If they are not, we say "comments are closed," and then we display the comment form which again is generated directly from WordPress core.
Now you know the structure of this file, let's make a change right out of the gate. I personally think the comments title that comes from Underscores makes no sense. For it says "19 thoughts on" and then the post title. So I want to change this right off the bat. Looking at the comment structure, I know that I need to change this h2 comments-title. And when I look at the code, I can see the actual output here. "One thought on" and then it displays a quotation mark and then the post title. So I'll simply take this, and just type in "One Comment" then I'll take the next variable which displays the "%1$s comments" followed by "thoughts on" and then the post title, and I'll just take that away, and say "%1$s Comments." At this point, I've taken out the second variable, so we don't actually need this thing at the bottom here any more so I'll just take out the span that get the title, because we don't need the title, save comments.php, reload the page, and now it just says "19 Comments." I'm doing this very specifically to show you that now you know where the comments are generated, under comments.php, you are free to edit this content in any way you want.
So far I've only edited the comments title, but as we move further, we'll work with more of the content within this template.
- Installing WordPress, Underscores, plugins, and NetBeans
- Creating a modular, mobile-first WordPress theme
- Setting up the basic theme
- Building a custom header
- Designing responsive, accessible menus
- Configuring the Single Post Template plugin
- Generating featured images
- Styling the comments area, search results, and widget areas
- Working with static pages
- Adding features to the Customizer
- Customizing the backend