Unique Author Comment Styles in WordPress
When I first looked into making styled author comments, I got a bit of a headache sifting through all of articles out there. There weren’t many that solved the problem from start to finish. The most helpful introduction I found was on the Aonach Consulting blog.
The above post will be the starting point for today’s tutorial. We’ll use some PHP and WordPress magic to sort through and style a variety of comments based on the role of the author.
The Goal
By the end of this tutorial, we’ll have set up a comment system which automatically highlights comments according to the commenter’s role. For our example, we’re going to aim for an end result similar to the screenshot below. Comments will be highlighted based on roles of guest, author, and blog administrator.
The live demo below is meant to illustrate the end HTML and CSS result, and is not running on WordPress.
Sort Through Each Comment
In your WordPress theme folder, open up the file “comments.php” for editing. This is the WordPress file responsible for compiling and displaying all of the comments for a given post. All of the code in this section will be inserted into this file.
To get situated, locate the following line of your comments.php file:
<?php foreach ($comments as $comment) : ?>
This is the start of the commenting loop. We’ll be writing all of our (non-CSS) code inside of it, because each comment will need to be individually checked. The PHP loop below will do just that. It will check each comment, and determine whether or not it was made by the author based on the email used to post/comment.
This loop will also determine which comments are made by blog owners specified by email. In this case, there are two blog administrator emails (guest2@testdemo.com and guest@testdemo.com).
Just below the start of the commenting loop, copy in this block of PHP:
<!--Check if comment is by the author-->
<?php
$isByAuthor = false;
$isByAdmin = false;
if($comment->comment_author_email == get_the_author_email()) {
$isByAuthor = true;
}elseif($comment->comment_author_email == "guest2@testdemo.com" || $comment->comment_author_email == "guest@testdemo.com"){
$isByAdmin = true;
};
?>
After we’ve determined the nature of the comment, we’ll create the comment from the results. You should already have the list item tag for each comment structure in place, so you’ll want to edit it to match the below example. The most notable change is the PHP conditional statement which assigns a different class to each list item depending on whether or not it is made by an author or administrator.
<li class="<?php if($isByAuthor) { echo 'author-comment';}elseif($isByAdmin){ echo 'admin-comment'; }?>" id="comment-<?php comment_ID() ?>">
<div class="comment-padding">
<div class="gravatar-col">
<?php echo get_avatar( $comment, 64 ); ?>
</div>
<div class="comment-col">
<cite><?php comment_author_link() ?></cite>
<?php if ($comment->comment_approved == '0') : ?>
<p><em>Your comment is awaiting moderation. Sit tight!</em></p>
<?php endif; ?>
<p class="datestamp"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a></p>
<?php comment_text() ?>
</div><!--End of comment column-->
</div>
</li>
At this point, you’ll end up with all of your comments shown as usual but with class names (e.g. authorcomment) that represent their type.
Base Comment Styles
Before we change the styles for special comments, let’s take a look at the CSS for a normal comment. Essentially what we’ll be doing is setting default styles for each comment, and then using specific class names to overwrite the relevant ones as needed.
/*Comment Styles*/
ol#comment-zone{padding:12px;}
/*Default comment (Guest)*/
#comment-zone li{list-style:none; margin:12px; padding:15px; clear:both; height:74px; background:#F7F7F7; border: 1px solid #DFDFDF; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;}
#comment-zone li a{color:#0B5780;}
#comment-zone li cite {font-style:normal; font-size:14px; font-weight:bold;}
#comment-zone li cite a{text-decoration:none;}
#comment-zone li img {border:5px solid #CFCFCF; width:64px; height:64px;}
#comment-zone li .gravatar-col{clear:left;float:left; min-height:100px; width:90px;}
#comment-zone li .comment-col{float:left;padding-right:30px; min-height:100px; width:420px;}
Style the Author Comment
This is your kingdom; speak with authority. Use a color that will stand out and grab attention.
The CSS below will overwrite the base styles to achieve the unique look above.
/*Author Comments Styles*/
#comment-zone li.author-comment{background:#1F1F1F; color:#F7F7F7; border:1px solid #474747;}
#comment-zone li.author-comment img {border:5px solid #474747;}
#comment-zone li.author-comment a{color:#b6d7e9;}
Handling Multiple Owners
We could apply this idea to blogs run by multiple authors. Take Build Internet! for example. Let’s say Sam wanted to make a comment on this post. Even though he was not the author, I would still like for him to stick out from the rest even though he did not write it.
Ideally, the author would have the largest visual hierarchy, then blog admins, followed by guest comments. In this example, there is only a slight difference of shading involved between administrator and author comments. The CSS is essentially the same between author and administrator comments:
/*Admin Comment Styles*/
#comment-zone li.admin-comment{background:#333; color:#F7F7F7; border:1px solid #474747;}
#comment-zone li.admin-comment img {border:5px solid #474747;}
#comment-zone li.admin-comment a{color:#b6d7e9;}
Alternatively you could take the route of assigning each authors their own unique highlight color. You would simply just have to assign more possibilities to the initial identifying loop.
Stand Out More
With the concepts of this tutorial there is no limit to the amount of customization possible in comment styles. A dedicated designer might even style based on things like nationality (via IP address) or any number of other identifiers. Think about it, and if you come up with any fresh ideas please share in the comments below.
To make life easier, I’ve included both a sample comments.php file and the html/css version in the source files. The two of them should help to get your own comment highlighting rolling, especially if you’ve gotten a little lost from different theme structures. If you have any leftover issues, let us know and we’ll see if we can set you straight!
