WordPress Theme: Part 7

We’re nearly there, you’ve nearly created a WordPress theme.

Now we’re going to work on comments.php, which will be heavily based on the default WordPress theme. If you’re not too picky on how comments look, you can actually copy the comments.php file from that theme and use that. This editing may get ugly and it is probably the worst thing to edit, so I don’t recommend you change much. I know for a fact that people dislike the way comments are in a list, so I’ve edited the original comments.php file to make it easier to work with.

While there is a lot of code in this file, you don’t need to edit too much of it, and as I mentioned, I really wouldn’t recommend it.

Copy and paste the following code into your document:

<?php // Do not delete these lines 
     if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
     die ('Please do not load this page directly. Thanks!');

     if ( post_password_required() ) { ?>
             <p>This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
		/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

Don’t touch what you’ve just pasted in. We’re going to start displaying the comments now. This is what you should place in your file next:

<?php if ( have_comments() ) : ?>
   <h2>
     <?php comments_number('No Comments', '1 Comment', '% Comments' );?>
     to "<?php the_title(); ?>"
   </h2>

As you can see, <?php if ( have_comments() ) : ?> tells us to display everything under it if there are comments on the post. We’ve put in a title showing the number of comments on this post. Again we’re seeing “<?php the_title(); ?>” to display the title of the post.

You’ll need to keep a close eye on the next part because it is all the beef of the comments. If you’re in doubt, avoid editing this.

<?php foreach ($comments as $comment) : ?>

   <div class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

What we have above sets up a div for the comment; it’s that simple. Nothing is inside the div yet so let’s put the gravatar of the commentator, and their name with a link to their website.

<?php echo get_avatar( $comment, $size = '55', $default = 'image URL' ); ?>

<p> 
 <a href="<?php comment_author_url(); ?>" class="author">
   <?php comment_author(); ?>
 </a>
</p> 

By now you should be used to the PHP functions, and can see which ones display the author’s name, and which their URL. The size of the gravatar can be adjusted, and you can put your own image URL for the default gravatar. The default gravatar appears if the commentator has no set gravatar.

Now let’s put a small piece of text with the date and time of the comment.

<a href="#comment-<?php comment_ID() ?>">link</a>
   <?php comment_date('jS F Y') ?> 
   at <?php comment_time() ?>
   <?php edit_comment_link('Edit Comment','',''); ?>

Remember that all this information is to be displayed for every comment. Finally we put a bit of extra code including the text “Your comment is awaiting moderation”, so that the commentator sees that if that happens to be the case.

We then end the function and the div for the comment, before using the function to display the text of the comment.

<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
   </div>

<?php comment_text(); ?>

<?php /* Changes every other comment to a different class */
	if ('alt' == $oddcomment) $oddcomment = '';
	else $oddcomment = 'alt';
?>

<?php endforeach; /* end for each comment */ ?>

Some people paginate their comments so it’s a good idea to include “previous” and “next” comment links after that:

<?php previous_comments_link() ?>
<?php next_comments_link() ?>

Feel free to style and put in a div or however you like. The next part is simple, it’s basically to display what comes up if there are no comments or if comments are closed.

<?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
	 <?php else : // comments are closed ?>
		<p>Comments are closed.</p>
	<?php endif; ?>

<?php endif; ?>

This next bit opens up a div to leave a comment, if comments are open, thus preparing us for the comment form. A title is displayed and will appear above the comment form.

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h2>
<?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?>
</h2>

<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>

This next bit tells WordPress to display a login link if the user needs to be logged in to post a comment. This can be the case if only subscribers or other users with a higher status are allowed to leave a comment. It also shows that you are logged in when you’re logged in, and provides you with a link to log out.

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

The next piece of code is part of the comment form. As per the PHP function earlier, if comments are open, this form will display. If not, the comment form will not appear. Feel free to edit the size values of these fields, but don’t change the tabindex.

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Email (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

The next part is optional for your theme, but is commonly used – just like the comments/pingbacks status we looked at earlier. This displays the HTML tags the user can use to format their comment.

<p><small>
<strong>XHTML:</strong>
You can use these tags:
<code><?php echo allowed_tags(); ?></code>
</small></p>

This is the textarea for the comment. You can change the cols value which depends on your layout. You only need to put to put a number (no “px” or “pt”), or you can use a percentage like I have done. Again, do not change the tabindex.

<p>
<textarea name="comment" id="comment" cols="50%" rows="10" tabindex="4">
</textarea>
</p>

This is what goes after the displayed comments and after the fields of the comment form – a “Submit” button and other code that need not be edited.

<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
   <?php comment_id_fields(); ?>
</p>
   <?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; ?>

Now that you’re done with comments.php, upload that to your theme folder too.