Subscribe to RSS Follow me on Twitter
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

50410'
Written by Dimox

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.

Download

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

jQuery Comment Preview WordPress Plugin

Version: 0.5 / Last updated: 2011-09-10

Installation

  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">
      <a>button</a>
      <a>button</a>
      ...
    </div>
    <div id="previewTab">Preview</div>
  </div>
  <textarea name="comment"></textarea>
</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 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.

Category: WordPress, jQuery

Cоmmеnts (155):

  1. 1

    Very nice, I like this a lot :)

    It even shows my Gravatar before I’ve even posted, nice!

  2. 3

    Hello and congratulations for this great plugin :)
    I’ve translated it in french today, feel free to download the translation here : http://www.wptrads.fr/jquery-comment-preview/, don’t forget to post a comment.

    I’ll be very proud if you’ll integrate this translation in the plugin’s next version :)

    Keep the Pressure :-D

  3. 5

    it’s really cool, thanks for provide it to us.

  4. 6

    After installing this product, the comments no longer appear to be nested. Is there a way to indent them again or is that lost with the jQuery? I love the features but my Subscribers were used to the indented look.

    • 7

      Plugin does not make any changes in comment list.

      • 8

        Dimox…my mistake. My peeps were not repying go the people…just replying to the post. The comments did not appear indented because they weren’t.

        This is a great plugin btw. Does everything we wanted it to.

  5. 9

    Thanks a bunch!

    • 10

      Do you guys do custom coding? The one plugin I cannot seem to find is one that shows an individual user’s unread comments. A lot of the users on our new blog are used to a feature on their old blog that shows them when someone replies to their comment and they haven’t read it.

      Is that something you have seen or are willing to code up?

      Thanks.

  6. 11

    great plugin .. maybe I can used it at my blog

  7. 12

    Thank you

  8. 13

    yeah it is good

  9. 14

    This plugin version is not compatible with WordPress 3.0 :/

  10. 17

    Very usefull plugin, thanks!
    Tested on WordPress 2.9.2 but hope it works with 3.0 too.
    Cheers.

  11. 18

    Hi,

    I’ve just installed WordPress 3.0, and this plugin doesn’t work :-(

    When I activate it, nothing appens …

    Is there something i’ve missed ?

    Thx !!

  12. 22
    aykut reha said:

    very nice… thanks…

  13. 23

    Thanks for this article! I use now this great plugin :)

  14. 24

    Hi Dimox,

    Just tried on Wordpress 3 but didn’t work.fot me.
    I’m using ‘Freshy 2′ template. Do you have any idea ?

  15. 30

    Wow thanks share plugins. This plugins worked Wordpress 3.0

  16. 31

    Thanks ;)

    • 80
      yogesh deshmukh said:

      when give Leave a Reply to in commnent box .then comment is apporived by using wp-admin ->comments but the page is not refresh for next commnent

      why??????????????

  17. 32

    useful things. i like it.

  18. 33

    This is a brilliant plugin but interferes with other jquery features already in the system!

  19. 34

    Cool! will be using this plugin on a large Dutch website soon

  20. 35

    Cool!!

  21. 36

    wow great plugin, thanks

  22. 37

    Really nice work but unfortunately it doesn’t work with my page (Wordpress 3.0) . Any problem with arras theme?

    Example : http://events.francefukuoka.com/?p=216

    Thanks for your reply

  23. 39

    Awesome, many thanks for your hard work

  24. 40

    Thankx, I like it and work perffect for me.

  25. 41

    Have you had any issues with this working with the Thesis theme? I’m have that installed at http://www.hill-kleerup.org/blog/doingwrite/, and neither the preview nor comment edit buttons are working properly.

    Thanks. These seems to work well on other sites, so I’m guessing it’s a Thesis issue, but I’m not quite sure where to go from there.

  26. 44

    Doesn’t seem to work right on my site. Below is the link…

    http://www.webs05.com/2010/09/05/picture-test-2-2.html

  27. 50

    Okay. I will fix this issue in next version of the plugin.

  28. 53

    New version of the plugin is out.

  29. 57

    When I activated the plugin, I got this error message.

    Fatal error: Call to undefined function register_setting() in xxxxxxxxxxxxxxxxx/wp-content/plugins/jquery-comment-preview/jquery-comment-preview.php on line 31

    • 60

      Just a few comments above yours is the same error already posted. I think the dev(s) of this plugin know this error exists now and are working on it.

Lеаvе а соmmеnt





Tag Cloud