Comment Design For WordPress 2.7
If you’re a WordPress theme developer, I’m sure you’ve run into the problem of styling, and altering comments in your theme. Now that comments are called through a loop to allow for the much anticipated threaded comments feature, we’ll have to make use of our function file to style the comments.
If you’re like most every other developer, the first thing you want to get rid of is the “says” that follows the authors name. Now we can do it, without having to set the CSS to display none.
01. In your theme directory, open up functions.php. If you don’t have this file, go ahead and create one.
02. Let’s create the function ‘mytheme_comment‘ and paste it into our functions.php file.
<?php 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 } ?>
Looking at this code, you can see exactly what you want to do to style your comments accordingly. After you’re happy with how you want it, the next step is to create the callback from our ‘wp_list_comments’ in the comments.php file.
03. Open up comments.php in your theme directory, and search for wp_list_comments. Control + F should make short work of that.
The default theme has this exact call:
<?php wp_list_comments(); ?>
So we’ll just use the function name that we created in step 2 (mytheme_comment), and call it as a variable:
<?php wp_list_comments('callback=mytheme_comment'); ?>
And now, we’ll see the styling reflected in our comments!
Separate Comments From Trackbacks
And for another good tip, you should separate your comments from your trackbacks. It’s just good manners.
In your comments.php file you can create two lists, and call the loop twice. Only for each loop, you can specify which type of comment/trackback is called. Example:
<h3 class="comment_title">Comments</h3>
<ol class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ol>
<h3 class="trackback_title">Trackbacks</h3>
<ol id="pings" class="trackback">
<?php wp_list_comments('type=pings'); ?>
</ol>
For some complete code, and even some jQuery for a toggle hide switch on the trackbacks, be sure to read the article by Curtis Henson.
That’s I currently use too
Thanks! This really helped me!
I was looking how to make a switch between comments and trackbacks for my latest theme, this helped me a lot!
Brilliant.
I have been searching for hours for a solution and i came across your fix. Thank you so much!
this was great – solved a couple issues i was having with the new wp 2.7 comment code
i do have one question though, my default gravatar image got switched to the blue gravatar logo (from the mystery man)
how do i switch that back?
thanks!
oooh! i got it, just removed:
,$default=''You’re fast. You can also use a custom image of your own, if you want to replace the ‘<path_to_url>’ with an absolute address to an image on your server.
Everything displays fine when I make the edit to functions.php.
However, here’s the error message I get when attempting to log in to WordPress:
Warning: Cannot modify header information – headers already sent by (output started at /home/user/public_html/wp-content/themes/mytheme/functions.php:25) in /home/user/public_html/wp-includes/pluggable.php on line 850
Any idea what’s causing this error? What’s in pluggable.php that creates a conflict with the mytheme_comment edit?
Thanks.
Found the answer to my question.
Leave no spaces between entries in functions.php!
Thanks for the callback, Chad. This let me move my avatar outside the .vcard div so I could float it, just like you did!
Doesnt work for me… dont know why but it dont will work…
and another thing, whats the “&phpMyAdmin=446c4b004362t3f340eda” In the comment funktion? Looks like it isnt on the right place here, after “<?php" xD Gives me an Error… just wanted to say ^^
Me again, sorry works fine in Orginal Version but in German Version it dont works… I’m really Happy that i only have Local the German Version ^^ Big Thx for that!
Hey C0de, I’m glad you pointed that out. It shouldn’t be there. It must have been inserted when I recently did an export and import of the database. I better check the whole database for that now. I’ve corrected the code by removing that. Danke!
Your my HERO!!!
Thank you!!!
thank you very much! i’m looking for this kind of tutorial. thanks for sharing
Great share!
Hope this works in WordPress 3.0!