Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
WordPress: Redesigning the comment form
Markku has been doing some redesigning. Have a look: there’s a brand new navigation bar, the sidebar has changed (there are now seven of us!)… But before those rather big changes, he messed around with the comment form. The new things are the mini quicktags, a resizable textarea (© Dunstan) and *drumroll* a superdooper new feature: the comment textarea now comes before all other fields if there’s a cookie saying you already posted a comment before! How cool is that?
I was pretty jealous actually… So I asked him how the hell he managed to do that cookie thing. He (Markku is The Friendliness Itself) sent me his PHP code. I certainly w00ted, but as I glared longer and longer at the code, I started to find it a bit too long. (The complete form was coded twice.) Here’s how I did it.
First, we initialize $t and $iknowyou. We’ll use $t as a counter, so the tabindex values of the inputs and the comment textarea can remain logical. The other variable, $iknowyou, will let us know if the user has posted a comment before. Open up wp-comments.php and put this code somewhere above the first input field of the comment form.
<?php
$t = 1;
if (strlen($comment_author) != 0 || strlen($comment_author_email) != 0 || strlen($comment_author_url) != 0) { $iknowyou = 1; }
?>Now, let’s start using these. Place the following code above the other input fields.
<?php if ($iknowyou) { ?>
<p>
<label for="comment"><?php e_("Your Comment"); ?></label>
<br />
<textarea name="comment" id="comment" cols="60" rows="4" tabindex="<?php echo $t; ?>"></textarea>
</p>
<?php $t++; } ?>Then just place this code where the comment textarea used to be:
<?php if (!$iknowyou) { ?>
<p>
<label for="comment"><?php e_("Your Comment"); ?></label>
<br />
<textarea name="comment" id="comment" cols="60" rows="4" tabindex="<?php echo $t; ?>"></textarea>
</p>
<?php } ?>Finally, run through all input boxes and textareas in the comment form and make their tabindex attributes read <?php echo $t; $t++; ?>, like this:
tabindex="<?php echo $t; $t++; ?>"Tada! You’re done. Here’s how the default wp-comments.php would look with the only change being this hack:
<?php // Do not delete these lines
if ('wp-comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
$req = get_settings('require_name_email');
if (($withcomments) or ($single)) {
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_'.$cookiehash] != $post->post_password) { // and it doesn't match the cookie
?>
<p><?php _e("Enter your password to view comments."); ?><p>
<?php
return;
}
}
$comment_author = (isset($_COOKIE['comment_author_'.$cookiehash])) ? trim($_COOKIE['comment_author_'.$cookiehash]) : '';
$comment_author_email = (isset($_COOKIE['comment_author_email_'.$cookiehash])) ? trim($_COOKIE['comment_author_email_'.$cookiehash]) : '';
$comment_author_url = (isset($_COOKIE['comment_author_url_'.$cookiehash])) ? trim($_COOKIE['comment_author_url_'.$cookiehash]) : '';
$comments = $wpdb->get_results("SELECT * FROM $tablecomments WHERE comment_post_ID = '$id' AND comment_approved = '1' ORDER BY comment_date");
?>
<!-- You can start editing here. -->
<h2 id="comments"><?php comments_number(__("Comments"), __("1 Comment"), __("% Comments")); ?>
<?php if ('open' == $post->comment_status) { ?>
<a href="#postcomment" title="<?php _e("Leave a comment"); ?>">»</a>
<?php } ?>
</h2>
<?php if ('open' == $post->ping_status) { ?>
<p><?php _e("The <acronym title=\"Uniform Resource Identifier\">URI</acronym> to TrackBack this entry is:"); ?> <em><?php trackback_url() ?></em></p>
<?php } ?>
<?php if ($comments) { ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(); ?> <?php _e("by"); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>
<?php } // end for each comment ?>
</ol>
<?php } else { // this is displayed if there are no comments so far ?>
<p><?php _e("No comments yet."); ?></p>
<?php } ?>
<p><?php comments_rss_link(__("<abbr title=\"Really Simple Syndication\">RSS</abbr> feed for comments on this post.")); ?></p>
<h2 id="postcomment"><?php _e("Leave a comment"); ?></h2>
<?php if ('open' == $post->comment_status) { ?>
<p><?php _e("Line and paragraph breaks automatic, e-mail address never displayed, <acronym title=\"Hypertext Markup Language\">HTML</acronym> allowed:"); ?> <code><?php echo allowed_tags(); ?></code></p>
<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php
$t = 1;
if (strlen($comment_author) != 0 || strlen($comment_author_email) != 0 || strlen($comment_author_url) != 0) { $iknowyou = 1; }
?>
<?php if ($iknowyou) { ?>
<p>
<label for="comment"><?php _e("Your Comment"); ?></label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="<?php echo $t; $t++; ?>"></textarea>
</p>
<?php } ?>
<p>
<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="<?php echo $t; ?>" />
<label for="author"><?php _e("Name"); ?></label> <?php if ($req) _e('(required)'); ?>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<input type="hidden" name="redirect_to" value="<?php echo htmlspecialchars($_SERVER["REQUEST_URI"]); ?>" />
</p>
<p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="<?php echo $t; $t++; ?>" />
<label for="email"><?php _e("E-mail"); ?></label> <?php if ($req) _e('(required)'); ?>
</p>
<p>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="<?php echo $t; $t++; ?>" />
<label for="url"><?php _e("<acronym title=\"Uniform Resource Identifier\">URI</acronym>"); ?></label>
</p>
<?php if (!$iknowyou) { ?>
<p>
<label for="comment"><?php _e("Your Comment"); ?></label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="<?php echo $t; $t++; ?>"></textarea>
</p>
<?php } ?>
<p>
<input name="submit" type="submit" tabindex="<?php echo $t; ?>" value="<?php _e("Say It!"); ?>" />
</p>
</form>
<?php } else { // comments are closed ?>
<p><?php _e("Sorry, the comment form is closed at this time."); ?></p>
<?php } ?>
<?php // if you delete this the sky will fall on your head
}
?>The only way to make this code even smaller (I can think of) would be placing the XHTML code used to display the textarea in a string, which could then be echoed at will, although I find the code above short enough.
Comments (15)
Listed below are the responses for this entry.
Interesting idea… I think it’s not a big deal for me to fill in the forms, but it would be nice to see how this will work out. Nice post!
Gotta try this… :)
test
Nice re-thinking of my implementation. :)
The only reason I coded it twice was because of the
tabindexattribute; everything is in a different order for the two possible cases. But I’m sure I can make it shorter if I need to. :)I think El Bandano’s keyboard broke. :spin:
hmmm… where’d you get all these fun smilies?
markku: You’re so right. I updated the post now — I solved that problem by using a counter variable.
danithew: Those come from all around the web. They’re all used with permission etc etc. :)
that’s pretty damn cool! :) (the comment thing)
Can you tell me where exactly this is supposed to go in
wp-comments.php? I think I know but I am not sure. You say before the text input fields but… *scratches head*I placed the first piece of code right under the line that starts with
<form action= … >, although it doesn’t really matter where you put it, as long as it’s above the other codes mentioned above. If you need help on placing these too where they belong, leave another comment and I’ll happily help you out.Yeah… I might need some help. Not sure where to put the second code.
Actually… I am totally confused! (I don’t do well with code apparently.)
Well, have a look at the above code of the default
wp-comments.phpwith the only change being this hack. I hope this inspires you. ;)Great feature! Don’t know El Bandano wants, is he frustrated?
:puke:
Let’s :piss: on him!
Ooh, ooh, ooh… I forgot to make the counter variable increment in the example above! Thanks to Rob for reporting this, it’s fixed now.
FYI — this isn’t playing so nice with WordPress 2.3.1, installed locally
Fatal error: Call to undefined function e_()