No ShrinkWrap Web2.0 Reviews

I love using Wordpress. One of my favorite time-wasters has become flipping through newly-submitted Wordpress themes at places like Weblog Tools Collection (here’s a sample theme post) looking for that perfect theme for my blog. Unfortunately, when I made a list of style elements I liked, not one theme has all the elements I want. So, I started going through my list and decided to add my favorite style elements to any theme. First up - styled author comments.

Styling author comments with a unique look is a great way to allow readers to immediately tell the difference between readers’ comments and an author’s responses. Some popular blogs that style authors’ comments include:

TechCrunch: see the article on Mig33 for a recent example.

ReadWriteWeb: see their ’social graph’ article for a recent example.

Alex King’s blog: see his article on Google’s sharing service for a recent example.

I like the extra panache Alex King’s comments have with the gradient, so that’s what I’ll use.

First, while I’ll be showing how to edit your theme’s files to add custom author comment styles, you could do the same with a plugin like Jan Olsen’s Comment Highlighter plugin (which appears to have moved to Google Code). I personally have struggled with plugin compatibility problems (most of which, it seems, unfortunately stem from Google Sitemaps, one of my favorite plugins). To reduce the chance of conflicting plugins taking down the entire site, I started paring them down to just the necessities - in particular, I stopped using any plugin I could easily re-create with some code in the theme files. In my opinion, the five minutes it takes to copy my code between themes when changing is worth saving potentially hours’ worth of troubleshooting time. If you’d rather use a plugin, or don’t have access to edit your theme files, I’m sure Olsen’s plugin is a good one. Otherwise, make time for five minutes’ worth of easy editing and read on.

To begin, we’ll be editing two theme files: style.css and comments.php, which you’ll find in your /wp-content/themes/[theme name]/ directory. First, in comments.php, find the lines that read:

<?php foreach ($comments as $comment) : ?>
<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Modify the second line to add a unique style if both the comment author name and email address match a particular blog author’s information (make sure it matches what is listed in the user’s profile):

<li class=”<?php if ($comment->comment_author == ‘AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight’; elseif ($comment->comment_author == ‘ANOTHER AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘ANOTHER AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight2′; else echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Now we need to add the styles “authcommenthighlight” and “authcommenthighlight2″ (or whatever you name them) to our theme. Since I’m currently the only author on this blog, I’ll just be adding “authcommenthighlight.” First, create your gradient image. I had the best luck making mine 12×48 pixels, and selected two colors from my theme. I used Photoshop to make the gradient, but you can use just about any photo editing software - for that matter, even Microsoft Word can create gradients. If you’re not sure how to create a gradient, here’s some sample tutorials: Photoshop, Paint Shop Pro, Paint.net and GIMP. Here’s what I ended up with, using the top header (#237AB2) and sidebar (#EEEEEE) colors:

Now, add the “authcommenthighlight” style to your style.css, setting the gradient image to repeat along the top of the comment and the background to match the bottom color of the gradient:

.authcommenthighlight {
background:#EEEEEE url(/images/grad.jpg) repeat-x;
}

To kick it up a notch, try modifying padding, margin, borders, font colors and other style elements. Get an overview of additional CSS elements you can modify at DevGuru and W3Schools.

Now you and your authors will each have your own unique comment style that separates your comments from visitors’ comments. Of course, there’s a downside to styling comments by matching author names and email addresses - if someone knows your username and email address, they can leave a comment that receives the unique style. I haven’t dug into the Wordpress hooks enough to know whether there’s a way to code around this problem - anyone know?

Anyone have different methods of adding unique styles to author comments? I’d love to hear them in the comments below.

Related posts:

1. Wordpress plugin reCAPTCHA - Digitize books while stopping spam A Lifehacker article today led me to the reCAPTCHA project....
2. Wordpress security - is the entire community vulnerable? I read an interesting article via Slashdot today on recently-launched...
3. Upgrading Wordpress Blogsecurity.net updated their site with a list of known vulnerabilities...
4. Podcasting Howto: Using Audacity to duck music behind voice tracks I’ve been listening to a lot of podcasts on a...
5. Create custom backgrounds for brochures and presentations Recently I designed a custom brochure for a construction company....

Related posts brought to you by Yet Another Related Posts Plugin.