Styling Admin’s Comment in WordPress

Posted in Wordpress Development on 24 April 2009 11 comments

Make Yourself Outstanding

The difference between you and the commentors is, you are the Blog Author, so your comment must stand out among the rest.

If your current theme does not have this feature, you can do it yourself. We are going to use a little of PHP and CSS here.

1. Search for the element that wraps a single comment in comments.php

Open your theme’s comments.php

Looks for these or similar codes:

foreach ($comments as $comment) :
$comment_type = get_comment_type();
	if($comment_type == 'comment') {
?>
<div class="commentclass">
...
...

For the codes above, the element that wraps a single comment is a <div> tag. It might be a list <li> tag depends on your theme.

2. Add a css class to it

Let’s call our new css class as admincomment.

Do some edit to the codes above :

foreach ($comments as $comment) :
$comment_type = get_comment_type();
	if($comment_type == 'comment') {
?>
<div class="commentclass<?php if ($comment->user_id == 1) { echo ' admincomment'; } ?>">
...
...

The line user_id == 1) { echo ‘ admincomment’; } ?> simply check if the user id of the commentor equals to 1 (admin’s id is 1). If it is, it will output a string ‘ admincomment’.

3. Open your theme’s style.css

Now add this at anywhere :

.admincomment {
/* how do you want to make yourself outstanding */
background-color: red /*example*/
}

You can add background-image, change background color, etc.

4. Extra

In my zenverse theme, I add a word “Author” above the avatar in admin’s comment.

foreach ($comments as $comment) :
$comment_type = get_comment_type();
	if($comment_type == 'comment') {
?>
<div class="commentclass<?php if ($comment->user_id == 1) { echo ' admincomment'; } ?>">
 
<?php
// i add a word "author" above the avatar if the commentor is admin
if ($comment->user_id == 1) {
echo '<strong>Author</strong>';
}
?>
 
<?php echo get_avatar( $comment, 64 ); ?>
...
...

That’s all

Play around with css and html to make yourself special.

 

Posted by Zen on 24 April 2009 • 20,499 visits 11 comments
Tags : , , ,


or Subscribe to specific category only :




  - 11 Comments


Astommagoalse says:

А как на вашу рсс-ленту подписаться? что то не пойму

David Dean says:

Thank you for this site, such as multi information! Thank you!

Tim Litterio says:

Great work

Kath says:

Thank you so much for sharing thoughts i hope to read more informative articles on your site soon.

Scot says:

Hi

I’ve been trying to find this tutorial forever. Can you tell me how to include more than one ID? I have two authors each with admin rights and we’d like to style each differently.

Cheers

hayriye says:

Great article and share !

Trackbacks

  1. ZenVerse Styling admin comment in Wordpress | Wood TV Stand
  2. ZenVerse Styling admin comment in Wordpress | Outdoor Ceiling Fans
  3. ZenVerse Styling admin comment in Wordpress | Wood TV Stand
  4. ZenVerse Styling admin comment in Wordpress | fix my credit
  5. ZenVerse Styling admin comment in Wordpress | patio umbrella

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»