First, I know there are plugins that do this, but I didn’t feel like using a plugin. Second, I got the idea for this from Jennifer Slegg’s blog post 52 easy ways to optimize your blog while on your coffee break. The link that she gave to Matt Cutt’s blog post How to highlight author comments in WordPress didn’t match up with the code my theme is using or the the default Kubrick theme (I think he designed his own theme). I’ll show you the method I used to modify my comments.php and style.css.
- Be sure you have a backup copy of your style.css file and your comments.php file just in case
- In your Wordpress admin panel go to design > theme editor
- Open up your comments.php file
- If you look in your comments.php code you will see the following line:
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
- Change it to look like this:
<li <?php echo ($oddcomment = ($comment->user_id==1) ? ‘class=”author-id-1″ ‘ : $oddcomment) ?>id=”comment-<?php comment_ID() ?>”>
- Save the file and now open up your style.css
- We are going to add this line but change the #B3FFCC to whatever color you like:
.commentlist li.author-id-1 {
margin: 0 0 10px -25px;
background: #B3FFCC;
width: 510px;
} - You can add this line to any part of your style.css file that you wish, but it would make sense to add it near the other .commentlist lines. Also if you open your style.css file and find that your .commentlist lines have different margin and width attributes then I would match the new .commentlist li.author-id-1 to what your existing .commentlists are using.
Words of warning: This worked for me with no issues. I tried a few other methods that were suggested online and they didn’t work. If your templet is based on Kubrick you should have finding the lines to change and add. However, if your code looks wildly different then use your best judgement or grab a plugin to do it. As with all programming, there is more than one way to accomplish the task at hand so if you think of something better don’t hesistate to post it in the comments.
Some technical information to peruse if you so desire
The way that Kubrick and the template I’m using (studio press) alternate the background color of the comments is with the php variable $oddcomment. If you look several lines above in comments.php you will see this.
$oddcomment = ‘class=”alt” ‘;
What happens on the server where your comments.php is stored is that the variable $oddcomment in the <li> tag is replaced with class=”alt” before the page is opened by your browser. Thus, the li tag would look like this when you view the source: <li class=”alt” id=”comment-x> x will be the number of the comment.
If you now look several lines below the <li> tag you will see this line:
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
What this line does is if $oddcomment is empty it sets it equal to class=”alt” if $oddcomment isn’t empty it sets $oddcomment equal to ”” which makes it equal to an empty string (aka nothing). What we did is add another option for what $oddcomment can be. If you are part of a blog that has multiple authors you could change the code and use a switch statement to give each author a unique CSS class that you can provide styling to.