Unique Author Comment Styles in WordPress

Unique Author Comment Styles in WordPress


When I first looked into making styled author comments, I got a bit of a headache sifting through all of articles out there. There weren’t many that solved the problem from start to finish. The most helpful introduction I found was on the Aonach Consulting blog.

The above post will be the starting point for today’s tutorial. We’ll use some PHP and WordPress magic to sort through and style a variety of comments based on the role of the author.

The Goal

By the end of this tutorial, we’ll have set up a comment system which automatically highlights comments according to the commenter’s role. For our example, we’re going to aim for an end result similar to the screenshot below. Comments will be highlighted based on roles of guest, author, and blog administrator.

The live demo below is meant to illustrate the end HTML and CSS result, and is not running on WordPress.

Comment Variety Styles

Sort Through Each Comment

In your WordPress theme folder, open up the file “comments.php” for editing. This is the WordPress file responsible for compiling and displaying all of the comments for a given post. All of the code in this section will be inserted into this file.

To get situated, locate the following line of your comments.php file:

This is the start of the commenting loop. We’ll be writing all of our (non-CSS) code inside of it, because each comment will need to be individually checked. The PHP loop below will do just that. It will check each comment, and determine whether or not it was made by the author based on the email used to post/comment.

This loop will also determine which comments are made by blog owners specified by email. In this case, there are two blog administrator emails ([email protected] and [email protected]).

Just below the start of the commenting loop, copy in this block of PHP:

After we’ve determined the nature of the comment, we’ll create the comment from the results. You should already have the list item tag for each comment structure in place, so you’ll want to edit it to match the below example. The most notable change is the PHP conditional statement which assigns a different class to each list item depending on whether or not it is made by an author or administrator.

At this point, you’ll end up with all of your comments shown as usual but with class names (e.g. authorcomment) that represent their type.

Base Comment Styles

Before we change the styles for special comments, let’s take a look at the CSS for a normal comment. Essentially what we’ll be doing is setting default styles for each comment, and then using specific class names to overwrite the relevant ones as needed.


Style the Author Comment

This is your kingdom; speak with authority. Use a color that will stand out and grab attention.
Highlighted Author Comment
The CSS below will overwrite the base styles to achieve the unique look above.

Handling Multiple Owners

We could apply this idea to blogs run by multiple authors. Take Build Internet! for example. Let’s say Sam wanted to make a comment on this post. Even though he was not the author, I would still like for him to stick out from the rest even though he did not write it.

Ideally, the author would have the largest visual hierarchy, then blog admins, followed by guest comments. In this example, there is only a slight difference of shading involved between administrator and author comments. The CSS is essentially the same between author and administrator comments:

Alternatively you could take the route of assigning each authors their own unique highlight color. You would simply just have to assign more possibilities to the initial identifying loop.

Stand Out More

With the concepts of this tutorial there is no limit to the amount of customization possible in comment styles. A dedicated designer might even style based on things like nationality (via IP address) or any number of other identifiers. Think about it, and if you come up with any fresh ideas please share in the comments below.

To make life easier, I’ve included both a sample comments.php file and the html/css version in the source files. The two of them should help to get your own comment highlighting rolling, especially if you’ve gotten a little lost from different theme structures. If you have any leftover issues, let us know and we’ll see if we can set you straight!

Posted Sunday, April 26th, 2009 · Back to Top

SPONSOR

Add Comment

38 Comments 7 Mentions

  1. Igor Mattos Author Editor

    Hey!
    Really nice post, i was looking for that for some time already.

    ·

  2. izzat aziz Author Editor

    this is really good tutorial. really useful for multi-author blog. thanks.

    izzat aziz’s last blog post..20 Comment Design For Inspiration

    ·

  3. Marvin Author Editor

    really helpful, thanks for that!

    Marvin’s last blog post..Ein Herz für Blogs

    ·

  4. Brandon Cox Author Editor

    Thanks! I think this is one of the often neglected areas of design – quite helpful of you to provide this tutorial!

    ·

  5. Andrew Houle Author Editor

    Nice tutorial Zach! I’ll be implementing this on MyInkBlog soon :)

    Andrew Houle’s last blog post..10 Awesome Free Serif Fonts

    ·

  6. Kawsar Ali Author Editor

    nice tutorial. I have this method in my site. Slightly different way. Thanks for sharing

    Kawsar Ali’s last blog post..40 Logo Design Tutorials

    ·

  7. Ronny Bendiksen Author Editor

    How can you do the same thing with threaded comments in WP 2.7?

    ·

  8. Roland Kopp-Wichmann Author Editor

    Great post! I was searching for something like that for a while. Wonder how it will work out on my blog. Thanx

    Roland Kopp-Wichmann’s last blog post..Neu: E-Werkstatt für Selbständige, Existenzgründer und Freiberufler

    ·

  9. emoruffino Author Editor

    this will work really well when i update the design on my blog… TY!

    ·

  10. Jarryd Author Editor

    What happens when an author who is an admin comments? Obviously it will pick up that they are an author first, but should there perhaps be a style specifically for author-admins? Just a suggestion and nice work :)

    ·

    • Zach Dunn Author Editor

      @Jarryd

      It would not end up being a problem, because the admin state is only checked if the commenter is not the author. You would need to have to separate If loops rather than an if/elseif in order to pick out author/admin.

      ·

  11. mssmotorrd Author Editor

    It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
    p.s. You have a very good template for your blog. Where did you find it?

    ·

    • veska Author Editor

      Nice template, indeed.

      ·

  12. web design company manager Author Editor

    Nice tutorial! Thank you. Some moments are still not clear to me but I will try to investigate them by myself.

    ·

  13. Dhini Author Editor

    In my comment.php without only
    So How?

    Dhini’s last blog post..Zomaar cadeau (myn lieve man)

    ·

  14. Richard Ikeda Author Editor

    Muito Bom =D

    ·

  15. Ben Author Editor

    Thanks took me ages to find this!
    Now implemented in my comments
    Thanks
    .-= Ben´s last blog ..Update your EEE PC Bios from a USB Drive – A Guide =-.

    ·

  16. mpiftex Author Editor

    This is a good trick but the problem is that if a malicious commenter enters the admin’s e-mail address, it will appear like it’s him, stealing not just the bg color but the gravatar too (i believe)

    The latest version of wordpress gives classes like “comment-author-[name of author]” to the comments if the commenter is signed in. So you can play around with these classes on the css.

    ·

  17. mikle Author Editor

    Nice tutorial! Thank you.
    .-= mikle´s last blog ..Главная страница =-.

    ·

  18. jason Author Editor

    It all depends on your database structure. I myself, preffer using sort of a class checking script which I wrote some time ago. It requires some extra fields in database but works as good as this one does

    ·

  19. a_usman Author Editor

    wow, that is really great tutorial…. I will try to implement in my theme. I have just enabled it to be compatible with threaded comments.
    .-= a_usman´s last blog ..One Email for Multiple Twitter Accounts =-.

    ·

  20. Ennis Author Editor

    Any way to make this into a plugin? not sure why, but i’ve modified my code to match above, included the css, but the changes dont take effect in my comments. Not sure why

    ·

  21. Steven Author Editor

    @ a_usman
    Can you please update us with the code fro new threaded template.

    Thanx

    ·

  22. Leslie Ardinger Author Editor

    Fabulous tut on this whole comment.php file!! I am also impressed by your incredible knowledge at your young ages! Kids nowadays!! I am having a problem though with your downloaded comments.php file. This is the line (mine is line 39)

    <li class="” id=”comment-”>

    I am receiving a parse error: Parse error: syntax error, unexpected ‘?’ (my… ” id=”comment-…is a black color in my editor which indicates that something is wrong. Any thoughts?

    ·

    • Zach Dunn Author Editor

      @Leslie

      Thanks for the compliments! We’d like to think that we do our part to contribute on behalf of our generation.

      Now let’s talk about your issue. I’m actually going to refer you to an updated version of the comment highlighting system found here. This was originally posted in April 2009, and was revisited again in September that year. You can find the updated post (and hopefully your solution) in the “Automatically Highlight Admin Comments in WordPress” tutorial.

      ·

  23. Leslie Ardinger Author Editor

    Sorry guys! I figured it out…I was missing a quote after my admin email! Time for a break! Thanks again for your time and effort putting this together!

    ·

  24. Web Design Author Editor

    awesome stuff get post
    thanks

    ·

  25. hussain Author Editor

    Such a Great post! I was searching for something like that for a while. I am really wonder how it will work out on my blog. Thanx

    ·

  26. Barnevern Author Editor

    Very useful. This is the second “google finding” on this site in an hour (same topic)!

    Thanks again for sharing

    ·

  27. Samatha Ring Author Editor

    I’ve seen this comment style, but I think it’s much better if one of the color is much lighter than the other one. The more lighter it is the more easier someone can recognized different comments.

    ·

  28. Valentin Author Editor

    Thanks, i was looking for something like that very long. :-)

    ·

  29. Diesel Engine Author Editor

    Everything on a website that is unique is a lot better than something copied from anywhere. And for sure it will make your website to have better ranking at visitors.

    ·

  30. Anne Author Editor

    I thought of something, can you make a tutorial where we could actually change the color used in the commenting background? I would like to make use of a more lighter color than two dark ones like the above sample. I am really clueless with the coding.

    ·

  31. Groho Author Editor

    I was looking for this, but I don’t find any “foreach”

    ·

  32. uuhtskjuhf Author Editor

    As and baeing a [url=http://www.outletchanelsales.com/]Chanel Bags Outlet[/url] fashion gal,who likes to Chanel Outlet – http://www.outletchanelsales.com/ buying [url=http://www.outletchanelsales.com/]Chanel Bags Sale[/url] some fashionable and [url=http://www.outletchanelsales.com/]Chanel Bags Outlet[/url] special design [url=http://www.outletchanelsales.com/]Chanel Bags Outlet[/url] items,especially limited edition products.The chanel bag is a will have to in the current wardrobe of every fashionista.It is not only beautiful and classic,but also fashionable and benefits a lot of respect in the market.There has lots of styles with several kinds of color design and excellence and elaborate detailing.For example,small clutches can very portable and look great with morning gowns and other kinds of party dresses. Most of these also come with an additional string or chain.So if you want your hands free,you can use to hand the purse from your shoulder.or opt for the Chanel Different watches.If you are looking for a bag which can accommodate a lot of items,then a wide range of calfskin and caviar leather chanel bags is your best choose. These are available in different sizes, small, medium and jumbo on the chanel bags online. Apart from, you also can select what hardware you want – silver or golden, and on some bags,and then the bag will change more inviting and fashionable. There are logos options available too.Even more and more design women likes to carry it go to in each kind of occasion.Such beautiful and luxuriant chanel bags,you should not pass up!

    ·

  33. bjanisupry Author Editor

    We and baeing all [url=http://www.chanelsalesonlineoutlet.com/]Chanel Bags[/url] know that a genuine Chanel Handbags – http://www.chanelsalesonlineoutlet.com/ designer [url=http://www.chanelsalesonlineoutlet.com/]Chanel Bags[/url] handbag is [url=http://www.chanelsalesonlineoutlet.com/]Chanel Bags Sale[/url] very expensive.[url=http://www.chanelsalesonlineoutlet.com/]Chanel Bags Sale[/url] One is for its materials. They use high quality leather or canvas which should be free of damage. The attached hardware such as the lock has the best quality.The second is for its workmanship. The seams of a real designer bags are actually sewn and not just glued together. High quality zippers, snaps and latches are also used. The lining is well made and sewn into place without wrinkles. The third is for its reputation. But a bag of more than a grand is still quite a strong pill for most ordinary people. However, there are some very well made replica handbags which cost much lower or even half price of the real one. In fact they are so well made that it may be tough for the untrained buyer to spot a replica bag.First, quality replica bags are made of the same leather and canvas that are used to make real designer bagsSecond, high quality replica bag has all of the marks of good workmanship that mentioned above.Third, you will also find the designer’s logo attached to the replica bags. In many cases, it will take a very well trained individual to tell whether or not the logo on your bag come from the original designer.Forth, a real designer bag has a production number stamped inside to assure that the bag is an original. It will let the buyers to know that the bag was made with caution. But you will also find a unique number inside the well-made replica bags. These bags were also made with care and caution,Messenger Chanel Black embellished flowers and used are an amazing design option for Spring season. Pink and red, dark and Mulberry coloring mixture are exceptional and bag and feminine bow details, without doubt include festive touch.

    ·

  34. ccwckvgjgx Author Editor

    and baeing Chanel Handbags [url=http://www.onlinechanelbagsales.com/]Chanel Bags[/url] have been verycommon right Chanel Bags Sale – http://www.onlinechanelbagsales.com/ since the time [url=http://www.onlinechanelbagsales.com/]Chanel Bags[/url] the brand [url=http://www.onlinechanelbagsales.com/]Chanel Online[/url] launched [url=http://www.onlinechanelbagsales.com/]Chanel Online[/url] its first range of handbags. Over the years, many celebrities from all around the world have been spotted flaunting a Chanel handbag. The colours, the designs, the textures, the materials, and just about everything that makes up a Chanel handbag speaks of style and class. Each handbag is crafted with so much of excellence, that it speaks volumes about the brand’s dedication towards the improvement in the world of design.Just about any bag from the Chanel brand is a masterpiece in itself. Luckily, for those who do not have access to a Chanel store in their nearby area, there is now an online purchase option available. The authentic Chanel bags can be selected online, and can then be delivered at your doorstep, giving you the luxury princess procedure of ordering things from the comfort of your own home.The official Chanel website has all its products available for you at just their lowest possible prices. This, the website explains is because, they source their bags and other products from their factories where the bulk production takes place. The stuff you buy from the brand’s own site will obviously be a hundred percent authentic Chanel. Now you do not have to worry about the creativity of the branded bags you purchase from all those distributors, retailers and multi brand online stores. Some of them might be trustworthy, but it is always better to opt for the official site for any brand when it comes to online shopping.The different discounts, season sales and offers on Chanel bags online are all listed on the site. So take the shortcut and register online officially to Chanel.

    ·

  35. Benedikt Ahlfeld Author Editor

    Nice Inputs, thanks!

    I am using a comments plugin (after they’ve been written) to redirect to an opt in page. works pretty well!

    ·

 

Build Internet by One Mighty Roar. Since 2008.