How to Add Comment Previews To Your WordPress Site Using jQuery

How to Add Comment Previews To Your WordPress Site Using jQuery

Adding a preview function to the comment section of your WordPress blog allows your readers to double check what they’re written before they actually post it.

A lot of folk might instinctively call this a useless feature, but I beg to differ. These are a few of the ways that comment previews can help to keep your WordPress blog a cleaner and happier place:

  • Very handy for writing HTML and code examples in a comment. The author can see whether their code is going to render properly, or look like a horrible twisted mess, BEFORE they hit the ‘reply’ button.
  • Saves your commenters’ precious time. A live preview will generally allow them to get it right the first time, avoiding the frustration of deleting their own comments and rewriting them two or three times.
  • Reduces the risk of pointless, idiotic flame wars. People might reconsider a hastily-written comment, if they can see a preview of their ranting before they release it to the world.

So how’s it done?

For the purposes of this tutorial, we’re using a little plugin called jQuery Comment Preview (tested on WordPress 3.3.1). This puppy adds a ‘preview’ button to the comment section of your WordPress site, and it’s powered by . . . you guessed it, jQuery.

There are a few other plugins that you could use to achieve a similar effect on your site – have a poke around in the WordPress Plugin Directory if you’re looking for something different.

jQuery Comment Preview in action

This is very straightforward stuff. Just install and activate the plugin, and it should work straight out of the box. On my test WordPress site with the Twenty Eleven theme, I now have a little ‘preview’ button in the top right corner of my comment box.
Preview comments on your WordPress site
Now I’ve written a comment with some code and formatting in it . . .
Use jQuery to preview the comments on your WordPress site
Before I post, I can hit the ‘preview’ button to make sure everything renders properly and I don’t sound like an ass.
Let your readers preview their WordPress comments before they post
And that’s all there is to it. A clean, simple way of letting your blog readers proof their own comments before they get posted. The plugin also offers some design customization options, which can be accessed in the ‘settings’ panel of your WordPress dashboard.

Have you used this plugin, or something similar, on your own WordPress site? What’s your opinion? Do previews help people make better comments? Leave a comment below and share your thoughts.

Photo: mag3737.