Motivated by email requests from a few readers, I’ve thrown together this simple tutorial on how-to style author comments under WordPress without the need for extraneous plugins. What we’re going to do is instruct WordPress to identify specific author emails and assign a unique class name to each. Using the flexibility of Cascading Style Sheets (CSS), we can then differentiate between specific user comments using different background colors, background-images, or fonts. This method has been tested with WordPress versions 1.5-current.
Identifiying author comments
In order to style your own, and possibly other reader(s) comments, we’ll need to modify the WordPress comment loop:
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
The code above is taken from the default comment loop. In order to differentiate and assign a unique class to your own author comments, you would modify the above code like so:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
In its simplest form, you’re telling WordPress to check a comment. If the author email matches author@domain.com, echo .author
. If the comment email does not match author@domain.com, do what you normally do and display the comment using standard styling. Now that WordPress understands that it is supposed to assign .author
to your own author comments, you can style li.author
accordingly to quickly differentiate yourself in discussions.
Identifying author(s) & guest comments
Ocassionally, blogs feature multiple authors or highlight specific readers. In order to style these comments differently than your own [author] comments, we can modify the code above a little more:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else if ($comment->comment_author_email == "guest1@domain.com") echo 'guest1'; else if ($comment->comment_author_email == "guest2@domain.com") echo 'guest2'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
Similar to identifying author comments, in its simplest form, we’re instructing WordPress to assign .author
to any comments which match author@domain.com, .guest1
to any comments matching guest1@domain.com, and .guest2
to any comments matching guest2@domain.com. If none of those emails match, then continue doing the usual.
Feel free change the assigned class names to more descriptive alternatives. Personally, I find using author or guest names easiest in the long run when pruning comments.php
and style.css
.
Styling author(s) & guest comments
Now that we have unique class assignments, we can style comments accordingly in order to differentiate between the masses and general readers. Assuming you wanted to add a small 16×16 pixel avatar to author comments, we would use CSS to add a background image to the authors name. The HTML / PHP might look something like this:
<span class="author_meta"><?php comment_author_link() ?></span>
The general corresponding CSS might look something like:
li.author span.author_meta a {
background: url(path/to/image.gif) no-repeat left center;
padding-left: 20px;
}
The possibilities & styling flexibility are only as limited or exhaustive as your personal CSS knowledge limitations. Feel free to drop your questions or comments below. On a public downloads note, keep an eye out for the downloads section availability which will include some related downloads.
Motivated by email requests from a few readers, I’ve thrown together this simple tutorial on how-to style author comments under WordPress without the need for extraneous plugins. What we’re going to do is instruct WordPress to identify specific author emails and assign a unique class name to each. Using the flexibility of Cascading Style Sheets (CSS), we can then differentiate between specific user comments using different background colors, background-images, or fonts. This method has been tested with WordPress versions 1.5-current.
Identifiying author comments
In order to style your own, and possibly other reader(s) comments, we’ll need to modify the WordPress comment loop:
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
The code above is taken from the default comment loop. In order to differentiate and assign a unique class to your own author comments, you would modify the above code like so:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
In its simplest form, you’re telling WordPress to check a comment. If the author email matches author@domain.com,
echo .author
. If the comment email does not match author@domain.com, do what you normally do and display the comment using standard styling. Now that WordPress understands that it is supposed to assign.author
to your own author comments, you can styleli.author
accordingly to quickly differentiate yourself in discussions.Identifying author(s) & guest comments
Ocassionally, blogs feature multiple authors or highlight specific readers. In order to style these comments differently than your own [author] comments, we can modify the code above a little more:
<li class="<?php if ($comment->comment_author_email == "author@domain.com") echo 'author'; else if ($comment->comment_author_email == "guest1@domain.com") echo 'guest1'; else if ($comment->comment_author_email == "guest2@domain.com") echo 'guest2'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
Similar to identifying author comments, in its simplest form, we’re instructing WordPress to assign
.author
to any comments which match author@domain.com,.guest1
to any comments matching guest1@domain.com, and.guest2
to any comments matching guest2@domain.com. If none of those emails match, then continue doing the usual.Feel free change the assigned class names to more descriptive alternatives. Personally, I find using author or guest names easiest in the long run when pruning
comments.php
andstyle.css
.Styling author(s) & guest comments
Now that we have unique class assignments, we can style comments accordingly in order to differentiate between the masses and general readers. Assuming you wanted to add a small 16×16 pixel avatar to author comments, we would use CSS to add a background image to the authors name. The HTML / PHP might look something like this:
<span class="author_meta"><?php comment_author_link() ?></span>
The general corresponding CSS might look something like:
li.author span.author_meta a {
background: url(path/to/image.gif) no-repeat left center;
padding-left: 20px;
}
The possibilities & styling flexibility are only as limited or exhaustive as your personal CSS knowledge limitations. Feel free to drop your questions or comments below. On a public downloads note, keep an eye out for the downloads section availability which will include some related downloads.