Update WordPress Comment Form to HTML5, Without Hacking Core Templates

For some reason, WordPress 3.2.1 still uses <input type="text"...> for email and website addresses on their Leave a Reply form…

But to edit those <input> types, you have to edit a core template, found in the wp-includes folder, which, of course, will get overwritten the next time you update WP…

So here’s a brief plug-in-style function that will fix those two types for you, just add this to your theme’s function.php:


// change Comment Form input types for "email" and "url"
function boilerplate_comment_form($fields) {
// find out if field is required
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
// apply change to 'email' and 'url'
$fields['email'] = '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="email" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>';
$fields['url'] = '<p><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>';
// return updated $fields array
return $fields;
}
// apply filter
add_filter('comment_form_default_fields','boilerplate_comment_form');

But, aside from being one of the cool kids, “why bother?”, you may ask. Well, if that first reason isn’t enough, it also really helps any mobile users you may have, because it will change their keyboard to offer the @ key when they’re in the email box and offer the .com key when they’re in the url box.

It may not seem like a lot, but it’s dead simple (especially when someone else has already done the work for you! :-), and when your users are typing, they’ll really appreciate it.

Happy WordPressing,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)