How to Create a Custom Style for Admin Comments in WordPress
I noticed how on some WordPress blogs authors’ comments are styled differently from other people’s comments. I think this really makes it easier when users are scanning through your comments, looking for an actual moderator/author/admin’s response. Making your WordPress install style your author comments differently is quite a simple little coding modification where you only need to change a small piece of code in one file and add a style class to your CSS stylesheet.
This works only on WordPress 2.5.
Open up your themes comments.php file and look for line 27. Should look something like this…
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?php foreach ($comments as $comment) : ?> <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> <?php echo get_avatar( $comment, 32 ); ?> <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('edit',' ',''); ?></small> <?php comment_text() ?> </li> |
All you need to do is add is a little if statement to check if your author is an admin, and then a few more things. Copy the code below and paste it over the code above.
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <?php foreach ($comments as $comment) : ?> <?php if (1==$comment->user_id) { ?> <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> <div class="authorcomment"></div> <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('edit',' ',''); ?></small> <?php comment_text() ?> </li> <?php } else { ?> <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> <?php echo get_avatar( $comment, 32 ); ?> <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('edit',' ',''); ?></small> <?php comment_text() ?> </li> <?php } ?> |
Then just add the “authorcomment” class to your CSS stylesheet and style it however you choose. Mine looks something like this.
.authorcomment { background: url(images/bavota.png) no-repeat; float: left; width: 89px; height: 97px; } |
See below how my comments have the “B” logo on the left. You can add a background color or place the image differently or do whatever you choose to have a custom style for your author comments.
No prob. You can also make your comments stand out by completely customizing what information appears. Just change the code between lines 29 and 36 to make the information your want to be displayed show up. Let me know if you want something specific and I’ll see if I can help out.
Thank you, very helpful!
However, there’s a big error: Right now, on line 30, you close the authorcomment div class right away, so it’s not actually being applied to anything.
To fix that, merely shift the closing on line 30 down to line 35 above . That way, it gets applied to the author’s comment.
Thanks again!
This code doesn’t work, at what can be a problem ???
This tutorial is from 2008 and worked with WordPress 2.5. The latest version of WordPress works quite differently. I will have to update it when I have the chance.
So, until you update the post.. Can somebody help me make something similar in the latest WordPress?
In the latest version of WordPress (3.0.1) you can style author comments by using the class
.bypostauthor. It is added automatically by WP when the author of the post leaves a comment.This is a really good addition from a usability point of view on the site. It would also be great to be able to modify the rel tag if you are the author, that is remove the ‘external’ from the rel.
Additionally, automatically launch everyone else’s username links in the comments to open in a blank window.
With that, I think the comments section would be highly usable and more optimised…
I am newcommer to WordPress and CSS but I tried to create my own theme from scratch. I used the tag below from your tutorial to make my replies stand out but it did not work. I can’t trouble shoot since I replicated and pasted the comment form a tutorial. Your help would be greatly appreciated!