Adding the comment functionality

1. Now, the one thing that is left is comments—we want the comment functionality. This is actually really easy; all we have to do is go to our single.php file and see where we want the comment, which is right under the end </p> tag, as shown in the following code block:

         <?php endif; ?>

         <?php comments_template(); ?>
      </p>

1. We can save the code and reload. Here is the output:

1. We can now see the comment functionality. Let's add Great Post! and then click on Post Comment.

Here is what we get:

1. We can see that it has an avatar, the username, date, and also a reply link. Now you'll realize that this doesn't look like the best comments section you've ever seen, but that's just because it's the default design.

1. If we take a look at the markup, we can see that they separate everything so you can style:

Here, we have ol commentlist; each <li> has a class of comments, and we have classes around the author, around vcard, and around the reply. You can style this however you like.

Now you can actually replace this whole template by creating a comments.php file; we'll get into that later on. I don't want to do it in this chapter because this is just a very basic introductory theme.

Since the comments are working, we'll not go ahead and create a custom comment template or anything like that. I think that's pretty much it. Like I said, there's more we could do; we could create a separate template for archived posts.

Actually, what I want to do real quick is to make the author's name a link, so that you can click on it and see all of the author's posts.

1. Let's go to index.php and go to where we have the author, and enter following highlighted code:

      Created By
      <a href="<?php get_author_posts_url(
          get_the_author_meta('ID')); ?>">
         <?php the_author(); ?>
      </a>
      on <?php the_time('F j, Y g:i a'); ?>
      </p>
      <?php if(has_post_thumbnail()) : ?>

As shown here, we'll just add a link around that.

1. Let's reload, and now admin is a link; I need to change its style because we can't see it. Open style.css. Go to meta and add the following code:

      .meta{
          background:#333;
          color:#fff;
          padding:5px;
      }

      .meta a{
          color:#fff;
      }

1. We can see the author in white now:

1. If I click on admin now, it shows us all the posts by admin, but if there were multiple users—multiple authors—this would allow us to see all the posts from that particular author.
2. We'll wrap this up here. You may realize that this isn't the greatest design you've ever seen, but the point of this project was to get you familiar with not just the code but also the structure of the theme and what files are included. As we saw, there are certain names that we need for the files such as page and single.php.