HowTo: Styling Author Comments With Wordpress 2.7+
Posted in Design Articles, HowTo and Tutorial | 15 Comments »
Since my update to Wordpress 2.7 I’m pretty much into all the new comments stuff. As I’ve written before, the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes Gravatar styling and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
Let’s start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I’ve used this code:
<li class="<?php if ($comment->comment_author_url == "http://www.kremalicious.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
other comments code
</li>
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class ‘author’ to the <li> tag which we were able to style by adding a li.author to our css file:
li.author { css comes in here }
But with Wordpress 2.7 these steps are needless because of the new function <?php wp_list_comments(); ?> which adds a class on author comments for itself!
If a comment from the author of an article is posted under this article, Wordpress automatically adds the class ‘bypostauthor’ to the surrounding <li> tag. So all you have to do is adding a css style of li.bypostauthior to your css file or just renaming your old li.author class or whatever you used for this:
li.bypostauthor { css comes in here }
And that’s it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!
Even more
Wordpress also has a special class for registered users of your site so you’re able to style their comments as well. For this just use the class ‘byuser’:
li.byuser { css comes in here }
All the various classes Wordpress adds to comments are listed in the Codex page for enhanced comments display. And here’s a very nice grahical overview about everything Wordpress 2.7 adds to comments.
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you’ve finished voting and making your next coffee or tea you could subscribe to my RSS-Feed, discuss this article or buy me my next coffee 
About Matthias
Discuss (15) |
Digg This! |
Save to Del.icio.us |
Stumble It! |
Float This!
Great article, but I have one question. In the old commenting system you could manipulate the order of the parts to the comment. But in WP2.7 they seemingly have taken that ability away from me or at least made it too complicated. Question: how about an example of placing the ‘author’ after the ‘date and time’. Or do I just adjust each of their margins in CSS one – and one + to changing the order?
Hi mesonto, well the simplicity of wp_list_comments is for the prize of loosing the ability for quick customization. In your case you would have to define a callback function in your template functions.php file where you can customize the display of the comments just like you’ve done it in the pre-2.7 comments.php. You just have to define the callback function in wp_list_comments like so:
<?php wp_list_comments('callback=YOUR_FUNCTION_NAME'); ?>There’s a good example on the Codex page of wp_list_comments which should help you get it running.
Krema, I guess that is my point I basically have to copy what was already done in wp_list_comments (and other ‘loopy’ functions) and subtly change their code. I think in so many ways v2.7 is homogenizing the designs. People will start to use the default ‘function A’ or ‘function B’ tools because customizing will become much more time intensive. I for one do not know which road I will go down. As a postscript I already had to semi rewrite the ‘more…’ function on ‘the_content’ function. A complete pain in the *ss. (wordpress is free however and the functionality is there)
thanks for this info…
I tried adding the li.bypostauthor { background: #c2c2c2; } but nothing happens it still doesnt work
I sill prefer:
<li user_id) $oddcomment = 'class="admincomment"'; echo $oddcomment; ?> id="comment-">ok fine, this is what i was trying to say:
http://pastebin.com/f14377a3c
I see your comments do this too. Is there any way to move the date up above the name?
Hi Justin, when using wp_list_comments you can just grab the div in which the date is packed by Wordpress and position it somehow with position: absolute in your css. Wordpress assigns a class of “commentmetadata” and also “comment-meta” to the date div. But you can’t access the markup directly to change the order cause Wordpress generates this automatically.
You would have to use the old comments.php code or use a custom callback function with wp_list_comments to have more control over the markup.
Nice and simple explanation.Thanks for sharing.
@SHADI
.bypostauthor {
background-color: #E7F8FB !important;
}
Found your site by accident. Great work my friend
Thanks for sharing WP codes. It was very helpful.
@Enci
thanks so much, had the same problem!
btw great site (love the design!)
well- had I found this post about two hours ago I would be much happier!
Everything I found prior to this had me changing the function file and all sorts of work- all I wanted was a different background when I replied!
THANK YOU!!!!