Live Preview For Comments in Wordpress

I added live preview to the comments today. It is actually quite simple. I use two functions in javascript. First, I added the following lines to wp-comments.php. I added them before the submit button, but you can put them wherever you would like the live preview to show on your page.

1. <div id="live-preview">
2. <div id="previewName"></div>
3. <div id="previewComment"></div>
4. </div>

Next, I included the following javascript functions in the head of my main wordpress page. If you didn't modify your wordpress install, your main page is index.php. My main page is articles.php.

1. <script type="text/javascript">
2. <!--//
3. function previewComment() {
4. var commentValue = document.getElementById("comment").value;
5. newText = commentValue.split(/\n/).join("<br />");
6. var commentObj = document.getElementById("previewComment");
7. commentObj.innerHTML = newText;
8. }
10. function previewName() {
11. var author = document.getElementById("author").value;
12. var urlLink = document.getElementById("url").value;
13. if (urlLink != '') {
14. var text = '<h3><a href="' + urlLink + '">' + author + '</a> says:</h3>';
15. } else {
16. var text = '<h3>' + author + ' says:</h3>';
17. }
18. var nameObj = document.getElementById("previewName");
19. nameObj.innerHTML = text;
20. }
21. //-->
22. </script>

Lastly, I added a few onkeyup events to the comment form textarea and input boxes that use the live preview.

1. <textarea name="comment" id="comment" cols="30" rows="10" tabindex="1" onkeyup="previewComment(); previewName();"></textarea>
3. <input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="2" onkeyup="previewName();" />
5. <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="4" onkeyup="previewName();" />

Replace the above lines in your wp-comments.php and you should be good to go. In conclusion, first add the empty divs which will hold the live preview text. Second, include the javascript functions in the head of your main wordpress file. Lastly, add the onkeyup events to the appropriate comment form fields.

The key to this working is following the aforementioned steps and making sure that all the id's (of the inputs, textarea, preview divs) are the same as the id's in the javascript functions. To see the live preview in action check out the comment form below.

Update: I’m not using this for my comments anymore as I upgraded to 1.5 and just installed a plug-in.