wordpress comment preview for box comment without plugin

Showing wordpress comment preview for comment box is always good for attracting the visitors. I shown code here for show the comments preview.

wordpress comment preview for comment box

Many times comments preview will be useful for visitors to see how comments will be looking. Using google Jquery or wordpress jquery you can add the comment preview to your wordpress blog. Showing comment preview is always good for attracting the visitors. Many clients demands for this. I shown you the example code over here for show the comments preview.

In this tutorial I am using the wordpress inbuild jquery.  First open your header. php file from your theme folder and after head tag following code.

<?php wp_enqueue_script(</code><code>'jquery'</code><code>); ?>
<?php if (is_single()) { ?>

<script type="text/javascript">

jQuery(document).ready(function(){

	jQuery("").add("<h3 id='preview-title'>Comment Preview</h3><div id='comment-preview'></div>").appendTo(document.body);
	jQuery("#comment-preview, #preview-title").insertAfter("#comment");

	var $comment = '';
	jQuery('#comment').keyup(function() {
		$comment = jQuery(this).val();
		$comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
		jQuery('#comment-preview').html( $comment );
	});

});

</script>
<?php } ?>

Then Open Your style.css file from your theme folder put the following code in that file.

#comment-preview {
	border: 1px solid #ccc;
	padding: 5px 15px 15px 15px;
	}
h3#preview-title {
	margin-bottom: 5px
	}

After that upload the modified files on server. you will see following functionality for your wordpress commnets section.

If you are not wordpress developer then please dont try this.