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!
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Fede777 | Geekspot August 15th
Very nice and easy to follow Tip, I’m already doing it, thanks.
K3v August 15th
Very subtle indeed, but I get the point
I love these tips
John August 15th
Nice. I know some people have been complaining about the amount WP tutorials, but I enjoy them.
Ben Griffiths August 15th
Another great little tip, thanks and keep them coming
Douglas Neiner August 15th
This is similar to how I handled it on my website. Very easy to understand. Great tip!
Keith August 15th
Nice one. More wordpress tuts
Braden Keith August 15th
Simple to figure out, but nice to have on file. Thx
Andy Ford August 15th
I ended up using the Author Highlight plugin - http://plugins.trac.wordpress.org/wiki/AuthorHighlight
it still requires a similar manual template tweak.
It baffles me that the WP team hasn’t yet incorporated author comment highlighting into the core code base.
Douglas August 15th
I don’t think this is a good way of achieving this. It is all based on emails, which means that other people could pretend to be you by making a comment with your email address.
instead of:
if ($comment->comment_author_email == get_the_author_email()) { echo ‘author_comment’; }
I use:
if ($comment->user_id === $post->post_author) { echo ‘author_comment’; }
you can also add:
else ($comment->user_id != 0 ) { echo ‘user_comment’; }
For this to work, the comments must be made while logged in. It will add the class ‘author_comment’ if you are the author of the post, and will add ‘user_comment’ if you are not the author, but still a user of the blog.
Marty Romero August 15th
I too am surprised that this hasn’t becoe a “feature” built into wordpress, still, this tutorail is much appreciated. I don’t mind the plethora of wordpress tutorials, keep them coming. Thanks!
Erik August 15th
I love these short tips, great fillers while waiting for the larger tutorials, and I almost always learn something new or find a simpler way of doing it.
This was no exception and you just saved me, oh, maybe 20 minutes of finding and fiddling with the WP code.
MGK August 15th
Thanks for that. Cool tip even if with a liltle of thinking it could be done without a tuto, but anyway, now i gain some time :p
Dan Harper August 15th
@Douglas. Thanks for that
Adam August 15th
PLEASE do a tut on how to make a killer div for MYSPACE and a Wordpress theme…. Those are the hardest tuts to find, and I would love to see it done the right way by the Envato Group… You guys are amazing and everything you touch seems to be GOLD… Keep up the good work and do consider my request(s).. Thanks in advance.
insic August 15th
wow! i have to apply this in my blog. really cool!
Taylor Satula August 15th
@john | Why don’t you like the wp tuts. As someone famous said… Don’t Be Hatin
P.s Gr8 Tutor keep the wpa2-psk tuts coming
Taylor Satula August 15th
WTF the auto complete made wpa2-psk not me
Shane August 16th
A merge of the tutorial and Douglas’ comment will prove useful. Thanks for posting.
Cheers.
James August 16th
I use something similar to this on my blog. I would use Douglas’ solution but I like having the ‘power’ to comment when not logged in so I use the email method.
Elliott Cost August 16th
This is pretty cool! I’ll have to work on implementing this on my wp theme.
Joe August 16th
nice! thanks
Dan Harper August 16th
Actually, I would have thought that WordPress would not let people comment using an email address that is used by a registered user. Unfortunately, it doesn’t.
ferdinand August 16th
great tip. so i can finally get rid off the highlight author comment plugin and be able to style everything from within the style.css. thanks a lot!
cheese August 16th
You guys sure like wordpress
Lamin Barrow August 16th
Very nice..i like it lot.
Erika August 16th
Anything that can be added to the template that saves me from having to use a plugin rocks in my book. Awesome!
Rich August 16th
I know this is biased but…I wouldn’t mind if every tip was WP… as in wptuts.com
George August 16th
Guys
This is excellent, BUT. If someone posts a comment using the author’s email address (unlikely but can happen) it’ll trigger anyway, by the look of it?
Just a thought. Congrats on another great tutorial.
dlv August 16th
thanks, really nice, usefull and easy !!!
Dan Harper August 16th
@George : Check out Douglas’ post for an alternative (better) way to do it.
Paul August 16th
Come on guys, you started so well and you’ve already fallen in line with the rest of the “weblog tutorialosphere”. Most of the recent quick tips have been things that a quick google search would help you with. the other sites are publishing stuff that is really high quality, net tuts is the one I am most interested in but seems to be falling below the line of quality most people have come to expect from envato sites. Please go back to less frequent, but higher quality tutorials, or I feel you’ll lose grip a little on your placement as a great tutorial site.
Josh August 17th
just starting out with WordPress. Thanks for the tip.
Grafiko August 17th
It is nice tip but you guys are “milking” the wordpress theme. I believe Paul has a point.
Jbcarey August 18th
I follow Paul as well… I don’t build wordpress blog anymore… I’d like to see some tips in XML and Flash… Perhaps working with the google api…. or more full site builds…. (in php.)
And not that i’m interested in them, but how about ASP.NET tutorials…. there’s so many options out there besides wordpress tutorials….
Jacob Harvey August 18th
@Douglas Yeah I’ve always down it similar to your comment. On my friend’s site I even added a couple variations. So if she was logged in (the owner and only poster) it would add a class for her. And if other members posted (me and a couple other friends) we’d get our own styles. And then everyone else would get the general alternating colors.
I don’t recall the exact method of execution, I probably modified the AuthorHighlight plugin or something.
damien August 19th
Great, thanks for that! That’s exactly what I needed.
Miles Johnson August 19th
I actually wrote a plugin for this… It gave each wp user (subscriber, admin, editor, etc) a different class for each comment, should find it.
James August 21st
@Dan - I would’ve thought so too… But maybe some people use joint email addresses… Kinda stupid but maybe they do..? …
Raj August 23rd
nice tip Dan
Thanx a lot!
Design Spartan August 29th
It works great, thx !
But I’ve found an error : line 48 you have written “empty” twice and it didn’t work but with just “empty” it’s perfect.
Nice tip
Ginza September 13th
wow! Greatest tips for styling author comments ever! Thanks!
Jonathan October 1st
I used this and it works (with positioning fir FF - of course) but I lost the number count in IE??? So what is the fix on this? I love Nettuts and WP tutorials are just fine thank you. I’ve been a we designer since the Mosaic browser, but just this month trying out WP. Don’t code (just design or juse scripts) and just don’t know how to fix this one.
Thanks in advance!
J. D. Payne
authencentric.com
Jonathan October 1st
Sorry it used by old ID…
Thanks again,
J. D. Payne
Psuken October 11th
Nice tut.. But does not take the advantage of the multilingual features of Wordpress. Your template can be used with different languages if you use _e() instead of plain text..
Antonio Wells October 14th
Great tip, I’m using it!
Jen Germann October 14th
Thanks! This article really helped me out today!
Vincent October 17th
Thanks! I just added this to my site.
Add Your Comment
( GET A GRAVATAR )Your Name November 21st
Trackbacks