WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:


$page = $_GET['cpage'];
    echo loadComments($page);                          

function loadComments($page=1)
    global $wpdb;   


    // 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)
    else {


    // 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 )

        // 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>';           

            $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;
    if(scrolltop >= (scrollheight - (windowheight + scrolloffset)))
        //fetch new items
        if (count > 0 )
            $('#status').text('Loading more items...');
            $.get('/wp-content/themes/twentyten/commentloader.php?cpage='+count, '', function(newitems){           
                if (newitems != '')
                    // prevent from appending content
                    count = -1;
            $('#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

share|improve this question

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

Start with reading AJAX in Plugins in Codex.

share|improve this answer
Thanks I'm reading this now. Do you know of any other links that has a how-to guide on how to create plugins? – Newbie Jul 4 '11 at 11:39
@Newbie there are quiet a few links at the end of that article for further reading. And of course you can ask new question later if you have issues implementing what you want. – Rarst Jul 4 '11 at 12:15

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.