John Wang

Custom CSS Styling for Post Authors are really nice. It’s a great way to differentiate the author’s comments from other readers’ comments, in addition to threaded comments. The problem with the threaded comments, is that other readers may also write response comments which should be threaded to maintain conversational aspect. So styling helps much more.

Disqus is a wonderful commenting system. I was introduced to it by reading Louis Gray’s blog from FriendFeed. Since using Disqus, I have found it to be a very great network. Disqus provides many features including:

• Threaded comments and comment ratings
• moderation and admin tools
• spam filters

There are tons of WordPress comment hacks to do custom CSS styling for Author’s comments. I have listed some at the bottom of the post. There’s even plug-ins that will style author comments. Unfortunately, Disqus does not offer up any solution to this. And after posting on the Disqus forums, I got no response for this feature. But, Disqus does offer some Custom CSS for comments.

Out of the Box

Disqus actually does give us quite a bit of customization options. We are able to customize:

• The box where a post is typed into
• The form elements (Name, Email, Website).
• The submit button “Post”.
• The main wrapper for the comment system.
• “Add New Comment” and “# Comments” are enclosed in <h3> tags.
• The toggle button for the thread options.
• The links within the thread Options
• The entire comment thread list.
• A single comment in the thread.
• The comment rating arrows for posts.
• The header at the top of comment posts.
• The avatar image for the registered user.
• This is the meta information about the post (time stamp and points).
• The message body of a single comment post.
• The footer contains the link to “reply.”
• This contains and determines the style for the pagination links.

The Problem

As you can see, this is a lot of customizing power. Unfortunately, none of them is related to the blog post’s author.

The Solution: Hack the Planet!

We are going to modify the official Disqus WordPress Plug-in. The files being modified are: comments.php and disqus.php Note: We are also making the assumption that authors will use the same e-mail address to write posts and comments. This is generally true for most users.

Identifying the Post Author

First we need to find the post’s author. We could just hardcode the email address, but this does not help multi-author websites. To find the author’s email address we need to go into diqus.php

Inside disqus.php there is a function called: dsq_comments_template
Here we are going to add a global variable called $author_email and set it to $author_email = get_the_author_email();

Here’s the full function code:

function dsq_comments_template($value) {
global $dsq_response;
global $dsq_sort;
global $dsq_api;
global $post;
global $author_email; // Added by John Wang

if ( ! (is_single() || is_page() || $withcomments) ) {
return;
}

if ( !dsq_can_replace() ) {
return $value;
}

if ( dsq_legacy_mode() ) {
return dirname(__FILE__) . '/comments-legacy.php';
}

$author_email = get_the_author_email(); // Added by John Wang

$permalink = get_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();

$dsq_sort = get_option('disqus_sort');
if ( is_numeric($_COOKIE['disqus_sort']) ) {
$dsq_sort = $_COOKIE['disqus_sort'];
}
if ( is_numeric($_GET['dsq_sort']) ) {
setcookie('disqus_sort', $_GET['dsq_sort']);
$dsq_sort = $_GET['dsq_sort'];
}

// Call "get_thread" API method.
$dsq_response = $dsq_api->get_thread($post, $permalink, $title, $excerpt);
if( $dsq_response < 0 ) {
return false;
}
// Sync comments with database.
dsq_sync_comments($post, $dsq_response['posts']);

// TODO: If a disqus-comments.php is found in the current template's
// path, use that instead of the default bundled comments.php
//return TEMPLATEPATH . '/disqus-comments.php';

return dirname(__FILE__) . '/comments.php';

}

Identifying the Author’s Comments

Now we know the blog post’s author. Off to comments.php
Inside of comments.php, the first thing we need to do is add $author_email to the list of globals.

<?phpglobal $dsq_response, $dsq_sort,$author_email; // Added author_email variable!
$site_url = get_option('siteurl');
?>

Once that’s done, we need to find the comments and figure out if any of the comments were written by the post author. To do this, we’ll be using the Disqus array $comment['user']['email']. This gives us the current comment’s author’s email address. We’ll be comparing that to our global variable $author_email.  On line 131 of comments.php we add the PHP if condition: if ($comment['user']['email'] == $author_email ).The complete line now looks like this:

<div class="dsq-comment-body <?php if ($comment['user']['email'] == $author_email ) echo ("-author\"")?> ">

The same change can be made for the class dsq-comment-header on line 82, dsq-header-avatar on line 83, and dsq-comment-footer on line 154.

It’s Styling Time!

Styling author’s comments

Here’s the easy part. All you need to do now is add the CSS code to your WordPress Theme for the appropriate classes. For example. This would change the background color for the author’s comment.

/*    Disqus CSS for Author Comments. Margin and Padding is set to be the same as other comments    */
#dsq-content #dsq-comments .dsq-comment-body-author {
	margin-left: 20px;
	padding-top: 5px;
	background: #e2fddc;

The Results

Here’s what an author’s comment would look like now with a reader’s comment.

Download the complete modified plug-in..

Further Reading:

• Weekend Tip: Author Comment Styling In WordPress – NETTUTS
• How-to style WordPress author comments – Derek Punsalan – 5ThirtyOne
• WordPress How-To: Styling Author Comments | Spoonfed Design
• DISQUS | Custom CSS

Do you style your author’s comments? Do you use something other than Disqus? Any feedback?

Update from Disqus.com

• 

Daniel Ha (danielha)

@jwang392 Cool writeup – we also have a special class for authors as .special or .dsq-moderator that you can do this with