How to modify the comments to be displayed in a post?

Question

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

Answer 1

WordPress has own and very specific Ajax implementation, loading core for this is doing it wrong.

Start with reading AJAX in Plugins in Codex.