1

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

1 Answer 1

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.

2
  • 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, 2011 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, 2011 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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