How to Add Live Comment Preview to Comment Textarea without Plugin

21st Mar 2011 | Posted by reza | 21 Comments

The comment live preview feature helps the comment writer to see what they are writing in the comment form as they write. This feature works well to help prevent errors in spelling and grammar by giving the user a chance to see what they are writing before they post their comment.

Seeing a preview of your comment gives the user a second chance to change his or her mind. This can also give them a second chance to reword their comment, if they are responding out of emotion rather than logic and kindness.

It also helps when the discussion involves programming code. If the user can see whether or not their < php code(); ? > will appear in the comment or turn to mush and jumble. It can prevent two and three attempts to post the code, with a lot of apologizing and frustration on their part and yours when you find all the attempts to post the comment.

There are plugins to add this feature to your WordPress site, but many says using too many plugin is not recommended. This simple tutorial will help You add the feature without those plugins.

The tutorial will only use jQuery function and css styling to add the feature.

How to

• First we need to integrated jQuery to our theme
  add this code to header.php file, right before wp_head(); 

  <?php wp_enqueue_script('jquery'); ?>
  

• Secondly, add this script right before < / head > , also in the header.php 

  
  <?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 } ?>
  

• And last, styling live comment preview. 

  We can style the feature using ID #comment-preview and #preview-title”.

  Add these codes to you style.css

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

  Or You can style the feature with your own taste, using those two ID

Now, your comment has a nice live comment preview feature.

Preview

You can see the demo here: DEMO

Hope this tutorial helps.

Credit: http://lorelle.wordpress.com

Want to be emailed when new comments are added?