Say “Welcome back!” to Commentators on WordPress Using jQuery

I wrote a small jQuery script, which aims to improve the convenience of commenting on WordPress site, and I want to share it with you.
The essence of the script is as follows: it shows a welcome message for regular commentators.
How it works
It’s very simple. Script checks whether the required fields Name/E-mail
are filled and performs the following:
- If a visitor of your blog at least once left a comment, next time he will see a “Welcome back, %username%!” message at the comment form.
- The
Name/E-mail/URL
fields will hide, there will be only comment field. - Commentator can change his data by clicking on “Edit” link.
- If visitor has disabled JavaScript in his browser, he will see the full comment form.
For working the script it’s necessary to satisfy the two conditions:
- Cookies must work in visitor’s browser.
- WordPress must remember a previously entered data in comment form.
Always be sure that the second condition is satisfied, otherwise there will no sense in connecting the script. I know what some WordPress plugins can prevent to output entered data in the comment form.
Examples
- If you at least once left a comment on this blog, you will see “Welcome back” message near the comment form.
- Also you can see an example on a separate page:
How to use it
-
Find in the
comments.php
file of your theme the code of a name, e-mail and URL fields and wrap them into the<div id="authorData"></div>
container.
I’ll show an example with default WordPress theme.
Before:
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p>
After:
<div id="authorData"> <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p> </div>
-
Connect the following jQuery script to your site (and also don’t forget to connect the jQuery framework, if it still isn’t connected):
(function($) { $(function() { var author = $('#author').val(); if( author !='' && $('#email').val() !='' ) { $('#authorData').hide(); $('#authorData').before('<div id="welcome">Welcome back, <strong>' + author + '</strong>! <a href="#">Edit »</a></div>') $('#welcome a').toggle( function() { $('#authorData').show(300); $(this).html('Minimize »'); return false; }, function() { $('#authorData').hide(300); $(this).html('Edit »'); return false; } ); } }); })(jQuery)
- That’s all.
I think the commentators of you site will appreciate this feature ;0)
i love the idea,
I really want this to work but I haven’t a clue just how to connect the jQuery code to my website.
Just put this code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
between the
<head>
and</head<
tags.Cool idea, why don’t you make it as a plugin?
There is no sense in making a plugin
My blog does not satisfy the 2nd condition:
WordPress must remember a previously entered data in comment form.
How can I enable remembering previously entered data in comments form?
Template of comment form (comments.php file) must contain the following parts of code:
<?php echo $comment_author; ?>
<?php echo $comment_author_email; ?>
<?php echo $comment_author_url; ?>
I.e. the input fields for Name/E-mail/Website must look like this:
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
I was looking for this! I knew I saw it somewhere but was unable to remember where :D
Hi, I’ve a little problem…
I use reCAPTCHA in the comments.
The problem is if I don’t write the words correctly in the captcha, the message is completely deleted.
How to fix this?
Thanks!
My script has no relation to this problem.
use cookies to save all the data and retrieve it after the checking of capcha
It works!!! I freakin love it LOL!
Thanks so much for this.
Cheers, love your blog :D
It works, however i tested it with W3C, it causes error code :(
Do you have any idea how to fix it, since i have 0 knowledge in jquery stuff.
Thanks!
Edit, i managed to validate it :D
Sorry to spam your blog =P thanks!
simple & great tricks….
i want to use on my blog ..happy blogging
nice trick… really love it :)
Well done Dimox. I will insert your code in my next blog.
Trick that you gave works well, I have tried it on my blog and it worked, congratulations!
Why do not you make a plugin, so that beginners can easily use it on their wordpress blog.
Sorry, my English is not fluent
nice trick…I love the idea,
Very nice and useful thanks
Great idea thank you….
Hello again :)
This sounds awesome!
I tried it, but for me it doesn’t work.
I’ve connected it correctly with jquery and am calling the script correctly (I think). Cookies are enabled (I do see the “Welcome back” message here at your website!!) ….
My php setup looks like this (so it seems like the 2nd requirement is also ok).
http://pastebin.com/wiSWcFKr
That’s how I call the script.
function add_my_javascripts() {
if( is_admin() )
return;
wp_register_script('jquerytools', 'http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js', array('jquery'));
wp_register_script('welcome_back', get_template_directory_uri() . '/js/welcome_back.js', array('jquery'));
/* Enqueue the ones that need to be enqueued */
wp_enqueue_script('welcome_back');
}
add_action('wp_enqueue_scripts', 'add_my_javascripts');
Any ideas why this is not working?
Thanks so much and keep up the great work! :)
While loading the script (zoomingjapan.com/wp-content/themes/alltuts/js/welcome_back.js) there is error 404.
Thank you very much. I don’t know what caused the problem, but I now use the direct link in my function.php and now it works :)
cool buddy .You have done a wonderful job.
My comments.php file is like this, can you help me please?
'' ,
'comment_notes_before' => '',
'comment_notes_after' => '',
'comment_field' => ' ',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' => '' . '<i></i>' . '' . __( 'Ad ve Soyad', 'domainreference' ) . ' ' . ( $req ? '*' : '' ) . '',
'email' => '' . '<i></i>' . '' . __( 'E-Posta Adresi', 'domainreference' ) . ' ' . ( $req ? '*' : '' ) . '',
'url' => '' . '<i></i>' . '' . __( 'Web Sayfaniz', 'domainreference' ) . ' ' . ( $req ? '*' : '' ) . ' ' ) )
);
comment_form($args); ?>
<!-- #comments .comments-area -->
My comments.php has an old code structure, so I can’t help you, sorry.
It’s okay Dimox, will follow your blog. It’s great really. (:
Hi Murat Tekmen, am having the same code where you able to achieve this welcome back ? If some please help me !!
Hi,
Some where do we have a latest update on this, like how to do it in WP latest version.
The code is some what like what Murat Tekmen have posted.