Make Youself Stand Out: Styling Author Comments in WordPress
Posted on March 9th, 2008. 33 Comments so far. You next?
The most asked question I get regards the way I style my own comments. It’s another one of those things that through some simple tweaks to your WordPress theme can make a huge difference in reader experience and overall style. I will show you how I do it with WordPress, and your readers will never look you over again!
Playing With Fire
Unlike my Gravatar guide, this time you could potentially mess your theme up if you’re not comfortable with using simple PHP. This is the official warning that you’re going to be editing comments.php by adding simple PHP code inside your comments loop. You’ve been warned. I just don’t want to be personally responsible for any problems.
Speaking of the comments loop…
WordPress is based on “loops”. To the everyday user this may not mean anything, but this simple aspect of programming drives the dynamic web. The two loops you see are for posts and for comments. We’ll be dealing with the latter, and you’ll know it by searching for this:
<?php if ($comments) : ?>
<?php foreach ($comments as $comment) : ?>
That’s what you’re generally looking for. Those lines may not always be together or have the exact some variables, but the foreach statement is the main aspect you want your code under.
Edit the List Item
The basics of what we’re doing is this: change the CSS class depending on who it is. This can get more complex depending on who you’re looking for, but in the end you only really want three things:
- Alternate. Whether you style alternating comments differently or not, it’s always good to have this in place.
- Author. This can either be the author of the article or a specific email.
- Nothing. This unlucky commenter is neither the author or an alternate comment.
- Both? I don’t like to have alternating author comments, but I’ll explain this at the end if you really want it.
Now, for the inexperienced WordPress user, this is the tricky part. In best practice, your theme uses a list to show comments. Ordered or not, it doesn’t matter that much, but you’re not using a list, you have to find the container surrounding the comment display.
If you see <ul id="comments"> or <ol id="comments"> you’re good to go.
Find the HTML tag <li>. To do this, you should be able to search the document for “<li“. Your theme may already have the alternate comments set up, in fact it’s likely to be there. Here’s what you want your <li> to look like:
<li class="<?php if ($comment->comment_author_email == get_the_author_email()) { echo 'author_comment'; } ?> <?php echo $alt; ?>" id="comment-<?php comment_ID() ?>">
That will have the author’s email checked against the commenter’s, and if it’s a match then it will print “author_comment” in the class. With the alternating comments, if you want that to work, below your comment, add this code:
<?php $alt = ($alt == 'alt') ? "" : "alt"; ?>
Simply put, if the variable $alt read “alt”, then we have to switch it so it alternates, and vise versa. If your server doesn’t like PHP shorthand you can always revert to a full on if/else statement.
Keep in mind when doing this that every theme you work with will have its differences. Unfortunately there is no widely accepted framework for things like this (including other more complex comment tricks). Just keep in mind that this is a general guide. It won’t match every theme (it doesn’t even come close to mine), so a little brain power is involved.
Styling with Consistency
Consistency is something I strive for in my styling. I aim to have all my comments the same underneath some special features. I’ve been laying off the metaphors, but imagine every comment is a sibling. Same upbringing, different individuals. That’s what we want. Some example CSS code for your comments:
ul.comments li { padding:10px; background:#fff; float:left; width:400px; } /* general things */
ul.comments li.alt { background:#f9f9f9; }
ul.comments li.author_comment { background:url(images/author_comment.png) no-repeat top right; }
Just generalize and then single out styles for the separate situations. In my comments section the alternating comments just go back between white and light gray, and the author comments have a blue background. I’ve done some other things to it to make it stand out more, though. Other things you can do:
- Put an icon next to the author’s name and their other info (or post meta).
- Add a background image over the solid colour. The top right corner is a good place.
- Add the comment’s number with rotating colors. I did this at Blogtrepreneur by request (that design will soon be gone, though).
- Give the authors special privileges, such as using a plugin to display their blog’s last post.
The possibilities are endless, just be creative in trying to add something different to your comments.
What Else can you do?
Now that you have integrated Gravatars and styled specific comments differently, what is there left to do? Here are some ideas I have:
- Separate trackbacks from comments. I do this here and it’s something that takes a bit more know-how and confidence in your skills. My favourite way is how Ben from BinaryMoon teaches.
- Integrate plugins. There are many ways to boost (or the opposite- be careful) the commenter’s experience. Threaded comments, AJAX posting, paged comments, OpenID login, comment trackers such as CoComent, etc…
- Whatever you want. WordPress’ kicker is that it’s infinitely extensible. If you can think it, you can find a way to do it. This is brought to fruition for most by plugins, but a little bit of PHP know how and the ins-and-outs of the software will have you well on your way.
Just try not to do too much. Wouldn’t want the readers to get discouraged and not leave a comment 
32 comments
March 10th, 2008 at 4:08 AM
Thanks for the link
funnily enough I have been working on a plugin that takes care of separating comments and trackbacks with no work from the developer. Hopefully it will be ready soon.
March 10th, 2008 at 5:25 AM
You do need to be a little careful what you change in the Wordpress code. I used to do a lot of editing and every time there was a (security) update something broke. The things you describe here shouldn’t ever be able to do that, but it is worth considering. A new version of Wordpress might still remove a change, but that is nothing a small diff-file can’t solve.
March 10th, 2008 at 6:05 AM
Frank - the thing is this doesn’t change wordpress core code. All it does is adjust the theme code, so nothing will break when updating.
March 10th, 2008 at 8:38 AM
The only problem that would present itself would be if they changed the variables or functions for getting the emails, which I don’t think they would do for a very long time.
April 8th, 2008 at 9:15 AM
Thank you for tutorial. But I can not check it right now on your blog, because you are in Annual CSS Naked Day
April 23rd, 2008 at 7:52 AM
Yeah, been looking for this tutorial for ages. Thanks Mr.Wilson.
April 24th, 2008 at 11:34 PM
Let’s me test it. And thanks for nice tutorial
April 30th, 2008 at 9:08 AM
Thanks for the tutorial i tested and it really works!
May 4th, 2008 at 2:50 AM
While it may not fit every web site, it’d be very helpful to get the code and the css that you use for this site. What you’ve got here is beautiful. I’m a hack and old and will never really get coding, so using full-on samples and A LOT of trial and error is how I get through the day.
Thanks for this.
May 5th, 2008 at 4:13 AM
thank you
While it may not fit every web site, it’d be very helpful to get the code and the css that you use for this site.
May 12th, 2008 at 10:30 AM
Great tutorial - I’m definitly try
Thanks for sharing
May 15th, 2008 at 5:28 AM
Very nice one. I tested it immediately and it works great thanks
May 20th, 2008 at 10:22 AM
I tested too and it work great
Thanks for sharing
Keep up good work
May 25th, 2008 at 10:32 AM
Thanks for such a nice tutorial. I am on to edit my own theme now.
May 26th, 2008 at 10:12 AM
Nice tutorial, but I think this one is better left to the expert for the not-so-techies.
May 30th, 2008 at 10:01 PM
Nice tutorial Connor! I will give it a try. If I have issues with it can youhelp me? Not so familiar with coding.
May 31st, 2008 at 11:55 AM
Great Job Here…I enjoyed it..! Gary
June 6th, 2008 at 3:53 AM
Very nice theme congrats.
June 18th, 2008 at 1:08 PM
Great tutorial Connor! Could you do one with a comment tree plugin.
June 20th, 2008 at 1:41 PM
Thanks for the tutorial i tested and it really works!
June 24th, 2008 at 12:50 AM
Hey Connor. I have a question. I noticed that this code works only for the post author’s email. But what if you have multiple author’s on a single blog, how do you make it so all admin’s comments are separately styled, rather than just the post author’s?
June 24th, 2008 at 1:31 AM
Well, in the code here you’re basically checking if the comment’s email matches the author’s email. I’m not sure if WP has an array for admin emails, so I’d just make my own. Run through the array checking for a match in terms of the commenter’s email, and if it’s good then style differently.
Alternatively, if you’re _really_ into taking the long way, you could just use the OR operator. As far as I know there isn’t quite an automated way to do that, but there could very well be. I’ve never had to implement something like that.
June 24th, 2008 at 1:38 AM
Well this is for a free theme I’m releasing. So I want to make it so that whoever uses it doesn’t have to do anything but install, and post. So, how would I make my own array?
Sorry, I’m PHP nub.
June 24th, 2008 at 11:19 AM
I’ll look into this later today, but you’re going to (probably) query the table with the admin’s emails. From there you can just either put them in a mysql_fetch_array or manually do it, and then make a function like is_admin().
I’m a PHP nub myself, so this might take some thinking. Although, don’t rule out a built in WP function I don’t know about. You should check the codex.
June 25th, 2008 at 2:31 AM
Your work is marvelous,
June 25th, 2008 at 11:36 PM
I’m just learning PHP and working in Wordpress and I’ve gotten a lot at your site Connor. This is a good idea to make your author comments stand out. Thanks for the tips.
June 26th, 2008 at 1:12 AM
Connor, I found your site through a different post… but dang… you got a lot of useful information. I’ve been tinkering a lot with PHP lately and now I’m off to do these styling changes. Thanks for the tutorial. Cheers! - Matt
June 26th, 2008 at 1:43 PM
That’s a very attractive look … I particularly like the author highlighting.
I’m still a bit of a blogging noob, so I’m going to file this one away for the future, but your explanation of a complicated process is clear and nicely done.
June 28th, 2008 at 10:18 AM
Hey Connor! Thanks for the tutorial! I have been playing with I learned a few things! I am still very green at programming in wordpress but I managed to pick up a lot of usefull things from your post! Thanks!
June 29th, 2008 at 1:03 AM
Thank you for the great tutorial. I don’t know too much PHP but I have been able to modify my themes by trial and error. So I think I can handle this. I always take a backup of my theme before I start anyway, so no worries.
July 4th, 2008 at 8:20 AM
Really i search that :]
That’s simple but i don’t make it because i’m very indolent :p
July 4th, 2008 at 11:48 AM
Nice step by step. I’m still kinda learning php and css, and how to customize my blogs, and your tutorial here really helped out. Thanks man.
Leave a Reply
1 Trackback