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)

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.

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

During this 2 years I gained my experience in jQuery and created my own jQuery Tabs Script completely from scratch. And I want to share it with you in this post.

I call it an universal, because it lets to create an unlimited number of tabbed blocks with an unlimited number of tabs, while the contents of the script remains unchanged (script size is only 0.4 kilobytes).

jQuery Tabs Script code

In my opinion, I’ve made a miniature and pretty jQuery script for a tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function($) {
$(function() {
 
  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current')
          .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });
 
})
})(jQuery)

The following script doing the same as the code above, but this script is yet smaller (note that it require jQuery at least version 1.4.2):

1
2
3
4
5
6
7
8
9
10

(function($) {
 $(function() {
 
   $('ul.tabs').delegate('li:not(.current)', 'click', function() {
     $(this).addClass('current').siblings().removeClass('current')
       .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
   })
 
})
})(jQuery)

HTML code for the script

It very similar on a structure of HTML code of another jQuery tabs solutions, which I was seen:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="section">
  <ul class="tabs">
    <li class="current">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div class="box visible">
    Content of the first block
  </div>
  <div class="box">
    Content of the second block
  </div>
</div><!-- .section -->

Requied CSS for this HTML

1
2
3
4
5
6

.box {
  display: none;
}
.box.visible {
  display: block;
}

The .box class hides all tabbed blocks by default, but the .visible shows the desired block.

P.S.. Yes, perhaps I invented the wheel, but i get great pleasure from this process and simultaneously improve my experience in jQuery, and I don’t think this is so bad.

In this article I want to share jQuery script, that solves this problem. May be it will be usefull for someone.

What is interesting, while I wrote this post and have tested the script, I reduced its size about 2.5 times compared with the original version (this suggests that the same problem can be solved in different ways and always need to try to optimize JavaScript scripts).

Now lets look at the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function() {
 
  /* Adding a class to TEXTAREA to determine the focus */
  $('textarea').focus(function() {
    $('textarea').removeClass('hasFocus');
    $(this).addClass('hasFocus');
  })
 
  /* Putting the focus by default on a first TEXTAREA */
  $('#textarea1').focus();
 
  /* Switching the focus by clicking Enter */
  $(document).keypress(function(e) {
    if(e.which == 13) {
      $('textarea').not('.hasFocus').focus();
      return false;
    }
  })
 
})

What we doing in this script? We add the .hasFocus class to the focused textarea, remove this class from a field that is not focused, and while pressing Enter focus switches to a textarea, that has no this class.

May be there is a shorter way to do the same, but, unfortunately, I not found simpler way to get a field, that has not the focus.

Demo

Look at the script in action.