Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

jQuery Comment Preview WordPress Plugin

jQuery Comment Preview WordPress Plugin allows the live comment preview without page reboot. It works on jQuery.

Requires WordPress version: 2.9 or higher.

You can see an example on a current site.

Plugin features

  • Live comment preview, which does not take that extra space on the page.
  • Simple HTML-editor (instructions on using the editor are on the plugin options page).
  • You can customize comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
  • You may don’t connect plugin’s CSS file (optional) if you wish to reduce number of queries to your server.
  • Plugin’s JS and CSS files are connected only on the pages with comment form.


Attention: knowledge of CSS and HTML may require for using a plugin.

jQuery Comment Preview WordPress Plugin

Version: 0.6 / Last updated: 2013-06-06


  1. Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
  3. If it’s necessary, you can customize options in admin interface at the Options → jQuery Comment Preview page.
  4. If it’s necessary, you can edit CSS styles for comment preview block in the jquery-comment-preview.css file.
  5. That’s all.

HTML code of preview block

The plugin creates the following structure of HTML code for the preview block (this may be useful in the design through CSS):

<div id="jcpWrap">
  <div id="jcpToolbar">
    <div id="htmlEditor">
    <div id="previewTab">Preview</div>
  <textarea name="comment"></textarea>

If nothing works

  1. Make sure that you use the appropriate version of WordPress, which is required for a plugin work.
  2. Make sure that the header.php file of your theme has the following code:

    <?php wp_head(); ?>

    If not, insert it before the tag.

  3. If the first 2 points are not solved the problem, give details in comments to this post.

Version history

  • Version 0.6 (2013-06-06):
    • now the plugin connects jQuery bundled with WordPress;
    • script now supports jQuery 1.9 and higher.
  • Version 0.5.1 (2013-02-04):
    • fixed: plugin did not worked when WP_DEBUG was enabled.
  • Version 0.5 (2011-09-10):
    • now if there is no selected text while inserting the URL, then a link itself becomes an anchor;
    • added ability to insert a link to an image through a dialog box.
  • Version 0.4 (2011-03-19):
    • optimized jQuery script;
    • changed the names of identifiers of blocks, made appropriate changes in the CSS file;
    • fixed a bug when using the single quote in the translation file and in the template of preview block;
    • changed the default template of preview block;
    • the tag now cuts from the template of preview block;
    • modified the path to the jquery-comment-preview.js file;
    • minimized the md5.js file.
  • Version 0.3 (2010-09-23):
    • this version works on WordPress 2.9 or higher;
    • fixed: plugin did not worked, if “WordPress address” and “Blog address” differed;
    • now you can use single quotes in the text of preview button;
    • added the “About the plugin” button;
    • optimized the system of settings.
  • Version 0.2 (05.02.10):
    • text links in the preview now are clickable;
    • new option: ‘Add the target=”_blank” parameter to external links’;
    • new option: ‘Show button with WordPress smilies’ – uses build-in WordPress smiles;
    • added French localization (thanks to Wolforg).
  • Version 0.1.7 (03.18.10):
    • solved the problem, when preview did not work until the “Update Options” button not been pressed on a plugin options page;
    • jQuery 1.4.2 is now connected instead of jQuery 1.3.2.
  • Version 0.1.6 (01.05.10):
    • solved the problem, when a tags have been inserted incorrectly in Internet Explorer when using the HTML editor;
    • adding a link now works like in WordPress HTML editor – when ‘link’ button is clicked, there appear a window for entering a URL.
  • Version 0.1.5 (12.20.09):
    • the design of preview panel has been changed. Now it looks like WordPress HTML editor;
    • the structure of the template of the HTML editor has been changed;
    • the script connects now to the name parameter of the textarea tag, but not to id;
    • solved the problem, when in some cases preview did not work;
    • the plugin’s JS and CSS files connects now in the head section of the page code;
    • jQuery now comes from Google.
  • Version 0.1.4 (06.20.09):
    • added ability to indicate the value of the id acoderibute of the textarea tag;
    • added ability to insert comment date and time in preview block template;
    • added the option for displaying avatars from gravatar.com.
  • Version 0.1.3 (02.07.09):
    • fine-tuned filters of text formacodeing in preview;
    • deleted automatic ficodeing the width of the preview panel under width of a

© 2009–2014 Dimox.net  •  Privacy Policy