simonshullfoust.com

Highlight Comments of Users Logged In

I don’t require people to log in to post comments on my blog posts, but people can register if they want to. When styling my comments list on blog posts I decided to highlight comments by users logged in. You’ve probably seen other blogs where comments that are posted by the site admin(s) are styled differently than comments from other users.

On my blog, if a user comments while logged in you see a subtle image on the top right hand side of their comment that says “Member”.

Achieving this was actually quite simple with Wordpress. First locate the following lines in your comments.php theme file:

<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite><?php comment_author_link() ?></cite> Says:

As you can see, we already have a class on the list item –<li>– which is to apply the class of “alt” to every other comment (that’s how you achieve the alternating gray or white background). Rather than get too messy trying to a second class to the list item (which is definitely doable, such as <li class=”alt member”>), we’re going to apply a class to a paragraph instead.

So we’re going to deal with that third line only. I didn’t want to use the <cite> tags, opting instead to simply use paragraph –<p>– tags. So I replaced the third line with this:

<p<?php if ($comment->user_id) echo ‘ class=”member”‘; ?>><?php comment_author_link() ?>:</p>

What this is saying is IF the commenter has a user ID then apply the class “member” on that paragraph element. (Wordpress assigns user IDs to registered users. So, if the commenter has an ID then that means he/she is a registered user and is logged in.)

Next we simply have to add some styling information to our css file, in this case:

#comments ol p.member {
background: url(’images/member.png’) top right no-repeat;
}

The element on in the html reads: <p class=”member”>Username:</p> for every user logged in.

That’s it!

Hat tip: Here’s how to do it for only admin.

Tags: css, php, wordpress
Written by Simon Shull Foust on November 12th, 2007 · Comments (0)