I would like to know how to modify the way wordpress displays the comments in a page. The requirement at hand is to display a certain number of comments in the comments list and while the the user scrolls to the bottom of the comments list (not on the page), a new set of comments will be appended to the comments list (if there are more comments to be displayed).
I have the following code to call the comments to be displayed:
<?php
require_once("../../../wp-config.php");
$page = $_GET['cpage'];
if(isset($page))
{
echo loadComments($page);
}
function loadComments($page=1)
{
global $wpdb;
$number=5;
$result='';
// get comments from WordPress database
$numRows = $wpdb->get_var("SELECT COUNT(*)
FROM $wpdb->comments
WHERE comment_approved = '1'
AND NOT (comment_type = 'pingback' OR comment_type = 'trackback')");
if ($numRows > $number)
{
$nav=1;
$pages=ceil($numRows/$number);
}
else {
$nav=0;
$pages=0;
}
$getnumber=$number*$page;
// get comments from WordPress database
$comments = $wpdb->get_results("SELECT * FROM $wpdb->comments
WHERE comment_approved = '1'
AND NOT (comment_type = 'pingback' OR comment_type = 'trackback')
ORDER BY comment_date_gmt ASC
LIMIT $getnumber");
$comments=array_slice($comments, $getnumber-$number, $number);
if ( $comments )
{
$count=1;
// display comments one by one
foreach ($comments as $comment)
{
if ($page <= $pages)
{
$result.= '<li id="comment-'.$comment->comment_ID.'" class="leftcolumn"><div class="commenttext"><div style="padding:20px 0 0 10px;"><img src="/wp-content/themes/twentyten/images/headers/ImgQuotationMarkOpen.gif" alt="" title="" class="openarrow" />'.
'</div><div style="padding:0 10px 0 40px;"><p>'.$comment->comment_content.'</p></div>'.
'<div style="padding:0 10px 0 0; text-align:right;"><img src="/wp-content/themes/twentyten/images/headers/ImgQuotationMarkClose.gif" alt="" title="" style="border:0;" class="closearrow"/></div>'.
'</div></li>'.'<li class="middlecolumn"><img src="/wp-content/themes/twentyten/images/headers/ImgBubbleTopRight.gif" class="pointerarrow" /></li>'.
'<li class="rightcolumn" id='.$comment->comment_ID.'">'.'<div style="padding:25px 0 0 10px; line-height:10px;" class="commenttextright">'.
'<span class="author" style="text-decoration:none;">'.$comment->comment_author.'</span><div style="height:5px;"></div>'.
'<span style="font-family:Arial; font-size:12px;">'.mysql2date('j-n-Y',$comment->comment_date).'</span>'.
'</div></li><div style="clear:both;"></div><div style="height:10px;"></div>'.
'<div style="height:1px; border-bottom:1px dashed #3e3e3e;"></div><div style="height:10px;"></div>';
$count++;
}
else
{
$result = '';
}
}
}
return $result;
}
?>
and this is the ajax call to append a new set of comments:
function updatestatus(){
//Show number of loaded items
var totalItems=$('.commentlist li div.commenttext').length;
$('#status').text('Loaded '+totalItems+' Items');
}
function scrollalert(){
var scrolltop=$('.commentlist').attr('scrollTop');
var scrollheight=$('.commentlist').attr('scrollHeight'); //825
var windowheight=$('.commentlist').attr('clientHeight'); //600
var scrolloffset=20;
//alert(scrolltop);
if(scrolltop >= (scrollheight - (windowheight + scrolloffset)))
{
//fetch new items
if (count > 0 )
{
count++;
$('#status').text('Loading more items...');
$.get('/wp-content/themes/twentyten/commentloader.php?cpage='+count, '', function(newitems){
if (newitems != '')
{
$('.commentlist').append(newitems);
updatestatus();
}
else
{
// prevent from appending content
count = -1;
}
});
}
else
{
$('#status').text('No more items to load...');
}
}
setTimeout('scrollalert();', 1500);
}
I tried adding the two files inside the themes folder and adding a reference to header.php for js file. This works but I have to set paging on for the comments and hide the navigation. If you could provide a better way to achieve (may be create a plugin?) I will greatly appreciate it. I am new to WordPress and will be delighted if you'll lead me to the right direction.
Thanks, RNorbe