WordPress How-To: Styling Author Comments

by Matt on January 16, 2009 · 13 comments

in How-To,Web Design Tips

This guest post on how to highlight author comments in WordPress was written by Nikola Krajačić – http://www.lolgadgets.com

The Problem

You started your blog, you’ve got some cool posts and people are starting to leave comments on them. And, as a good host, you’ll probably want to reply to them. But in comments, or should we say discussion, you’re just an average Joe, not an author. Wouldn’t it be nice if you could somehow highlight your comment, so everybody could know that that’s author speaking? Yes, it would be awesome, and we’re going to show you how can you do it.

The Solution (for WordPress 2.6 and LOWER):

Well, what we are going to do is to add some new CSS classes in our CSS file, because we DO want our author comment to be different that the others, right?

And after that – we are going to change some stuff in comments.php file so that WordPress could distinct author from other visitors. So, let’s identify the author comments first.

Step 1 – CSS

First, the CSS class. Open up your style.css file and find where are all of the comments styles. You could write the new code anywhere actually, but believe us, you want it to be nice, and after all, it’s why it’s called Cascading Style Sheets.

So, did you found it? Great!

Since the comments are simple unordered lists and every comment is a list item, we are going to define a style for author list item (which will later be assigned to code which displays the comments). This one will have a different background than the others, you are free to put your CSS instead.

li.author_comment {
background: #ccc; url(path/to/image.gif) no-repeat left center;
}

That’s about it as long as CSS is concerned. We just created a style for author list items. Let move on now.

Step 2 – comments.php

Open the comments.php file. You can do this from WP admin area, just go to Design->Theme Editor.

In there, find the line:

  • ”>

    This is the code we want to modify. We are going to assign it with a class that we wrote in CSS in previous step. I intentionally put “some_PHP_code…” part there, because there is a possibility that not every theme has the same class name for “ordinary” comments.

    So, let’s do this:

  • comment_author_email == “”) echo ‘author_comment’; else echo ‘some_PHP_code_or_class_name’; ?> item” id=”comment-”>

    NOTE: You need to change “” to the e-mail address that is in your WordPress settings page!

    What did we do just now?

    With simple IF-ELSE we told WordPress to check IF comment_author_email (the e-mail that you enter when writing a comment) is “” and if it is, then the class name will be “author_comment”. If not (ELSE) the class name will be the default one (some_PHP_code…).

    WordPress will now assign .author_comment to your author comments, which are listed items styled in the first step.

    The Solution for WordPress 2.7

    In previous versions of WordPress, we had to modify both CSS and comments.php file to differentiate author comments from visitor comments. In WordPress 2.7, things are much more simple.

    WordPress now has automaticlly added CSS class for authors and users, and if you want to style author comments, simply copy this code to your style.css file and write a few styles:

    li.bypostauthor {
    /* CSS styles for author comments */
    }

    What about multi-author blogs (like this one)?

    If you have a multi-author blog, and you want that every author has it’s own style in comments (let’s say that Matt wants to have a green background and I would like a blue one) – the process remains the same.

    First – create CSS clasess:

    li.matt {
    background: #0F0;
    }
    li.nikola {
    background: #00F;
    }
    li.site_partner {
    background: #F00;
    }

    Next – the comments.php

  • comment_author_email == “”) echo ‘matt’; else if ($comment->comment_author_email == “”) echo ‘nikola’; else if ($comment->comment_author_email == “”) echo ‘site_partner’; else echo some_PHP_code_or_class_name ?> item” id=”comment-”>

    Notice that we added site_partner class also. This way we wanted to show you how exactly you can style comments even for your very special visitors, and not only authors, because everything is based on what e-mail visitor enters during commenting on your blog.

    The logic is the same: IF entered e-mail is – assign “matt” class. If not, check if it is and if yes, assign “nikola” class. If not, check if it is and if yes, assign “site_partner” class. If none of these rules satisfied, assign the default class.

    Conclusion

    Off course, you are allowed to change the names of the classes to something more of your taste. There are tons of possibilities now, just give your imagination a go.

    And if you have any questions regarding this topic – feel free to e-mail me ().

    Spread the Love:
  • { 12 comments… read them below or add one }

    John Wang January 16, 2009 at 10:10 pm

    nicely done. I wonder how editing the comments.php file affects WordPress 2.7′s Automatic update feature. Can it still be used or are you forced to manually update?

    I’m currently looking at how to style author comments through Disqus.

    deb January 17, 2009 at 2:34 am

    Such smaller tutorials like this are practically useful for me which i have the patience to read, understand & implement. Thank you for writing this Nikola :)

    Nikola January 17, 2009 at 6:54 am

    Thanks guys!
    John Wang – if you’re using WP 2.7, then you don’t edit the comments.php file, you just add a special class in your CSS.

    james mason January 17, 2009 at 1:33 pm

    never thought of doing this. Shal do it now tho

    Jeremy Davis January 23, 2009 at 1:07 pm

    Wouldn’t this also work for multi-author blogs that do not require unique styles for each author?

    if($comment->user_id) echo “author-comment”

    So if the commenter is logged into the blog and he leaves a comment, that style is added.

    This would save you from entering every author’s e-mail into your comments.php, because all logged in users have a user_id > 0.

    This also would prevent people from just entered an known author’s e-mail address to get their comment highlighted as an author.

    Paanchajanyadharaaya February 13, 2009 at 9:50 pm

    Knowledge is power and also a cost saving tool for the future. Read my sig for more info on getting faster more efficient and targetted search results with one simple step.

    Bлacть July 4, 2009 at 1:29 pm

    Интересно, хотя не мешало бы чуть подетальней написать, а то есть немножко непонятных моментов :)

    Search By Phone Number July 24, 2009 at 5:25 pm

    so cool, i was actually looking in google for search by phone number and this popped up…. nice.. just thought I’d let you know.

    Nousisiscuiva May 2, 2012 at 6:30 pm

    The importance of on the web reputation management is becoming an actual major offer for modest and moderate businesses inside final 12 weeks of this composing and is not slowing down anytime quickly. Neither will be the need for on-line status administration companies.
    Improve Online Reputation Management With Proactive Pr
    A reputation, excellent or unhealthy, is one thing that will observe your company for a long time to come. A person buyer which has a bad experience is often the big difference among an excellent yr along with a agonizing 12 months for your corporation in terms of profits.

    website design gold coast January 7, 2013 at 12:32 pm

    Thank you for providing this resource within your
    site.

    Pictures on Canvas June 19, 2013 at 12:22 am

    I like the valuable information you provide in your articles.
    I’ll bookmark your blog and check again here regularly. I am quite sure I will learn many new stuff right here! Good luck for the next!

    Buy Revatio Meds Online June 25, 2013 at 11:58 pm

    Erectile dysfunction is often a hassle for men because
    it involves the inability for a man to actually develop
    an erection after a while. This lack of control is a real hassle that
    can keep any man from feeling as comfortable and active as
    possible. Vimax herbal pills can help people out with keeping this problem from being worse than it could be.

    Leave a Comment

    { 1 trackback }

    Previous post:

    Next post: