WordPress How-To: Styling Author Comments

By Matt, January 16th, 2009 in Tutorials, Web Design, Wordpress | 10 Super Comments

This guest post on how to highlight author comments in Wordpress was written by Nikola Krajačić – http://www.lolgadgets.com

The Problem

You started your blog, you’ve got some cool posts and people are starting to leave comments on them. And, as a good host, you’ll probably want to reply to them. But in comments, or should we say discussion, you’re just an average Joe, not an author. Wouldn’t it be nice if you could somehow highlight your comment, so everybody could know that that’s author speaking? Yes, it would be awesome, and we’re going to show you how can you do it.

The Solution (for WordPress 2.6 and LOWER):

Well, what we are going to do is to add some new CSS classes in our CSS file, because we DO want our author comment to be different that the others, right?

And after that – we are going to change some stuff in comments.php file so that WordPress could distinct author from other visitors. So, let’s identify the author comments first.

Step 1 – CSS

First, the CSS class. Open up your style.css file and find where are all of the comments styles. You could write the new code anywhere actually, but believe us, you want it to be nice, and after all, it’s why it’s called Cascading Style Sheets.

So, did you found it? Great!

Since the comments are simple unordered lists and every comment is a list item, we are going to define a style for author list item (which will later be assigned to code which displays the comments). This one will have a different background than the others, you are free to put your CSS instead.

li.author_comment {
background: #ccc; url(path/to/image.gif) no-repeat left center;
}

That’s about it as long as CSS is concerned. We just created a style for author list items. Let move on now.

Step 2 – comments.php

Open the comments.php file. You can do this from WP admin area, just go to Design->Theme Editor.

In there, find the line:

<li class=”some_PHP_code_or_class_name” id=”comment-<?php comment_ID() ?>”>

This is the code we want to modify. We are going to assign it with a class that we wrote in CSS in previous step. I intentionally put “some_PHP_code…” part there, because there is a possibility that not every theme has the same class name for “ordinary” comments.

So, let’s do this:

<li class=”<?php if ($comment->comment_author_email == “authors@email.com”) echo ‘author_comment’; else echo ’some_PHP_code_or_class_name’; ?> item” id=”comment-<?php comment_ID() ?>”>

NOTE: You need to change “authors@email.com” to the e-mail address that is in your WordPress settings page!

What did we do just now?

With simple IF-ELSE we told WordPress to check IF comment_author_email (the e-mail that you enter when writing a comment) is “authors@email.com” and if it is, then the class name will be “author_comment”. If not (ELSE) the class name will be the default one (some_PHP_code…).

WordPress will now assign .author_comment to your author comments, which are listed items styled in the first step.

The Solution for WordPress 2.7

In previous versions of WordPress, we had to modify both CSS and comments.php file to differentiate author comments from visitor comments. In WordPress 2.7, things are much more simple.

WordPress now has automaticlly added CSS class for authors and users, and if you want to style author comments, simply copy this code to your style.css file and write a few styles:

li.bypostauthor {
/* CSS styles for author comments */
}

What about multi-author blogs (like this one)?

If you have a multi-author blog, and you want that every author has it’s own style in comments (let’s say that Matt wants to have a green background and I would like a blue one) – the process remains the same.

First – create CSS clasess:

li.matt {
background: #0F0;
}
li.nikola {
background: #00F;
}
li.site_partner {
background: #F00;
}

Next – the comments.php

<li class=”<?php if ($comment->comment_author_email == “matt@spoonfeddesign.com”) echo ‘matt’; else if ($comment->comment_author_email == “nikola.krajacic@gmail.com”) echo ‘nikola’; else if ($comment->comment_author_email == “site@partner.com”) echo ’site_partner’; else echo some_PHP_code_or_class_name ?> item” id=”comment-<?php comment_ID() ?>”>

Notice that we added site_partner class also. This way we wanted to show you how exactly you can style comments even for your very special visitors, and not only authors, because everything is based on what e-mail visitor enters during commenting on your blog.

The logic is the same: IF entered e-mail is matt@spoonfeddesign.com – assign “matt” class. If not, check if it is nikola.krajacic@gmail.com and if yes, assign “nikola” class. If not, check if it is site@partner.com and if yes, assign “site_partner” class. If none of these rules satisfied, assign the default class.

Conclusion

Off course, you are allowed to change the names of the classes to something more of your taste. There are tons of possibilities now, just give your imagination a go.

And if you have any questions regarding this topic – feel free to e-mail me (nikola.krajacic@gmail.com).