Motivated by email requests from a few readers, I’ve thrown together this simple tutorial on how-to style author comments under WordPress without the need for extraneous plugins. What we’re going to do is instruct WordPress to identify specific author emails and assign a unique class name to each. Using the flexibility of Cascading Style Sheets (CSS), we can then differentiate between specific user comments using different background colors, background-images, or fonts. This method has been tested with WordPress versions 1.5-current.
Identifiying author comments
In order to style your own, and possibly other reader(s) comments, we’ll need to modify the WordPress comment loop:
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
The code above is taken from the default comment loop. In order to differentiate and assign a unique class to your own author comments, you would modify the above code like so:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
In its simplest form, you’re telling WordPress to check a comment. If the author email matches author@domain.com, echo .author. If the comment email does not match author@domain.com, do what you normally do and display the comment using standard styling. Now that WordPress understands that it is supposed to assign .author to your own author comments, you can style li.author accordingly to quickly differentiate yourself in discussions.
Identifying author(s) & guest comments
Ocassionally, blogs feature multiple authors or highlight specific readers. In order to style these comments differently than your own [author] comments, we can modify the code above a little more:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else if ($comment->comment_author_email == "guest1@domain.com") echo 'guest1'; else if ($comment->comment_author_email == "guest2@domain.com") echo 'guest2'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
Similar to identifying author comments, in its simplest form, we’re instructing WordPress to assign .author to any comments which match author@domain.com, .guest1 to any comments matching guest1@domain.com, and .guest2 to any comments matching guest2@domain.com. If none of those emails match, then continue doing the usual.
Feel free change the assigned class names to more descriptive alternatives. Personally, I find using author or guest names easiest in the long run when pruning comments.php and style.css.
Styling author(s) & guest comments
Now that we have unique class assignments, we can style comments accordingly in order to differentiate between the masses and general readers. Assuming you wanted to add a small 16×16 pixel avatar to author comments, we would use CSS to add a background image to the authors name. The HTML / PHP might look something like this:
<span class="author_meta"><?php comment_author_link() ?></span>
The general corresponding CSS might look something like:
li.author span.author_meta a {
background: url(path/to/image.gif) no-repeat left center;
padding-left: 20px;
}
The possibilities & styling flexibility are only as limited or exhaustive as your personal CSS knowledge limitations. Feel free to drop your questions or comments below. On a public downloads note, keep an eye out for the downloads section availability which will include some related downloads.
[...] Links: via 5thirtyone.com [...]
[...] you can modify the WordPress comment loop yourself to assign unique classes. Derek Punsalan offers a particularly thorough tutorial that shows you how to add classes based on the author’s email address. Or give your [...]
How about this:
$comment->user_id === $post->post_authorThat test will check if the commenter is the poster. Works in single-user or multi-user blogs. Doesn’t depend on userID, email addresses, etc.
Yep I too would not hardcode any emails as I just had too many writers to manage for that to be manageable. I couldn’t find any code lying around that did this so I put it together myself. What I did was check to see if the poster was a contributor with more than 1 published posts, or the post author, and style his comments accordingly.
This is the exact code I use on MacApper to achieve the styling in my own comments. You will obviously need to pay attention to my lame variable and css class names and change them accordingly.
<code><?php foreach ($comments as $comment) : ?><li id="comment-<?php comment_ID() ?>" style="list-style-type: none">
<?php // This stuff is my multiple author stuff
if($comment->comment_author_email == get_the_author_email()) {
$oddcomment = '-author';
} else {
// This part checks to see if your commenter has more than 1 published post and sets his style appropriately
if (get_usernumposts($comment->user_id) > 0) {
$oddcomment = '-contrib';
} else {
$oddcomment = '';
}
}
?>
<!-- End author hack -->
</code>
So $oddcomment should be set to either -author, -contrib, or nothing. So now you can style your comments…Something like this:
<code><?php $i ; ?><div class="commentinfo<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
</code>
[...] comments and admin’s comments (Vitaly Friedman). Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] comments and admin’s comments (Vitaly Friedman). Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] users’ comments and admin’s comments. Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] users’ comments and admin’s comments. Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] users’ comments and admin’s comments. Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] users’ comments and admin’s comments. Comment Styling in WordPress and How-to style WordPress author comments. In the default of most themes, all comments look the same. There have been ways of changing the [...]
[...] Styling in WordPress and How-to style WordPress author comments without the need for extraneous plugins. Using the flexibility of Cascading Style [...]
[...] information about using Google Apps with your own domain and I just happened to see a post about highlighting authors comments in WordPress. I’ve seen it all the time in Techcrunch and I really like that they do that. I’ve just [...]
I should have known that it would be that easy. Thanks for pointing it out.
[...] How-to style WordPress author comments by Derek [...]
[...] How-to style WordPress author comments On this day..åˆæ–°å¢žäº†å¾ˆå¤šå¤–掛… – 2007 | Share | Print | [...]
[...] How to Style WordPress Author Comments – Accomplished the idea of different responses but I don’t like the idea of using email addresses when you have an id readily accessible. [...]
**Sorry had to edit this because the code bits where missing**
I'm confused. There is no in m theme so this hack won't necessarily work in all themes.
In my theme, the tag is the following:
<div class="commentlist" id="comment-">
I have tried just adding the following <div class="comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-">
that doesn't work. I have also tried: <div class="commentlist" comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-">
which doesn't work either.
I'm stumped. Anyone?
This is really cool. I am going to have to try it. I have a similar question:
For my registered commenters, I’d like to add this link to my comment template:
<a href="?author=user_id ?>">What would I put around that code so that the link only appears for comments left by registered users? I still want others to be able to comment, but I’d like this link to appear for the comments left by registered users.
Specifically, I want that link to lead to the commenters member page – like the one I have here: http://completerunning.com/archives/author/mark/
Is that possible? Thanks!
Thanks!
argh. looks like the code i inserted did not go into the comment. I’d love if you could get in touch with me.
[...] How-to style WordPress author comments simple tutorial on how-to style author comments under WordPress without the need for extraneous plugins. What we’re going to do is instruct WordPress to identify specific author emails and assign a unique class name to each. [...]