WordPress How to : Style comments of every roles

WordPress How to : Style comments of every roles

When you have lots of comments on your WordPress blog, it is a good thing to give a special style to admin comments, like I do on CatsWhoBlog.com. But what about being able to give special styles to editors, contributors and subscribers comments?

To do so, simply open your comments.php file and replace your comments loop by this one :

<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
	<?php // The extra stuff to get commenter's role
	$user_id = $comment->user_id;
	$role = ( isset( $roles[$user_id] ) ? $roles[$user_id] : '' );
	?>
	<li class="<?php echo $role; ?>">
	<p>By <?php comment_author_link() ?> - <?php comment_date() ?></p>
	<?php comment_text() ?>
	</li>
<?php endforeach; ?>
</ol>

Once done, open yout style.css file and paste the following:

#commentlist li { border:2px solid white; } /* not logged or subscriber */
#commentlist li.administrator { border:2px solid red } /* blog admin */
#commentlist li.editor { border:2px solid blue } /* editor */

Many thanks to Ozh for this very interesting code!

By the way, as you probably know, today is black friday in the US and I have lots of great promo codes to share with all my readers:
WOOTHEMES : Get 50% off (No code needed)
STUDIOPRESS : 50% off on ANY theme packages with code SPTHX
GODADDY : $4 domains with the CJCBLACK09 code
HOSTGATOR : get a 20% discount using the code AUTUMN

28 Responses

Bjorn | iCan’t Internet

Nov 27 2009 10:22

This is a great tip, although the theme I am currently using has a good way of setting admin comments apart, some of my other blogs don’t.

Eric B.

Nov 27 2009 17:24

Excellent tips! I’m sure this would be very useful for some sites, like community-based sites.

Daniel DiRico

Nov 27 2009 19:38

Well that was much simpler than I was expecting. Thanks!

Darren

Nov 27 2009 20:52

Great I was wondering how to do this. Thanks Alot.

Design Informer

Nov 27 2009 21:36

WOW! This is great. I remember looking for this a long time ago and it took me a while to find this code. I wish this was published earlier. Would have saved me lots of time.

kevin

Nov 27 2009 21:42

Great tip, i bookmark for future!

Cilt Bakimi

Nov 29 2009 04:34

Thank You !
Well That Was Much Simpler Than I Was Expecting.

Jauhari

Nov 29 2009 15:17

This code is for OLD WordPress version, new wordpress version (Threaded Comment Support) using different code to play around with comment.

Can you update this code to make this wonderful tips work great on it?

Fábio ZC

Nov 29 2009 20:32

Thanks for this code, but, according the previus comment.. this is for a old version of WP, can you update this?

Thanks!

Jean-Baptiste Jung

Nov 29 2009 20:41

yes it uses the “old” comments template (Which is still used by most themes). I’ll probably write a version for the new comments template soon, so stay tuned