How To: Live Comments Preview

October 13, 2006 § 6 Comments


Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This week’s episode is about adding a more pleasing behavior to the Comments section of your WordPress blog. We’ve added the following functionality:

  • Live Preview – Some sites have preview buttons on their comment forms, but this will allow you to see a preview as you type
  • AJAX Submit – A simple but effective use for AJAX is to submit the comment in the background
  • Quick Tags – Add configurable shortcut buttons for basic HTML formatting in your comment box.
  • Smileys – Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings.
  • Gravatars – Show users’ Globally Recognized Avatar with local caching option

Most of this functionality is as simple as dropping in a plug-in!

Want to see it in action? Go to the bottom of this page and comment away – we use every one of these features.

Live Comment Preview

[live comment]

Occasionally, I run across a blog that has this neat feature: as you type your comment a preview section instantly displays what your comment will look like.

Always trying to shortcut real work by downloading a ready-made plug-in, I went through at least four offerings before finding an excellent bit of code by John Nunemaker.

It’s not a plug-in, so you’ll have to make minor edits to your PHP code, but it works amazingly well.

Before stumbling across John’s code, I tried the following. I’m listing them to possibly save you time (in either finding them or avoiding them – your choice):

Then you need to add code to the comments.php file that will make use of this script:

Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on, I recommend placing this box between the login block and the input box – this helps readers notice the preview.

AJAX Submit

Plug-in: AJAX Comments v2.07
Author: Mike Smulling

Give users some instant feedback by adding AJAX behavior. When they press Submit, rather than waiting to reload the entire page, AJAX scripting is used to perform the task in the background. They’ll see the following graphic while they wait… [download]

Submitting Comment…

Quick Tags

Plug-in: LMB^Box Comment Quicktags v2.4
Author: Thomas Montague

Add configurable shortcut buttons for basic HTML formatting in your comment box. [download]


Plug-in: LMB^Box Smileys v3.2
Author: Thomas Montague

Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings. [download]


Plug-in: Gravatars v.2.6
Author: Scott Merrill

Show users’ Globally Recognized Avatar (see my local gravatar on the right). The plug-in will automatically lookup the users Gravatar and display the image next to their comments. To improve performance, the gravatar is cached on your site after the first load.

You can define a default gravatar for users without one, and users can optionally define a local version. [download]


§ 6 Responses to How To: Live Comments Preview

  • Joe says:

    BTW, if you haven’t already added features like author highlighting and alternating comment colors, and don’t want to start from scratch, visit Christian Montoya’s site for a ready-made comments template.

  • Montoya says:

    This looks great, you’ve put together some really nice features here. :flush_tb: I especially like the smileys. :grin2_ee:

  • Joe says:

    Thank you, sir!

    Yeah, smileys are kindof like when Windows 3.0 came on the scene and everyone at work was spending an hour a day customizing screen colors and icons. We did it till we were sick

    Cuz it was cool

    Our wifes thought it was silly

    Bosses were mad and told us to stop

    Till we came in one day pretending to work for the post office

  • Joe says:

    In reviewing current plug-ins and what could help speed up the server, I dropped smilies…

  • sbseosbseo says:

    We have just received reports that a group of people were allowed in to fish Squaw.They were not TXU employees why were they allowed in?????????

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading How To: Live Comments Preview at VibeTalk by Vibe Technology.


%d bloggers like this: