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.

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

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)

Cоmmеnts (30):
  1. 1
    @
    Dang Leo said:

    i love the idea,

  2. 2
    @
    Shannon said:

    I really want this to work but I haven’t a clue just how to connect the jQuery code to my website.

    • 3

      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.

  3. 4
    @
    Jose Tinto said:

    Cool idea, why don’t you make it as a plugin?

  4. 6

    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?

    • 7

      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" />

  5. 8

    I was looking for this! I knew I saw it somewhere but was unable to remember where :D

  6. 9
    @
    Juan de Flores said:

    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!

  7. 12

    It works!!! I freakin love it LOL!

    Thanks so much for this.

    Cheers, love your blog :D

    • 13

      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!

  8. 15
    Adexon Jorbin said:

    simple & great tricks….
    i want to use on my blog ..happy blogging

  9. 16

    nice trick… really love it :)

  10. 17
    don egalins said:

    Well done Dimox. I will insert your code in my next blog.

  11. 18

    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

  12. 19
    @
    Wajid Ali said:

    nice trick…I love the idea,

  13. 20
    Persimón said:

    Very nice and useful thanks

  14. 21

    Great idea thank you….

  15. 22
    @
    japanworm said:

    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! :)

    • 23

      While loading the script (zoomingjapan.com/wp-content/themes/alltuts/js/welcome_back.js) there is error 404.

      • 24
        @
        japanworm said:

        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 :)

  16. 25
    @
    WebJSubash said:

    cool buddy .You have done a wonderful job.

  17. 26
    @
    Murat Tekmen said:

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

  18. 30
    WPTester said:

    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.

Lеаvе а Соmmеnt

© 2009–2016 Dimox.net  •  Privacy Policy