WordPress Comments System YUI + YUI-EXT (tribute to Jack Slocum)

January 18th, 2007 by sigurd · PHP AJAX

First of all I'd like to say that all you see here is idea and implementation of Jack Slocum. I just make some fixes into design and add some hacks into WP. Thank you Jack for developing YUIEXT and for your contribution to open source.

The idea of comment system is quite easy. Every wordpress post consists of blocks. Why people should leave comments below post, when each block can be comment separately. In addition simple dialogs can be used for leaving comments which is more users friendly. After publishing his work Jack got over 2000 comments to his post. People just want to see – how it works :) But it was not available for community so I decided to change this :)

/** * Copyright 2006 Jack Slocum * Want to use this code on your site? Of course you can! * This code, like all code on http://www.jackslocum.com/ is * free to modify and distribute as you wish. * http://www.opensource.org/licenses/bsd-license.php */

The implementation of this comment system is pretty easy. It consists of two main objects – Cblock and Commentable. Cblock cares about storing info and comments for given block, Commentable handles all other routines such as creating list of blocks.
For using this comment system WordPress should be hacked a bit.

First of all database need to be tuned so it can store comment block id in addition to post id. For this we need to modify comments table.

ALTER TABLE `wp_comments` ADD `comment_content_index` INT(11) UNSIGNED NOT NULL DEFAULT '0'; ALTER TABLE `wp_comments` ADD INDEX (`comment_content_index`);

Note that in your WordPress table can have different name depending on prefix. Now we can store block information but wordpress don't know how to do it. So wp-includes/comment-functions.php need to be modified.
In line 81:

$result = $wpdb->query("INSERT INTO $wpdb->comments (comment_post_ID, comment_author, comment_author_email, comment_author_url, comment_author_IP, comment_date, comment_date_gmt, comment_content, comment_approved, comment_agent, comment_type, comment_parent, user_id) VALUES ('$comment_post_ID', '$comment_author', '$comment_author_email', '$comment_author_url', '$comment_author_IP', '$comment_date', '$comment_date_gmt', '$comment_content', '$comment_approved', '$comment_agent', '$comment_type', '$comment_parent', '$user_id')");

Should be replaced by:

$result = $wpdb->query("INSERT INTO $wpdb->comments (comment_post_ID, comment_author, comment_author_email, comment_author_url, comment_author_IP, comment_date, comment_date_gmt, comment_content, comment_approved, comment_agent, comment_type, comment_parent, user_id, comment_content_index) VALUES ('$comment_post_ID', '$comment_author', '$comment_author_email', '$comment_author_url', '$comment_author_IP', '$comment_date', '$comment_date_gmt', '$comment_content', '$comment_approved', '$comment_agent', '$comment_type', '$comment_parent', '$user_id', '$comment_content_index')");

The next changed file will be wp-comments-post.php for sending proper value for saving and return comment instead redirect, so comment you post will appear on page without refreshing it.
Below line 24 add:

$comment_content_index = (int)$_POST['contentIndex'];

Line 50 from:

$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID');

Change to:

$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID', 'comment_content_index');

And finally replace all below line 61 by:

$comment = get_comment($comment_id);?> <li id="comment-<?php comment_ID() ?>"> <div class="cheader"> <div class="cuser" /> <div class="commentmetadata">at <span title="Select Block" class="csel">&nbsp;</span></div> </div> </li>

Omit any line breaks in HTML because your comment will not display properly after adding. The next and the final change applies to output. In original WordPress blocks are identified by tag. In Jack's blog blocks are identified with div tag, so after some experiments I decided do not change it.
In file wp-includes/template-functions-post.php in function the_content under:

$content = str_replace(']]>', ']]&gt;', $content);

add:

$content = str_replace('<blockquote>', '<div class="content"><blockquote>', $content); $content = str_replace('</blockquote>', '</blockquote></div>', $content); $content = str_replace('<p>', '<div class="content">', $content); $content = str_replace('</p>', '</div>', $content);

This replacement also can be done via plugin using the_content filter. That's all WordPress code modifications. All others regards to theme. Main changes should be made in single.php (or page.php depending on theme). General HTML structure to make comment system work should be like below so it can be applied to any theme.

...... <div class="comments-enabled" id="content"> <div class="content">Heading ...</div> ... <div class="content">Block 1</div> <div class="content">Block 2</div> ...</div> ...

The changes to comments.php are too big for providing them here. There are another files which should be added to wordpress such as styles, images, javascript, YUI and YUI-EXT. Anyway I pack it together with YUI and YUI-EXT using default wordpress theme. Just install and it's ready to use. Of course it need some customization to make theme look as you wish. If you have some questions just ask them in comments or send me to email: sigurd at phpvoid.com.

Screenshot

PS: I used yui-ext.0.40-alpha because Jack add some nice themes there such as Vista and WordPress 2.0.6
PSS: Thanks to Jack Slocum again :)

Download WordPress with Comment System YUI+YUIEXT