How to Add Live Comment Preview to Comment Textarea without Plugin

21st Mar 2011 | Posted by reza | 26 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

19 Comments to “How to Add Live Comment Preview to Comment Textarea without Plugin”

Add Comments (+)

Sascha says:

March 26, 2011 at 10:43

Hi,
first of all, thank you for the great tutorial. Unfortunately theres an error when im doing it the way its explained here. Maybe you could have a look at my site (http://www.biggaa.de). At the moment its under construction and its my own theme.

Thanks and greetings from Germany!

Reply
Sascha says:

March 26, 2011 at 12:10

Solved the problem. I had to change “.appendTo(document.body);” to “.appendTo(document.main);”.

Reply
- reza says:
  
  March 27, 2011 at 17:07
  
  glad it’s solved but, what’s the error actually?
  
  Reply
  - Sascha says:
    
    March 28, 2011 at 14:20
    
    I’m afraid to take that back. Since I had changed this part it didn’t work at all. Thus I had to remove it. The error: When one is on the ” Home ” page, you can see the preview field in the background, just like I would have put it between the div tags in the header.php. But that’s not the case.
- reza says:
  
  March 28, 2011 at 23:41
  
  thanks for the precious feedback
  
  replace the code above with:
```
<?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 } ?>
```
  Reply
  - Sascha says:
    
    March 29, 2011 at 01:35
    
    It worked! So the if command did it, didn’t it? Thanks for the great help.
- reza says:
  
  March 29, 2011 at 03:11
  
  yeah, the if command did it
  
  thanks to your feedback, now I have to edit the tutorial
  
  Reply
  - Joan says:
    
    April 15, 2011 at 18:33
    
    Thank you, i implemented on my site :).
    
    Any idea for parsing the default wordpress shortcodes and smileys?
Think360 Studio - Web Design Company India says:

May 9, 2011 at 03:25

Thank you very much… It is very useful to me…!!

Reply
atozvision says:

May 24, 2011 at 14:04

very important tips form me. I’m trying this in my site.

Reply
Jay Boom says:

September 30, 2011 at 04:44

Good tutorial, thank you. I bookmarked your site for future use.

Reply
Jay Boom says:

September 30, 2011 at 06:10

Nice article, been searching for it and finally I found it. Great job, your a big help.

Reply
Ben Landen says:

October 2, 2011 at 07:41

excellent job..keep posting..thanks

Reply
joseph says:

November 17, 2011 at 04:32

Nice plug in.
Is there a way the plugin can publish the comments immediately the user clicks the post button and the comments can be categorized when posting e.g for buyers,sellers etc such that if am a seller i just need to go to the seller tab and post my comments there and same for a buyer or even an all section where all comments can appear and also maybe have a search box for searching the posted comments.
The image linked below shows what am talking about
http://farm7.static.flickr.com/6218/6351664270_27b100de66_z.jpg
Your response will be of great help.
Joseph.

Reply
Encinitas Handyman says:

April 9, 2012 at 14:06

That’s super cool. I never thought that it was possible by just using some php through jquery. I’ve seen plenty of plugins that do this, but it seems like a bloated way to accomplish what you’ve come up with that works very cleanly. I’m definitely going to use this on a couple of my blogs. Thanks.

Reply
strangerrj says:

March 21, 2013 at 12:38

Hello and thank you for the very good plugin. It is very good and runs smoothly.

Cheers

Reply
Vincent says:

March 30, 2013 at 12:26

Hi to all, how is all, I think every one is getting more from this website, and your views are good in support of new viewers.

Reply
Dubai Website Design says:

April 8, 2013 at 00:37

Great and very knowledgeable post. explanation of preview comment is amazing you have define.

Reply
Judy says:

April 28, 2013 at 14:28

Because the admin of this web site is working, no question very quickly it will be renowned, due to its feature contents.

Reply