An often-used feature in WordPress blogs is the ability to style comments made by the post’s author differently from the others – helping replies to stand out. Here, we will edit the default WordPress to add some subtle styling to author comments.
Step 1 – If Command
Open the comments.php file located in the Default’s theme directory: \wp-content\themes\default. Directly below the line:
<?php foreach ($comments as $comment) : ?>
There is:
<li id="comment-">
Edit this to say:
<li class="<?php echo $oddcomment; ?>
<?php if ($comment->comment_author_email == get_the_author_email()) { echo 'author_comment'; } ?>"
id="comment-<?php comment_ID() ?>">
On the second line, we have included an ‘If’ statement, which in English says: “If the email address of the comment author matches that of the post’s author (meaning it’s the same person) – then insert the text ‘author_comment’”.
Also note that we opened a class on the first line. This is because by default, the theme automatically does this for it’s ‘$oddcomment’ variable. We shall fix this now.
Step 2 – Fixing the $oddcomment
If we left our code as it is, on every ‘odd’ comment, the classes would mess up. To fix this, towards the top of the file (usually line 17), look for:
$oddcomment = 'class="alt" ';
Edit this to:
$oddcomment = 'alt';
Then further down the page (usually line 48), look for:
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
Edit to:
$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';
From the past two edits, we simply removed the class=” “ text to stop any conflicts with odd comments.
Step 3 – Style It!
Open style.css in the theme directory. At the bottom, add the lines:
ol.commentlist .author_comment {
border-bottom: 1px solid #0066CC;
border-top: 1px solid #0066CC;
}
This will change the border colors on author comments (note that we’re editing the author_comment class) to a light-blue color. You may edit this however you wish, but we are simply going for a very subtle approach.
That’s It!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Dan Harper
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
What if your comment.php looks nothing like that but instead a crazy assortment of this….
This post is password protected. Enter the password to view comments.
comment_status) : ?>
We Have Spoken
<div id=”comment-” class=”comment”>
comment_approved == ’0′) : ?>
Your comment is awaiting moderation.
POSTED BY: on
comment_status) : ?>
Comments are closed.
You Do One Now
<form action=”/wp-comments-post.php” method=”post” id=”commentform”>
Name
Email
Site/Facebook/MySpace
ID); ?>
Some guy built this theme himself and I’m not sure how to get author comments styled differently. Help?
great tips. I enjoyed reading this,
Very interesting!I
tancks.
This Post Helped me
Good Time
I would love to add this feature. However, the solution appears to be based on the assumption that there is already a solution coded to produce different styles for odd and even comments. (I implemented the comments.php from Gilles Mae, which did not include this.) I started to try this solution, but had to stop when I got to Then further down the page (usually line 48), look for:
view plaincopy to clipboardprint?
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
I need more detail about the underlying odd/even solution. It would be helpful to identify insertion points by saying after such & such statement rather than line numbers. Is the entire code shown somewhere?
Generally, appreciating the tutorials on this site, though.
Really like this site, would you mind if I link to it from my blog?
Just thought of a decent wayy instead of styling the actual comment you could do something like:
<?php printf(__(‘%s‘), get_comment_author_link()) ?>
<?php echo $oddcomment; ?>
<?php if ($comment->comment_author_email == get_the_author_email()) { echo ‘(Owner)’; } else { echo ‘(Contributer)’; } ?>
I meant
<?php printf(__(‘<cite>%s</cite>’), get_comment_author_link()) ?>
<?php echo $oddcomment; ?>
<?php if ($comment->comment_author_email == get_the_author_email()) { echo ‘(Owner)’; } else { echo ‘(Contributer)’; } ?>
Dziękuję (Thx) :)
I hate my Theme’s comment.php file -.- i can only style comments by css, not in the php because everything loads with this tag if i replace it no comments are showing up, how can i do it with this code? i tried some things already but nothing helped :/ I can’t even put the gravatar, commenters name & date outside the comment div (like left of it) this really make me wanna rip my hair out.
Very nice… Who knows how to add Multi-Level Comment support?
Nagyon akartam, hogy dolgozzon ki egy kis megjegyzés köszönetet mondani Önnek néhány csodálatos ajánlások írunk meg ezt a honlapot. Saját jelentős internet felnéz a végén elismerték ragyogó javaslatokat csere a vendégeket. Azt állítja, hogy a látogatók valóban nagyon szerencsés, hogy létezik egy csodálatos közösség oly sok kiváló ember, nagyon hasznos elveket. Úgy érzem, nagyon szerencsés, hogy használják a teljes weboldalt, és várom, hogy még sok ragyogó alkalommal az olvasást. Köszönöm még egyszer minden részletet.