WordPress Custom Comment Display

Posted by Art | Posted in BLUETUX, Web Development | Posted on 09-03-2009-05-2008

9

WordPress and I have become very good friends lately being that it is very versatile and a great open source blogging tool. One of the things that I find needs to be changed quite a bit for clients is how the comments are displayed once the new blog/news/information section of their website has been set up. The basics of it can be found here on the WordPress website and I am really just repeating what they already have but its something that I use enough I want to help others find it easier.

The first step is to go into the theme folder for whatever theme it is that you would like to customize. This is usually located in ~/wp-content/themes/theme-to-edit/ . Once you have found this folder you will want to open up the comments.php file and find the section that uses the wp_list_comments() function. Once you have found this you may see that it is encapsulated by <ol> or maybe <ul> tags. If the new way you would like to display the comments doesnt use these, get rid of them. Then you want to add ‘type=comment&callback=mytheme_comment’ into the function call so it should look like:

<?php wp_list_comments('type=comment&amp;callback=mytheme_comment'); ?>

Just change “mytheme_comment” to whatever you want to call your new function. Now comes the fun part, open the functions.php file that is located in the same theme folder and open it. Once it is open you just add a new function to the list, its probably best to put it after the opening “if” statement in the file. The basic function that WordPress provides is this:

function mytheme_comment($comment, $args, $depth) {
 
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
 
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
 
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?>
</div>
 
<?php comment_text() ?>
 
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php
}

Now personally, I think this looks like garbage so I usually change it to use some

or some background colors that alternate but you can do almost anything with it. As you will probably guess this function runs in a loop displaying the information it finds to be true in the statement. If you want you can use a counter to find even or odd comments and change the display or anything. Luckily when using this wordpress function you have a lot of freedom and can change anything you want, unlike some of the others. Here is a quick example of a function that I made in about 5 minutes to give you an example of things to eliminate and condense.

function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?>>
<div class="comment-author">
 
<?php printf(__('%s says: '), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
 
<?php comment_text() ?>
 
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php
}

When I have some time I will put in an example of something with a counter for even and odd comments but otherwise go ahead and mess around, and good luck.

UPDATE!

Here is some basic code I just made up in about 5 minutes to show an example of some interval comments that could be used for some different backgrounds and such.

<code>
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?></h3>
 
<ol class="commentlist">
<?
foreach ($comments as $comment) {
$only_comments[] = $comment;
}
 
foreach ($only_comments as $comment) {
?>
<dt class="comment<?php if ($alt_comment == 'alt') echo ('-alt'); ?>id="comment-<?php comment_ID() ?>">
<?php
//Output the comment text
comment_text();
?>
 
<?php
//Change the class of the comment for the output.
if ($alt_comment == '-alt')
$alt_comment = '';
else
$alt_comment = '-alt';
 
$comment_number++;
} // end foreach 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; ?>
</code>
Read More