Comments play a vital role on WordPress sites, allowing visitors to leave comments and engage in conversations about the content. In WordPress, the comments are controlled in part by the theme through the comments.php file, and in part by WordPress core. In this video tutorial you learn how the comments.php template works and how you can interact with it.
- [Instructor] 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 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 of those threaded comments. We start out with a title for the whole comments section, currently says 19 thoughts on, and then the post title.
Then we have the comment itself, and here we start with the metadata about the comment. This is the avatar for the commenter, name of the commenter, linking to their website, then the date and time the comment was posted, an edit link because I'm logged in as an admin, and then the full comment. Now in this template, the first full comment is actually the HTML and formatting tag content from the other post we've been working with previously. And as you scroll down here, 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. Scrolling past that first comment, we get to something that looks more like a regular comment section. Here we have a series of comments, and some of them are threaded, so you can see there are many levels of threading here. And at the bottom, we have the comments form, where you can leave a reply. 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. So this works kind of like content single, except for comments. We call the file in when it's necessary, and it displays all the content dynamically when it's requested. Inside comments.php, we start off at the very top to make sure the post is not password protected. If it is password protected, we simply return, meaning we stop everything at this point.
If it's not password protected, we'll go on to build a new div, with the class comments area. And inside this div will contain both the comments and the comments form. First, a conditional statement tests to see if there are comments at all. If there are, a title is displayed with a class comments title. And inside this title will either display one thought on, and then the title, or a number of thoughts on the title. The markup here for this title section is a little bit convoluted.
That's because this is translatable into other languages, and some languages will mark up the actual number differently, that's why you have thus number format i18n component. So just know that this outputs the title we see here at the top of the comments section. The next section is comments navigation. If there are so many comments that the comments are split into several pages, we have to add navigation so we can navigate between the different comments. The default setting for WordPress is 50 comments, so that means if there's 50 comments on a single page, then they'll be split up into multiple pages, and you have to navigate between them.
In that case, 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. So this content here, the comment navigation, already has styling that is borrowed from the post's navigation. 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. The actual formatting of each of these comments is controlled by WordPress core and you can pass values you to it if you want to and augment what is output, but what see right now on the front end is the default output for wp_list_comments.
After the comment list, we get another set of navigation. Like I said, we have navigation both before and after the comments. And then we wrap everything up by ending the if statement at the top. 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.
Now that you have a rough idea of how the comments are added to the post, we'll spend the rest of this chapter looking at how we can customize this output, and style the comments to look and feel like the rest of the theme.
- Setting up a WordPress development environment
- Getting and installing _s
- Automating theme development with Gulp
- The WordPress template hierarchy
- Setting up the basic theme
- Registering and displaying menus
- Applying styles to menus
- Creating conditional layouts
- Working with the comments template
- Working with featured images
- Working with widget areas, or sidebars
- Working with index templates
- Working with static pages
- Adding features to the Customizer