I’m not a designer so the idea of designing my own theme doesn’t appeal to me, however there are plenty of free themes available which means I can have a decent looking site and use my time to actually write content for it rather than procrastinating over how it should look.
However, the first thing I do when I download a new WordPress theme for my site is fix the markup. Unfortunately, whilst the themes look great they’re often not coded that well (that’s not saying all theme designers are bad at markup, but I’ve downloaded some horrendous code at times!). The section that often needs the most work is the comments form, which admittedly is often just copied from the Classic theme, although looking through a few themes I’ve downloaded over the past, this isn’t always the case.
Even to me, the comment form from the classic theme isn’t perfect. The input and labels are wrapped in paragraphs, the label comes after the input that it’s for, there’s no label for the comment textarea, and there’s no fieldset defined. That doesn’t sound so bad, but another form I just looked at had no label tags at all, which is not so good. Don’t worry if half of that made no sense, I’ll explain it step by step 😉
The Classic Comment Form
First off, let’s look at the Classic comment form. If you open the comments.php file from the Classic theme and go to line 41, this is where the following code starts:
<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="< ?php _e('Log out of this account') ?>">Logout »</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) _e('(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) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: < ?php echo allowed_tags(); ?></small>-->
<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; ?>" />
<?php do_action('comment_form', $post->ID); ?>
So where do we start? Well the labels are set for the Name, Email and Website, however not the comment area. For those who don’t know what label tags do, the label tag holds the label for a field. The ‘for’ attribute within the label has to be identical to the id attribute in the field element that it’s for. So for example the label Website above has a for attribute value of ‘url’ and the input id above it is also url. What does this do? It associates the label with the input box which is good for accessibility. From a usability standpoint it also means that if you click on the label ‘Website’ it will put your cursor into the input box. That may not sound exceptional, but imagine instead that you have a group of radio buttons or checkboxes. Being able to click on the label instead of aim for that tiny box (especially when on a laptop using a stick or touchpad) is so much easier.
Anyway, so we’ve got labels for all but the comment area so we need to add this in. Obviously it will make sense to have the label before the comment form, so we can insert the following just before the opening textarea tag:
You may have noticed at this point, that the problem we now have is the label will come directly before the comment box on the same line. Don’t worry, we can fix that with a bit of CSS which we’ll cover later.
For the first 3 input boxes we have the label coming after their text field. From an accessibility point of view, this is wrong as the label should come first to define what’s about to appear (read more on Label Positioning). If you still want the text after the input you can do this with a bit of CSS. This is just a simple case of swapping the tags over eg.