How to create Stylish WordPress Author Comments?

Blogs offer users the ability to interact with the author. This is the main reason why blogs are becoming so popular these days. However, most of the blog owners don’t give much attention to the usability and design of the comment section. People find it easy to scroll through comments, if the commenter’s details are separated from the actual comment. Some people like to have a quick glance on the comments to have an idea of discussion going on. So, if the commenter’s details are kept separated from comments, it becomes easy for them to read comments quickly.

I have seen the fact that some people complain about the less amount of comments they receive. I believe that if you put much thought and effort towards making your comment section attractive and easy to use like rest of the blog, you will be surprised at the amount of traffic you receive.

You can get some tips and examples for improving your comments section here:
Creating a better wordpress comment section

Isn’t it exciting? Now, let’s see how you can use those styles on your own blog.

If you are using default wordpress theme:

Modify the following comment loop in comments.php:

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

like this:

<li class=”<?php if ($comment->comment_author_email == “author@youremail.com”) echo ‘author’; else echo $oddcomment; ?> item” id=”comment-<?php comment_ID() ?>”>

This tells wordpress to check a comment. If the author email matches author@youremail.com, echo .author. If the comment email does not match author@youremail.com, do what you normally do and display the comment using standard styling. Now that WordPress understands that it is supposed to assign .author to your own author comments, you can style li.author accordingly to quickly differentiate yourself in discussions. Create a class in style.css file as described below.

If you have multiple authors for your blog:

Modify the code as:

<li class=”<?php if ($comment->comment_author_email == “author@domain.com”) echo ‘author’; else if ($comment->comment_author_email == “guest1@domain.com”) echo ‘guest1′; else if ($comment->comment_author_email == “guest2@domain.com”) echo ‘guest2′; else echo $oddcomment; ?> item” id=”comment-<?php comment_ID() ?>”>

If you are using Brian’ threaded comments plugin:

In your template folder, open comments.php.
Locate the following code at line 52:

<div id=”div-comment-<?php echo $c->comment_ID ?>” class=’comment<?php echo $odd ?>’>

Replace this code with:

<div id=”div-comment-<?php echo $c->comment_ID ?>” class=’comment<?php echo $odd ?><?php if ($c->comment_author_email == “author@youremail.com”) { ?> mycomment<?php } ?>’>

(Here change author@youremail.com with your email id)

Open your style.css and add:

div.mycomment {
background-color: #fbfbfb;
border: solid 1px #457AA5;
}

If you have more than one author for your blog, try using this:

<div id=”div-comment-<?php echo $c->comment_ID ?>” class=’comment<?php echo $odd?><?php if ($c->comment_author_email == “author@youremail.com” || $c->comment_author_email == “author2@yourmail.com”) { ?> mycomment<?php } ?>’>

To add more authors just add || $c->comment_author_email == “theirassignedemail@email.com” Be sure to leave a space in between each one!

If anyone else tries to fake your email id, WordPress has already provided a protection against it. So, don’t worry about it. That comment will be sent to moderation queue.

Feel free to change CSS according to your requirements.

Download Brian’s threaded plugin.

Note: If you are using Brian’s threaded comments plugin, you doesn’t need to number the comments because this plugin allows users to reply to the comment directly which they want to refer.

If you like my content, subscribe to RSS feed. Post me a comment to clarify your queries.

You can leave a response, or trackback from your own site.

2 Responses to “How to create Stylish WordPress Author Comments?”

  1. Cialis says:

    FTPy0c Excellent article, I will take note. Many thanks for the story!

  2. Geekyard says:

    Very nice hack buddy :) I highlighted author comments using this tutorial.

Leave a Reply