Odds and Ends

At first, I didn’t want to do a post on this topic because there are so many nice ones already. However, this post focuses on the non geek portion of people with Wordpress blogs, who want to incorporate recognition of authors into their blogs. The way this post works is in 3 steps. Before we start anything, however, you’ll want to make sure you have access to edit your theme in some way. If it is FTP, fine. If you’re using the built in wordpress editor, that is also fine.

Step 1

The Theory

The first step is to set your blog up for this. Your Wordpress blog needs to somehow detect that it is you posting the comment. You could use name or IP address, or even website to determine if it is you posting the comment, but this is a bad idea because someone else could have the same name as you, your IP address could change (if you post from different locations), and someone else could enter the same website as you. So we use your email.

Taking Action

Open up your comments.php file (every respectable theme should have one), and search for the following line:

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

This line might be slightly different, and it may look like the following. If it does look like the following it is very important to preserve the highlighted bit.

<li class= SOMETHING HERE "<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Ok, now we need to replace that code with one that checks the email of the comments. If you had a bit of code where SOMETHING HERE was in the last snippet then you should put the code where it says “PUT IT HERE” in the next snippet. If you didn’t, delete both the all the words that are highlighted on this page from the code. Here it is, but do not copy and paste just yet:

<li class=PUT IT HERE "<?php if ($comment->comment_author_email == "commentor@domain.com") echo ‘commentor’; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

Of course, put in your own email in place of commentor@domain.com etc.

That code lets you detect one commenter by his/her email. If you want to detect multiple commenters you will need to instead use this code:

<li class=PUT IT HERE "<?php if ($comment->comment_author_email == "commentor@domain.com") echo ‘commentor’; else if ($comment->comment_author_email == "commentor2@domain.com") echo ‘commentor2′; else if ($comment->comment_author_email == "commentor3@domain.com") echo ‘commentor3′; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

What it Means

The code check if the author email matches up with your own, and if it does, it assigns the comment the class “commentor”. (In this case it’s fine if you don’t understand that, but please don’t go reading other articles on this site without learning CSS (Cascading Style Sheets) and HTML first.)

Ok, if you’ve made it this far, you’re doing well. If you’re lost, try going back and rereading, post a comment, or email me using the contact page.

Step 2

Whew! That was the tough part. Now just choose one of the styles below, and once you’ve chosen, head to step three to find out what to do with the style you like. Important notice: pay no attention to the layout of the comments. This depends on your theme. These code snippets will only change the color scheme of your highlighted comment(but isn’t that all you want anyway?).

Subtle

CSS Code for this style (come back to this after you read part 3):

li.commentor{
    background: #dfe5ec;
    color:#000;
    border-top: 2px solid #ced4da;
    border-bottom: 2px solid #ced4da;
}
li.commentor .commentmetadata{
    color:#000;
}
li.commentor cite.comment-author a{
    color:#000;
}


Black and White

CSS Code for this style (come back to this after you read part 3):

li.commentor{
    background:#2A3039;
    color:#FFF;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
li.commentor .commentmetadata{
    color:#fff;
}
li.commentor cite.comment-author a{
    color:#FFF;
}

Green and Pink

CSS Code for this style (come back to this after you read part 3):

li.commentor{
    background: #9bffa6;
    color: #545454;
    border-top: 2px solid #FFA6F2;
    border-bottom: 2px solid #FFA6F2;
}
li.commentor .commentmetadata{
    color:#545454;
}
li.commentor cite.comment-author a{
    color:#545454;
}


Post it

CSS Code for this style (come back to this after you read part 3):

li.commentor{
    background: #feffa9;
    color: #000;
    border-top: 2px solid #f5ed4b;
    border-bottom: 2px solid #f5ed4b;
}
li.commentor .commentmetadata{
    color:#000;
}
li.commentor cite.comment-author a{
    color:#000;
}


Hues of Blue

This style is a bit more complicated to set up because it requires an image. Upload this image to your server, then put the url of the image where the CSS Code for this style is highlighted:

li.commentor{
    background: #003579 url(PUTURLHERE) repeat-y;
    color: #fff;
    border-top: none;
    border-bottom: none;  
}
li.commentor .commentmetadata{
    color:#fff; 
}
li.commentor cite.comment-author a{
    color:#fff;
}


Sunset

This style is a bit more complicated to set up because it requires an image. Upload this image to your server, then put the url of the image where the CSS Code for this style is highlighted:

li.commentor{
    background: #d25416 url(PUTURLHERE) repeat-x;
    color: #fff6a5;
    border-top: none;
    border-bottom: none;
}
li.commentor .commentmetadata{
    color: #fff6a5;
}
li.commentor cite.comment-author a{
    color:#fff6a5;
}


Web 2.0

This style is a bit more complicated to set up because it requires an image. Upload this image to your server, then put the url of the image where the CSS Code for this style is highlighted. Also, this design is bulletproof, so it will work for any length of comment. For Example:

li.commentor{
    background: #ed2183 url(PUTURLHERE) no-repeat left bottom;
    color: #fff;
    border-top: none;
    border-bottom: none;
}
li.commentor .commentmetadata{
    color:#fff;
}
li.commentor cite.comment-author a{
    color: #ed2183;
}


Step 3

Now that you have chosen one of the styles from above, open up the style.css file of your theme(the same way you opened comments.php), and go to the very end of the file. Copy the code from your favorite style, and paste it at the very end of the file. If you set it up correctly, the word in the first snippet located between “echo ‘ WORD IS HERE ‘ should be the same as the word after the li.WORDISHERE in the second snippet. If you just copied and pasted both snippets, this will happen automatically. If you changed them, the pieces that say “commentor” in the code should be the same in your file.

If you used the code for multiple users, you can use multiple or the same styles, just make sure you change the next li.CHANGETHIS to the other class names or what was in between the echo ‘HERE’. So using the multiple users that were in the code snippet, it would be li.commentor2 or li.commentor3.

If you already know CSS, I hope for your own sake you skipped passed my laborious explanations and hit the examples. Feel free to modify any CSS/images and use them on your own site without crediting me, although a link is always accepted as thanks. Speaking of modifying images, you might want to put a gradient into the web 2.0 style…

Conclusion

I hope you learned how to manually add author highlighting in wordpress, no matter what your skill level. If you found it confusing, know that I tried to write as clearly as possible, and you can post a comment or email me at dan@odds.endsofthecontemporary.com.