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).
  • Ability to insert tags with the following brackets types: <>, [], {}, (). Just change the brackets for the button tag in the code of editor’s buttons.
  • 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: 1.1.1 / Last updated: 2015-11-17


  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 class="jcp-container">
	<div class="jcp-toolbar">
		<div class="jcp-html-editor">
		<a class="jcp-preview-tab">Preview</a>
	<textarea name="comment"></textarea>
	<div class="jcp-preview"></div>

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 </head> tag.

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

Version history

  • Version 1.1.1 (2015-11-17):
    • smilies are fixed.
  • Version 1.1 (2015-04-19):
    • code in preview now formatted with the built-in WordPress function wpautop() via ajax-request;
    • CSS file and JS files are now connected via provided WordPress functions;
    • added option: connect JS files before the </head> or before the </body> tag;
    • added option, where you can specify the tags used by third-party plugins for syntax highlighting.
  • Version 1.0 (2015-03-28):
    • optimized jQuery script;
    • changed the structure of HTML code, id’s replaced with classes;
    • added the ability to insert tags with the following brackets types: [], {}, ().
  • 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 <script></script> 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 <textarea> field, now need to change its width through CSS, for this you need to play once with the width parameter of #jquery-comment-wrap and #jquery-comment-preview identifiers, which are in the jquery-comment-preview.css file.
  • Version 0.1.2 (12.19.08): the changes associated with incorrect display of the comment form in Internet Explorer on some WordPress themes.
  • Version 0.1.1 (12.17.08): fixed bug: the comment can not be submited.
  • Version 0.1 (12.16.08): the initial version.

Cоmmеnts (194):
  1. 1

    i like it

  2. 2

    Hey there. http://cl.ly/B6O6 this is my problem. Used to work… any ideas what happened?

  3. 7
    japanworm said:

    Hello again.
    I’ve been using this plugin for a while now and I really like it.
    I only have one really tiny issue with it.
    As you have to set the “name” tag of the “textarea” which is “comment” in most cases, the preview/hide bar also displays in my contact form of my contact.php as that also uses ‘name=”comment” for the textarea. Changing that name results in my contact-form not working properly anymore.
    That’s why I wanted to ask if there’s another way to assign the toolbar to the comment-form textarea only? E.g. instead of using the name=”” option, maybe id= or something? Or maybe via a special class=?

  4. 10

    Nice plug in.
    Is there a way the plugin can publish the comments immediately the user clicks the post button and the comments can be categorized when posting e.g for buyers,sellers etc such that if am a seller i just need to go to the seller tab and post my comments there and same for a buyer or even an all section where all comments can appear and also maybe have a search box for searching the posted comments.
    The image linked below shows what am talking about
    Your response will be of great help.

  5. 13
    japanworm said:

    Hello again.
    I’m sorry that I have to bother you again. I’m not even sure if this is a particular problem with your plugin or not.

    I added some more buttons for font-size and “underlined” text.
    It works fine, however if somebody uses Internet Explorer to post a comment the following commands do not work:

    underlined text:

    big text:

    small text:

    Is there something else (and valid) that I could use instead, so that it will be displayed properly in the comment afterwards?
    Strangely enough it displays correctly in the preview (text IS underlined or big/small), but once posted it’s not!
    Internet Explorer still can display underlined (or big/small) text properly that other users wrote in other browsers.

    Here are some screenshots to help you understand:

    A comment preview written in Internet Explorer:

    How a comment is displayed that was written in Internet Explorer:

    How a comment is displayed that was written in Firefox:

    All with the exact same code!

    • 14

      You need to specify font size for these tags:

      big {font-size: 16px}
      small {fomt-size: 10px}

      • 15
        japanworm said:

        Thanks for your quick reply.
        I already tried that as well. It doesn’t make a difference.
        Also, this has nothing to do with the “underlined” span tag which also doesn’t work. Something else must be interfering.

        First of all, I think it’s strange that it’s displayed correctly in the preview but not in the actual post (and that only in Internet Explorer).
        Almost as if something is modfied in the text once an IE user clicks the “send” button.

        Very mysterious.

      • 16
        japanworm said:

        After testing some more I found out that it has nothing to do with the browser.
        When I’m logged in as admin I can use underlined and big/small font. When I’m just a normal user (not registered) I cannot use it. It will display properly in the preview, but the code won’t go through once the comment is sent.

        Looking at the standard code you use here, too, I only could successfully implement the “stroke” (del tag), but not underlined, big/small font. Is that not possible at all with your plugin or do I have to edit the actual php file of your plugin?

        • 17
          japanworm said:

          I found the solution. I’m posting again just in case others have the same issue.
          It has to do with the allowed tags of WordPress.
          “big”, “small” and “span” tags aren’t allowed by default, but you can enable them if you post the following into your function.php (just add the tags you want to use):

          // For making it sure, we also force the tags again before comment approval
          function eg_allow_tags_in_comments($data) {
          // This variable is in wp-includes/kses.php file, check it out
          global $allowedtags;
          // You can add HTML tags and their properties by this way
          $allowedtags['span'] = array('style'=>array());
          $allowedtags['big'] = array();
          $allowedtags['small'] = array();
          // And we return our expanded data for comment approval
          return $data; }

          More about it here.

  6. 18

    Could you please make it work with wp-syntax plugin? So the code in the preview would be highlighted just as it would be in the submitted comment?

    echo "test"; 

    The output of this should be highlighted as php code.

  7. 25

    Hi, thank you for this great plugin. I have a question:
    What is the best way to add a button for a pointed list? Thank you for the support!

  8. 27

    I just tried it on 3.3 and trunk ~3.4, not working. I’m using a Hybrid child theme… thanks.

    • 28

      For me works without any problems.

      • 29

        Alright, I got it working. Just tested now on 3.4 trunk. The problem on my site wasn’t the child theme or WordPress version, I believe it has to do with my site’s directory structure; my blog is at the root rather than at a subdirectory.

        I only noticed this after poking around in Firebug… I had to change line 603 to use get_bloginfo('siteurl') instead of get_bloginfo('wpurl') for loading the script.

  9. 30

    Is this plugin not supported and unavailable now, because the download link above doesn’t work. :(

    • 31

      The plugin is still supported. For some reasons it disappeared from list of my plugins on WordPress.org. I’ve added alternative download link in post.

  10. 32

    ve ry nice plugin… i like it

  11. 33



  12. 34
    YeMeNi AnA said:

    thank u

  13. 35

    Is there any way to make it workable also in bbpress plugin (forum installed inside wordpress) page? :)

  14. 37
    MSRosyidi said:

    Is it possible to add more button for custom css class I made before?
    I’m sorry and thanks.

  15. 44
    MSRosyidi said:

    Unfortunately, when wp-debug is enabled, there is a warning:
    Notice: load_plugin_textdomain was called with an argument that is deprecated since version 2.7 with no alternative available. in (my domain)\wp-includes\functions.php on line 2925
    and the plugin is not loaded.
    I try using the last version of WordPress and the default theme and also deactivate another plugins.
    Have you a future plan to update the plugin?

    I’m sorry and thanks.

    • 45

      For now I not see a sense to change something, because plugin is working while wp-debug is disabled.

      May be sometime I will fix that.

    • 46

      Already fixed =)

      I did not think that it will be so easy. Changed just one row.

      • 47
        MSRosyidi said:

        Many thanks.
        It works now even there is still a warning about a deprecated argument: Notice: has_cap was called with an argument that is deprecated since version 2.0! Usage of user levels by plugins and themes is deprecated. Use roles and capabilities instead. in (mydomain)\wp-includes\functions.php on line 2923.
        Actually I don’t understand that, I’m only a regular WordPress user but everytime I want to use a plugin I always activate the wp_debug to know if there’s a warning.
        Anyway, many thanks for your quick support and I’m sorry for many complaints I write here.

        • 48

          I have fixed this also. I not recommend to turn on the wp_debug, because it is intended for plugin developers, not for regular users like you.

          • 49
            MSRosyidi said:

            Thanks so much.
            And about wp_debug, I rarely activate it because I write my theme from a starter blank theme, adding or deleting some functions so some times I need to do that. There is also a plugin for theme development that recommends me to do that. I know just a very-very basic knowledge about theming, but not plugin. That’s all is in my local computer not my live blog. After everything is fixed in my local computer then I go to try in my live blog. It’s just like a habit and an hobby when finding something new I wanna use it.
            Now I use your plugin in my live blog.
            I’m sorry and thanks again for your support. Nice to know you and your blog.

  16. 50
    MSRosyidi said:

    Just a question: is there any future plan to make preview unhidden by default?
    I’m sorry and thanks.

    • 51

      No, I’m not planning this, sorry.

      • 52
        MSRosyidi said:

        Thanks. Anyway the functionality given by your plugin now is enaugh.
        Just another report, your plugin still link to jquery version 1.6.3. This makes some of plugins I’m using don’t work because they need the newest version.
        I’ve manually change jquery-comment-preview.php to load the same version of jquery bundled by WordPress 3.5.1. And it works, but I’m still in doubt about the compatibily.
        I’m sorry and thanks.

  17. 53

    very very nice. I need tag spoiler.

  18. 57
    MorsMora said:

    Hello again,
    I am using this code for the spoiler: {Section: Preview block template}:

    style type="text/css"
    #spoiler {background-color: #000; color: #000;}
    #spoiler:active { background: white; }

    and Section code {HTML code of a buttons of the editor}:
    button tag="span">spoiler[id="spoiler"] /button

    But there is a problem:
    When is Preview= correct
    But when I send comment= It does not work {And it comes just above text a line}

    Can you help me?

  19. 58
    hire developer said:

    This plugin doesn’t work on WP version 3.6. My page doesn’t load after the comments section and my footer doesn’t appear. The page loading circle just keeps spinning.

  20. 61

    Installed your plugin and it works. However, it seems to conflict with lightbox as well as the tabs of our theme (search, history, tags, category, recent comments, and recent posts). When I disable the plugin lightbox and tabs work as they should. Activated they no longer function. Can you help?

  21. 63


    I use your plugin since 2014 and all is works with 0.6 version.
    Today, I installed the 1.1 version and now all images of my blog are no longer displayed :o(
    So I returned to the 0.6 version.

    I use WordPress 4.3.1

    Thanks for your help :o)

Соmmеnt раgеs: « 1 2 3
Lеаvе а Соmmеnt

© 2009–2022 Dimox.net  •  Privacy Policy