Adding Live Preview For Comments

If you scroll down you will see a live preview option for comments. Just try it out by typing in a comment. Pretty cool, huh!?

A friend asked me why this was useful and why anyone will want to see their comment twice?

My answer: If your comment is pretty long, the textarea will start to scroll and you won’t be able to look at your entire comment in on go. The preview on the other hand shows the comment in its entirety. This way you can see how it looks and proof read with ease before you post.

I have gotten this technique from the Rockatee Blog. So a big thank you to Maleika.

1. First things first. You need to download jQuery. Lets just name it jquery.js and place it in your theme folder.
2. Next download this file and place it in your theme folder.
3. Now open header.php from your theme and add these lines in the head area:

   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/preview.js"></script>

4. Last step is to add the following code to you comments.php file wherever you want the live preview to show up.

   <div class="comment-preview"> <h3>My Comment Preview</h3> <p class="live-preview">Add some instructions - this text will get replaced by the comment preview.</p> </div>

5. You can use the class p.live-preview to style the live comment preview.

See that was simple and you have your own comment live preview.