How to Write Regular Expressions

<input id="phone-number" type="text">
<label class="valid" for="phone-number"><img src="check.svg"></label>
<label class="invalid" for="phone-number"><img src="x.svg"></label>

input:not([data-validation="valid"]) ~ label.valid,
input:not([data-validation="invalid"]) ~ label.invalid {
  display: none;
}

$("input").on("input blur", function(event) {
  if (isPhoneNumber($(this).val())) {
    $(this).attr({ "data-validation": "valid" });
    return;
  }

  if (event.type == "blur") {
    $(this).attr({ "data-validation": "invalid" });
  }
  else {
    $(this).removeAttr("data-validation");
  }
});

function isPhoneNumber(string) {
  return /\d\d\d\d\d\d\d\d\d\d/.test(string);
}

function isPhoneNumber(string) {
  return /\d{10}/.test(string);
}

function isPhoneNumber(string) {
  return /1?\d{10}/.test(string);
}

function isPhoneNumber(string) {
  return /^1?\d{10}$/.test(string);
}

Getting Serious

• (234) 567-8901
• 234-567-8901
• 234.567.8901
• 234/567-8901
• 234 567 8901
• +1 (234) 567-8901
• 1-234-567-8901

function isPhoneNumber(string) {
  return /^1?\d{10}$/.test(string.replace(/\D/g, ""));
}

Getting Even More Serious

1. A phone number ((234) 567-8901) is broken up into three pieces: The area code (234), the exchange code (567) and the subscriber number (8901).
2. For the area code and exchange code, the first digit can be 2 through 9 and the second and third digits can be 0 through 9.
3. The exchange code cannot have 1 as the third digit if 1 is also the second digit.

/^1?<AREA CODE><EXCHANGE CODE><SUBSCRIBER NUMBER>$/

/^1?<AREA CODE><EXCHANGE CODE>\d{4}$/

/^1?[23456789]\d\d<EXCHANGE CODE>\d{4}$/

/^1?[2-9]\d\d<EXCHANGE CODE>\d{4}$/

/^1?[2-9]\d\d[2-9]\d\d\d{4}$/

/^1?([2-9]\d\d){2}\d{4}$/

function isPhoneNumber(string) {
  return /^1?([2-9]\d\d){2}\d{4}$/.test(string.replace(/\D/g, ""));
}

When to Avoid Regular Expressions

• Don't be too strict. There's little value in being too strict with regular expressions. For phone numbers, even if we did match all of the rules in NANP, there's still no way to know if a phone number is real. If I rattled off the number (555) 555-5555, it matches the pattern but it's not a real phone number.
• Don't write an HTML parser. While it's fine to use regexes to parse simple things, they're not useful for parsing entire languages. Without getting too technical, you're not going to have a good time parsing non-regular languages with regular expressions.
• Don't use them for really complicated strings. The full regex for emails is 6,318 characters long. A simple, imperfect one looks like this: /^[^@]+@[^@]+\.[^@\.]+$/. As a general rule of thumb, if you regular expression is longer than a line of code, it might be time to look for another solution.

Wrapping Up

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
<?php endif; ?>
 
<?php if(!empty($post->post_password)) : ?>
 <?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
 <?php endif; ?>
<?php endif; ?>

<?php if($comments) : ?>
 <?php foreach($comments as $comment) : ?>
  <?php if ($comment->comment_approved == '0') : ?>
  <?php endif; ?>
 <?php endforeach; ?>
<?php else : ?>
<?php endif; ?>

<?php if(comments_open()) : ?>
 <?php if(get_option('comment_registration') && !$user_ID) : ?>
 <?php else : ?>
  <?php if($user_ID) : ?>
  <?php else : ?>
  <?php endif; ?>
 <?php endif; ?>
<?php else : ?>
<?php endif; ?>

2. General Code

Preventing direct access to comments.php

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
<?php endif; ?>

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
 <?php die('You can not access this page directly!'); ?>
<?php endif; ?>

Is a password required?

<?php if(!empty($post->post_password)) : ?>
 <?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
 <?php endif; ?>
<?php endif; ?>

3. Displaying The Comments

<?php if($comments): ?>
   <?php foreach ($comments as $comment) : ?>
  <?php if ($comment->comment_approved == '0') : ?>
  <?php endif; ?>
 <?php endforeach; ?>
<?php else : ?>
<?php endif; ?>

<?php if($comments) : ?>
 <ol>
   <?php foreach($comments as $comment) : ?>
  <li>
   <?php if($comment->comment_approved == '0') : ?>
    <p>Your comment is awaiting approval</p>
   <?php endif; ?>
   <p>Your comment</p>
  </li>
 <?php endforeach; ?>
 </ol>
<?php else : ?>
 <p>No comments</p>
<?php endif; ?>

Basic comment template tags

The final result

<?php if($comments) : ?>
 <ol>
   <?php foreach($comments as $comment) : ?>
  <li id="comment-<?php comment_ID(); ?>">
   <?php if ($comment->comment_approved == '0') : ?>
    <p>Your comment is awaiting approval</p>
   <?php endif; ?>
   <?php comment_text(); ?>
   <cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite>
  </li>
 <?php endforeach; ?>
 </ol>
<?php else : ?>
 <p>No comments yet</p>
<?php endif; ?>

4. The Comment Form

Conditional statement overview

<?php if(comments_open()) : ?>
 <?php if(get_option('comment_registration') && !$user_ID) : ?>
 <?php else : ?>
  <?php if($user_ID) : ?>
  <?php else : ?>
  <?php endif; ?>
 <?php endif; ?>
<?php else : ?>
<?php endif; ?>

Inserting the form

<?php if(comments_open()) : ?>
 <?php if(get_option('comment_registration') && !$user_ID) : ?>
  <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
  <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
   <?php if($user_ID) : ?>
   <?php else : ?>
   <?php endif; ?>
  </form>
 <?php endif; ?>
<?php else : ?>
 <p>The comments are closed.</p>
<?php endif; ?>

<?php if(comments_open()) : ?>
 <?php if(get_option('comment_registration') && !$user_ID) : ?>
  <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
  <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
   <?php if($user_ID) : ?>
    <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p>
   <?php else : ?>
    <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
    <label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p>
    <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
    <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 $comment_author_url; ?>" size="22" tabindex="3" />
    <label for="url"><small>Website</small></label></p>
   <?php endif; ?>
  </form>
 <?php endif; ?>
<?php else : ?>
 <p>The comments are closed.</p>
<?php endif; ?>

<?php if(comments_open()) : ?>
 <?php if(get_option('comment_registration') && !$user_ID) : ?>
  <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
  <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
   <?php if($user_ID) : ?>
    <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p>
   <?php else : ?>
    <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
    <label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p>
    <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
    <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 $comment_author_url; ?>" size="22" tabindex="3" />
    <label for="url"><small>Website</small></label></p>
   <?php endif; ?>
   <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
   <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
   <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
   <?php do_action('comment_form', $post->ID); ?>
  </form>
 <?php endif; ?>
<?php else : ?>
 <p>The comments are closed.</p>
<?php endif; ?>

5. Some Little Tricks

Gravatars

<?php echo get_avatar($author_email, $size, $default_avatar ); ?>

Comment numbers

<?php comments_number($zero_comments, $one_comment, $more_comments); ?> 

<?php comments_number('No comments', 'One comment', '% comments'); ?> 

Comment links

<?php comments_popup_link($zero_comments, $one_comment, $more_comments, $css_class, $comments_closed); ?> 

<?php comments_popup_link('No comments', 'One comment', '% comments', 'comments-link', 'Comments are closed'); ?> 

Editing comments

<?php edit_comment_link($link_text, $before_link, $after_link); ?> 

Alternating colors for comments

function alternate_rows($i){
 if($i % 2) {
  echo ' class="alt"';
 } else {
  echo '';
 }
}

<?php $i++; ?>
<li<?php alternate_rows($i); ?> id="comment-<?php comment_ID(); ?>">

Displaying the allowed tags

Allowed tags: <?php echo allowed_tags(); ?>

Comments RSS link

<?php comments_rss_link($link_text); ?>

6. Conclusion

I hope you've enjoyed this *ahem* little article about skinning your WordPresscomments.php file. You can get the full code here, with the tricks I showed included in it:

• gravatars,
• alternate row colors,
• edit link,
• comments rss link.

Obviously, the comments link isn't included since this has to be used inside of the loop.

Best of luck in your WordPress skinning adventures!