Creating a Better Wordpress Comment Section

Josh — Sun, 27 Jan 2008 19:48:40 +0000

One of the main reasons for the popularity of blogs is the ability for the reader to interact with the author via the “comment section.” However most blogs tend to ignore or put little effort into the design and usability of the comment section. I’ve seen a lot of blogs complain about the lack of comments they get. I believe that if you put as much thought and effort into your comments system as the rest of your blog than you’ll be pleasantly surprised at the amount of comment traffic you get.

With that said, in this article you’ll find examples of good comment sections, a list of tips and guidelines for creating a usable and beautiful comment section and then some additional articles and plugins to help you out.

Ten Ways to Improve Your Comment Section

If you want the conversation to flow and read easy, don’t break up the comments with harsh boxes or colors. Use a monochrome color scheme and light lines
Separate the user data from the actual comment. Most people really don’t care who wrote the comment they just want to be able to scan the thread quickly and easily. Placing the user data to one side improves the flow and readability.
If your commenter’s tend to write a lot, consider using a serif font as it improves readability.
Unless your site is focused on design its probably better to have a simpler comment section without a lot of graphics. This will also speed up your load times.
Number your comments so that they can be easily referred to in the thread.
Use coloring to emphasize or deemphasize elements. For example the date and time of the comment is probably the least important so make it a color that is close to the background color. It will blend in and draw the reader’s attention to the actual comment.
Consider the line height. Make sure that that lines of text are not crammed together. Increasing the line height alone can do wonders for the readability.
Consider styling the author’s comments differently. Often I’ll be reading a comment thread where a user poses a question to the author that I’m interested in. If the author has styled his or her comments its very easy to find their answer. This is especially useful in long threads.
Separate the trackbacks from the actual comments. Nothing is more frustrating while looking for valuable input on subject than to see this in the middle of the thread…multiple times.
[...some ridiculous line and link to some website who thought this was interesting information...]

I’ve posted a link to good tutorial on how to do this at end of the article.
Number 10 is to implore you to put some thought into the comment section and make the experience for your users an interactive and positive one!

Comment Section Inspiration

Here’s a look at some existing comment sections on some high profile websites that get a lot of comments. I’ve divided them up stylistically.

Visually Interesting

Web Designer Wall
There are small details everywhere that make this comment section fun to look at and interact with.

Veerle’s Blog
This is a good example of someone spending the same amount of time integrating the comment section with the look and feel of the rest of the site.

Jonathan Snook
Snook’s site has one of the best author styles I’ve ever seen.

Hicksdesign
Very innovative visually with the speech bubbles. The speaking/volume icon was confusing however (I thought it was an RSS button)

Clean and Modern

Freelance Switch
The clean lines are very visually appealing and they integrate gravatars very well.

Joshua Blankenship
Consistent and even spacing make the whole thread very easy to follow and read.

Pro Blogger
Great use of space and typography.

Minimalistic

Shaun Inman
Notice how the comment is on the left side of the user information which allows the reader to see the comment first since our natural flow of reading is left to right (unless you read Hebrew…)

31Three
This is the comment section that initially inspired the one you see here on Pressing Pixels. The user data is separated away from the actual comment which makes the thread much easier to follow.

Comfortable and Casual Conversation

Jason Santa Maria
This is one of my favorite comment sections because it makes me feel like I’m in a warmly lit room and I’ve plopped down into a bean bag with a good book. Great use of typography, color and images.

Some Good Comment Tutorials

How to Style Wordpress Author Comments
Separating Trackbacks from Comments on Your Wordpress Blog
Using Gravatars in Wordpress

A Few Good Comment Plugins

Adding Gravatars to Your Comments (the easy way)
Subscribe to Comments

Pressing Pixels » Frontend