jQuery Comment Preview WordPress Plugin
Description
jQuery Comment Preview WordPress Plugin allows the live comment preview without page reboot. It works on jQuery.
Requires WordPress version: 2.5 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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Since version 0.1.5 plugin have a new template of a HTML editor buttons. Therefore when upgrading the plugin from earlier version to 0.1.5 or higher it is necessary to do following:
- If you have changed the default preview block template, save it somewhere on your computer.
- Click the “Reset Defaults” button at the bottom of the plugin options page.
- Now you can again setup an options if you needed.
If not reset the plugin’s options, it may not work.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Attention: knowledge of CSS and HTML may require for using a plugin.
jQuery Comment Preview WordPress Plugin
Version: 0.1.6 | Total downloads: 5472 | Last updated: 2010-01-05
Donation
If you enjoy this plugin, you can thank me and leave a small donation.
Installation
- Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
- Play once with the width parameter of #jquery-comment-wrap, #jquery-comment-preview and #comment_preview identifiers (which are in the jquery-comment-preview.css file) to fit the width under your design.
- If it’s necessary, you can customize options in admin interface at the Options -> jQuery Comment Preview page.
- If it’s necessary, you can edit other CSS styles for comment preview block in the jquery-comment-preview.css file.
- 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="jquery-comment-wrap">
<div id="jquery-comment-preview">
<div id="html-editor">
<a>button</a>
<a>button</a>
...
</div>
<div id="preview-tab">Preview</div>
</div>
<textarea name="comment"></textarea>
</div>
If nothing works
- Make sure that you use the appropriate version of WordPress, which is required for a plugin work.
- Make sure that the comments.php file of your theme has the following code:
<?php do_action('comment_form', $post->ID); ?>If not, insert it before the </form> tag.
- If the first 2 points are not solved the problem, give details in comments to this post.
- Plugin “jQuery Comment Preview” may not work if you have installed the plugin OpenID.
Version history
- 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 attribute 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 formatting in preview; deleted automatic fitting 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.

Hi,
This looks like an excellent plugin, but unfortunately there’s a conflict with LMB Comment Quicktags (similar to your toolbar, but more elaborate). Because of the textarea.clone div and the two instances of the textarea (with both using id #comment) the Comment Quicktags toolbar doesn’t know in which textarea canvas to insert the code. Is there a solution for this or could you (even better) please incorporate the same functionality of Comment Quicktags into your plugin jQuery Comment Preview (specifically in the html editor)?
Please ignore my previous comment. Your plugin is exactly what I’ve been looking for and now has replaced the Comment Quicktags toolbar linked in my previous post (or feel free to unapprove both comments).
And another comment: it seems this plugin is causing problems with comments not getting through after the first submit. It will throw an error
Jean-Paul Horn, I have released new version. Please update a plugin.
P.S. I’m glad, that you liked a plugin.
nice plugin
Hey this is cool! Thanx again…I’m installing now and will let you know more later;)
Nice Plugin
Nice plugin!
hi. Thanks for plugin
perfect.
Regards
Thanks for plugin
Good pllugin, thanks!
really nice. Thank you!
It’s very nice and seems to work in my blog, but I have two questions:
1) Is there any translation file into spanish? If not, what file should I edit to translate it? (You know, I want to display “Nombre” in place of “Name”.
2) Does it work with @Reply plugin or similar?
1. No, but you can make this file by youself, plugin consists required files for translation. Manual on translation you may find here – Translating WordPress.
2. I don’t know, I have not tested it. Most likely will work.
why avatars in preview don’t work?
@alekodf, because is it harder to realize on JavaScript than on PHP. It takes a lot of extra code, therefore I don’t see a sense in this.
I would like to add buttons to the HTML bar above (specifically an “underline” button). I’ve tried doing this via the plugin settings, but apparently the actual graphic is one picture. Not sure, therefore, how to add additional HTML features and images (an actual underline icon in the menu above).
@Matt, you need to create an icon for this button and then write CSS styles for it in
jquery-comment-preview.cssfile.Nice plug-in. Thinking of using it.
Is it possible to hide the avatar img in preview? I tried .avatar img in the CSS file, but it didn’t hide it – I have it blank in the WordPress settings. Any suggestions?