web2ajax : The Blog

A simple tip for wordpress blogs to hide oldest comments at single load page with jQuery.

For this tip, I suppose you already load jQuery JS framework in your blog.

In your wordpress theme directory, edit ‘comments.php’ and add the code below to to the end of the file :

<script type="text/javascript">
	jQuery(document).ready(function() {

		var $comment = $('#comment_list') ;
		var $comments = $comment.find('li') ;
		var num2display = 8 ; 

		// -- Hide all comments except 'num2display' newest
		$comments.slice(0, $comments.length - num2display).css({display:'none'}) ;

		// -- Create the 'Show all comments' link
		if ( $comments.length > num2display ) {
			$show_all = $('<p style="padding: 10px 20px; color:#005f90; font-size: 15px; text-decoration: underline; cursor: pointer; ">Click here to view the '+Math.max(0, $comments.length - num2display) +' other comments...</p>') ;

			// -- Bind click on link
			$show_all.click(function() {
				$comments.css({display:'block'}) ;
				$(this).remove() ;
			}) ;

			// -- Insert link to click after comments list
			$show_all.insertAfter($comment.find('ul')) ;
		}
	}) ;
</script>

Then, at load page, you will only have the 8 newest comments on your post and a link to show others.

Look at this blog for more examples and have fun with jQuery !