The majority of WordPress blogs look exactly the same. One of the things you can do to stand out is change the way author comments are displayed. This technique is great for improving readability as it allows your blog readers to quickly skim to comments by the author if, for example, they’re trying to quickly find an author response to a question posed by another commentator.
You can see this strategy employed by Matt Cutts on his blog, and Kyle Eslick over at Hack WordPress. Here I’m going to show you how to give author comments their own look. This isn’t the only way to do this, but it’s the one I use…
I saw this explained by Kyle over at HackWordpress.Com, and the method he uses works, but it relies on checking for the author email, if the email matches the post author’s email, the comments are styled as author comments. The problem with this is that I can enter any email when I write a comment on your blog, so what’s to stop me from entering the author’s email just to have my comments styled as author comments? Nothing. So here’s a solution that styles author comments, but prevents anyone from posing as the post author.
Edit the WordPress comments.php File
The section of code we’re going to edit begins on line 16 and goes through line 46, and looks like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
/* This variable is for alternating comment background */$oddcomment = 'alt';?><!-- You can start editing here. --><?php if ($comments) : ?><h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3><ol class="commentlist"><?php foreach ($comments as $comment) : ?><?php//Test for author commentif($comment->user_id == "1") {$authorcomment = 'author';$commentclass = $oddcomment . ' ' . $authorcomment;}else{$authorcomment = '';$commentclass = $oddcomment;}//endif?><li <?php echo 'class = "' . $commentclass . '"'; ?>id="comment-<?php comment_ID() ?>"><?php echo get_avatar( $comment, 32 ); ?><cite><?php comment_author_link() ?></cite> Says:<?php if ($comment->comment_approved == '0') : ?><em>Your comment is awaiting moderation.</em><?php endif; ?><br /><small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small><?php comment_text() ?></li><?php/* Changes every other comment to a different class */$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';?> |
We’re going to change it to this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
/* This variable is for alternating comment background */$oddcomment = 'alt';?><!-- You can start editing here. --><?php if ($comments) : ?><h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3><ol class="commentlist"><?php foreach ($comments as $comment) : ?><?php//Test for author commentif($comment->user_id == "1") {$authorcomment = 'author';$commentclass = $oddcomment . ' ' . $authorcomment;}else{$authorcomment = '';$commentclass = $oddcomment;}//endif?><?php var_dump($comment); ?><li <?php echo 'class = "' . $commentclass . '"'; ?>id="comment-<?php comment_ID() ?>"><?php echo get_avatar( $comment, 32 ); ?><cite><?php comment_author_link() ?></cite> Says:<?php if ($comment->comment_approved == '0') : ?><em>Your comment is awaiting moderation.</em><?php endif; ?><br /><small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small><?php comment_text() ?></li><?php/* Changes every other comment to a different class */$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';?> |
By default, WordPress will tag the actual list item (<li>) of every other comment, starting with the first one, with class=”alt”. CSS allows you to apply multiple classes to one element by separating those classes with a space. You can read more about that here. So, what we want to do is leave the “alt” class in tact, but add an “author” class (or whatever you want to call it) to the author comments.
Explanation of Changes in comments.php
- Change line 17 from this:
|
1
|
$oddcomment = 'class="alt" '; |
To this:
|
1
|
$oddcomment = 'alt'; |
This allows us to add in the “author” class without php throwing error messages at us.
- Now right after line 27, which says this:
|
1
|
<?php foreach ($comments as $comment) : ?> |
We’re going to add this snippet of code:
|
1
2
3
4
5
6
7
8
9
10
|
<?php//Test for author commentif($comment->user_id == "1") {$authorcomment = 'author';$commentclass = $oddcomment . ' ' . $authorcomment;}else{$authorcomment = '';$commentclass = $oddcomment;}//endif?> |
This will test for the user ID attached to a particular comment, and this is where this method outshines testing for the comment author email address. By default, WordPress attaches a user ID # to each comment. If the comment is not from a registered user, the comment will be assigned user ID #0. If you are the only author of your blog, your user ID # is probably 1, although you may want to check on that by following my instructions on how to check WordPress User ID. So, what the above snippet does is check that the user ID # for the comment is 1, if it is, it assigns both the “alt” and “author” comments to a variable named $commentclass. If the user ID is not 1, then just the “alt” class is assigned.
- Next we need to go down a bit and change this:
|
1
|
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> |
To this:
|
1
|
<li <?php echo 'class = "' . $commentclass . '"'; ?>id="comment-<?php comment_ID() ?>"> |
All that does is echo the $commentclass variable, which, if this is an author comment, is equal to “alt author” and if it’s not an author comment, is just equal to “alt”.
- Finally, go down a bit further and change this snippet:
|
1
2
3
4
|
<?php/* Changes every other comment to a different class */$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';?> |
To this:
|
1
2
3
4
|
<?php/* Changes every other comment to a different class */$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';?> |
Originally, that snippet said, “If the $oddcomment variable is empty (in other words = “), change the $oddcomment variable to ‘alt’. Else (if it’s not empty), change it to ” (make it empty), for the next comment.” This isn’t directly related to the “author” class, but it sets up the $oddcomment variable so it’s the way we need it to process it and the $authorcomment variables together.
Now it’s time to style our author comments.
Adding the Author Comment Styles
Now you have something to work with in your stylesheet. All author comments will have the “author” class attached, so all you have to do is style it. How you do this is up to you, but here’s how the comments are styled on a blog design I was working on (notice the li.author attribute second from the bottom):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
.commentlist {list-style: none;font-size: 1.5em;padding: 0px;border-right: 1px solid #CCC;border-left: 1px solid #CCC;border-bottom: 1px solid #CCC;margin: 5px;}.commentmetadata {}li cite {font-weight: bold;font-style: normal;}ol.commentlist li {min-height: 79px;} |
ol.commentlist li p {margin: 5px 0;padding: 5px;}.auth_pic {float: right;position: absolute;z-index: 1;background: url('images/crenshaw-grey.jpg') no-repeat;width: 90px;height: 72px;right: 0;top: 0;border: 3px solid #333;margin: 1px;}li.author {background: url('images/comment-bg.png') repeat-y;border-top: 1px solid #CCC;border-bottom: 1px solid #FFF;position: relative;}img.avatar {float: right;position: absolute;z-index: 1;width: 90px;height: 72px;right: 0;top: 0;border: 3px solid #333;margin: 1px;}
