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:

1. Cookies must work in visitor’s browser.
2. 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

1. If you at least once left a comment on this blog, you will see “Welcome back” message near the comment form.
2. Also you can see an example on a separate page:

How to use it

1. 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>
   

2. 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 &raquo;</a></div>')
   		$('#welcome a').toggle(
   			function() {
   				$('#authorData').show(300);
   				$(this).html('Minimize &raquo;');
   				return false;
   			},
   			function() {
   				$('#authorData').hide(300);
   				$(this).html('Edit &raquo;');
   				return false;
   			}
   		);
   	}
   
   });
   })(jQuery)
   

3. That’s all.

I think the commentators of you site will appreciate this feature ;0)