How-to style WordPress author comments

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.

Discuss - 70 Comments

  1. Hieu Nguyen says:

    Thanks for the code, finally I know how to style my own comments. You the man 😉

  2. Derek says:

    Does this work out then? 🙂

  3. Jared Walker says:

    Good post. I’m gonna go set it up right now. Thanks.

  4. […] komentar dari pengunjung blog, bisa dilakukan dg sedikit trik seperti yg di tunjukkan pada artikel How to style WordPress author comments ini, atau menggunakan sebuah plugin yg bernama Author […]

  5. […] 2)How-to style WordPress author comments- Here you will be able to identify author(s) & guest comments under WordPress without the need for extraneous plugins, giving you some extra flexibility by adding code to check if the commenter’s email is the same as the email address of the blog’s author. […]

  6. […] Using the flexibility of Cascading Style Sheets (CSS), we can then differentiate between specific user comments using different background colors, background-images, or fonts How-to style WordPress author comments […]

  7. Sofki says:

    for what this block using for?

    if (get_usernumposts($comment->user_id) > 0) {
    $oddcomment = ‘-contrib’;
    } else {
    $oddcomment = ”;
    }

  8. moserw says:

    Thanks for sharing this article. I have been using a plugin for the same not being a programmer myself, but this definitely helps. Came looking for themes, but have found something else too. Keep up the good work. You have a regular visitor henceforth.

    moserw
    http://www.nela.in

  9. […] 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 […]

  10. Simon says:

    Hey Derek thanks for sharing this technique. I’ve been meaning to implement this for a few weeks but I just haven’t had the time to do so. But I really LOVE the solution for the trackbacks/pings on the right of the comments. Haven’t seen this before, did you come up with it?
    I’d love to implement that too, but I guess this doesn’t work with my design. Thanks and happy thoughts

    Simon

  11. Benny says:

    Thanks Derek! I’ve been wondering how this was done. I’m surprised WordPress doesn’t have anything for this.

  12. Your solution worked well. thank you.

  13. Lianne says:

    Just wanted to say “Thanks!” for the tutorial. I’m pretty new to this sort of thing and your explanation helped me out a lot.

  14. great theme, I love it. thanks.

  15. Jack McDade says:

    Worked like a charm, thanks!

  16. Tony says:

    This is not a well thought out method. If someone knows your email address then they can enter it in the form and make their comment look just like yours. Thus possibly tricking people into believing you are the one posting the comment.

    A much better approach would be to edit the same file and instead check if the $comment->user_id == your_admin_id, which you can find in the wordpress admin section or by taking a peek in the database.

    Your code would look like this then —

    <?php if($comment->user_id=1) $oddcomment = 'author'; ?>

    Place that little nugget right after the

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

    in the comments.php file under your theme folder.

  17. Johan says:

    Where do I style the li.author. Say if I wanted just the certain author to have a different color background or font etc.? This is probably an insanely n00b question, but any help would be appreciated so much!

    • Derek says:

      WordPress 2.7+ has introduced a number of useful CSS selectors which you can utilize to target the different authors for an entire site or the author responsible for a particular post. What version of WordPress are you using? I have a post drafted for WordPress 2.7 users that will be published soon.

  18. johan says:

    I am using 2.7 currently. I just need some kind of a step by step to show me where to style a certain authors comments. Just the sites admin.

  19. andol says:

    the problem is how to find the comment loop and find the right place to insert that marker codes.