Web Savvy Mama » WordPress Themes: Adding Comments

WordPress Themes: Adding Comments

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme

We are almost done! Next you need to include the files to handle your comment form so visitors can reply to your posts. No need to do editing here unless you really want to.

Open comments.php and copy and paste the following and then save the file.

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

if (!empty($post->post_password)) { // if there’s a password
if ($_COOKIE[’wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?>

<p class="nocomments">This post is password protected. Enter the password to view comments.<p>

<?php
return;
}
}

/* This variable is for alternating comment background */
$oddcomment = ‘alt’;
?>

<!– You can start editing here. –>
<div id="comments">
<?php if ($comments) : ?>
<p><b><?php comments_number(’No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</b></p>

<ol class="commentlist">

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

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />

<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date(’F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(’e',”,”); ?></small>

<?php comment_text() ?>

</li>

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

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

</ol>

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

<?php if (’open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>
<!– If comments are closed. –>
<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

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

<h3 id="respond">Leave a Reply</h3>

<?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 the_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 ) : ?>

<br>Logged in as <a href="<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a>

<?php else : ?>

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

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

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

<?php endif; ?>

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

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

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

</form>
</div>

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

<?php endif; // if you delete this the sky will fall on your head ?>

Open comments-popup.php and copy and paste the following code then save the file:

<?php
/* Don’t remove these lines. */
add_filter(’comment_text’, ‘popuplinks’);
foreach ($posts as $post) { start_wp();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo get_settings(’blogname’); ?> - Comments on <?php the_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo(’html_type’); ?>; charset=<?php echo get_settings(’blog_charset’); ?>" />
<style type="text/css" media="screen">
@import url( <?php bloginfo(’stylesheet_url’); ?> );
body { margin: 3px; }
</style>

</head>
<body id="commentspopup">

<h1 id="header"><a href="" title="<?php echo get_settings(’blogname’); ?>"><?php echo get_settings(’blogname’); ?></a></h1>

<h2 id="comments">Comments</h2>

<p><a href="<?php echo get_settings(’siteurl’); ?>/wp-commentsrss2.php?p=<?php echo $post->ID; ?>"><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a></p>

<?php if (’open’ == $post->ping_status) { ?>
<p>The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is: <em><?php trackback_url() ?></em></p>
<?php } ?>

<?php
// this line is WordPress’ motor, do not delete it.
$commenter = wp_get_current_commenter();
extract($commenter);
$comments = get_approved_comments($id);
$post = get_post($id);
if (!empty($post->post_password) && $_COOKIE[’wp-postpass_’. COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
echo(get_the_password_form());
} else { ?>

<?php if ($comments) { ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(’Comment’, ‘Trackback’, ‘Pingback’); ?> by <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite></p>
</li>

<?php } // end for each comment ?>
</ol>
<?php } else { // this is displayed if there are no comments so far ?>
<p>No comments yet.</p>
<?php } ?>

<?php if (’open’ == $post->comment_status) { ?>
<h2>Leave a comment</h2>
<p>Line and paragraph breaks automatic, e-mail address never displayed, <acronym title="Hypertext Markup Language">HTML</acronym> allowed: <code><?php echo allowed_tags(); ?></code></p>

<form action="<?php echo get_settings(’siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
<label for="author">Name</label>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<input type="hidden" name="redirect_to" value="<?php echo wp_specialchars($_SERVER["REQUEST_URI"]); ?>" />
</p>

<p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" />
<label for="email">E-mail</label>
</p>

<p>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" />
<label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label>
</p>

<p>
<label for="comment">Your Comment</label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea>
</p>

<p>
<input name="submit" type="submit" tabindex="5" value="Say It!" />
</p>
<?php do_action(’comment_form’, $post->ID); ?>
</form>
<?php } else { // comments are closed ?>
<p>Sorry, the comment form is closed at this time.</p>
<?php }
} // end password check
?>

<div><strong><a href="javascript:window.close()">Close this window.</a></strong></div>

<?php // if you delete this the sky will fall on your head
}
?>

<!– // this is just the end of the motor - don’t touch that line either –>
<?php //} ?>
<p class="credit"><?php timer_stop(1); ?> <cite>Powered by <a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>Wordpress</strong></a></cite></p>
<?php // Seen at http://www.mijnkopthee.nl/log2/archive/2003/05/28/esc(18) ?>
<script type="text/javascript">
<!–
document.onkeypress = function esc(e) {
if(typeof(e) == "undefined") { e=event; }
if (e.keyCode == 27) { self.close(); }
}
// –>
</script>
</body>
</html>

Add this to your style.css:

/* Begin comments*/
#commentform input {
width: 100px;
padding: 2px;
margin: 5px 5px 1px ;
}

#commentform textarea {
width: 500px;
padding: 2px;
}

#commentform #submit {
margin: 0;
float: left;
}

.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: left;
}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 5px 10px 0;
width: 500px;

}

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: left;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */

Almost done! Continue onto: WordPress Themes: Finishing Your Custom Theme.

9 Responses to “WordPress Themes: Adding Comments”

Web Savvy Mama » WordPress Themes: Starting Your Custom Theme Says:
February 3rd, 2007 at 7:06 pm
[…] navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your CustomTheme […]
Alissa Says:
February 9th, 2007 at 6:00 pm
The last section says: “Add this to your style.php:” and I believe you mean style.css
Kristine Says:
February 9th, 2007 at 7:14 pm
Yup, you are correct. That’s what I get for posting when I’m tired, lol. Thank you for pointing that out.
chrisareas Says:
February 13th, 2007 at 3:23 pm
Hi. Really love your tutorial, but was having an issue with the comments. Any time I try and leave a comment, I am returned to the post and there is no comment. You can see for yourself at http://brainbulbrecords.com/news. Hope I have not done something really silly. As you can see, for the most part I got everything else to look nice.
Kristine Says:
February 13th, 2007 at 4:04 pm
Do you have the moderation for comments turned on? Comments will not show unless you approve them in the manage area of your admin if you have moderation of comments turned on.
Blog layout is looking great!
chrisareas Says:
February 13th, 2007 at 4:21 pm
Yes, I have that feature turned on. In fact, if I change the theme, I can leave comments without changing anything else. Very mysterious if you ask me.
Web Savvy Mama Says:
February 27th, 2007 at 8:06 pm
[…] Tutorial navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your Custom Theme […]
Michelle Waters Says:
April 7th, 2007 at 2:32 am
Kristine,

I’d love to add this mod to my weblog: http://www.tamba2.org.uk/wordpress/commentstyling/

I’ve tried it, but the style isn’t showing up. Maybe I should be asleep — but I’ve looked all over the code and can’t see what is preventing this from working. (I also checked in IE and Firefox to make sure it wasn’t just a browser issue.)

So, you’re the PHP guru: Would you mind testing that code to see if it really works?

Thank you!
Michelle Waters Says:
April 7th, 2007 at 2:55 am
Weird.

This one isn’t working either:

http://aonach.com/chatter/highlight-author-comments-in-wordpress/

The class=”" ends up being blank.

You must be logged in to post a comment.