Show comments fields in two columns

What you need are two new containers: one for the single line fields, one for the textarea. Looking at the default comment form, we can see where their start and end tags should appear. I have added some comments to make that easier to see:

<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="<?php echo esc_attr( $args['id_form'] ); ?>">
    <?php do_action( 'comment_form_top' ); ?>
    <?php if ( is_user_logged_in() ) : ?>
        <?php echo apply_filters( 'comment_form_logged_in', $args['logged_in_as'], $commenter, $user_identity ); ?>
        <?php do_action( 'comment_form_logged_in_after', $commenter, $user_identity ); ?>
    <?php else : ?>
        <?php echo $args['comment_notes_before']; ?>
        <?php
        do_action( 'comment_form_before_fields' );
        // Fields: author, email, url
        foreach ( (array) $args['fields'] as $name => $field ) {
            echo apply_filters( "comment_form_field_{$name}", $field ) . "\n";
        }
        do_action( 'comment_form_after_fields' );
        ?>
    <?php endif; ?>
    <?php 
    // Field: textarea
    echo apply_filters( 'comment_form_field_comment', $args['comment_field'] ); ?>
    <?php echo $args['comment_notes_after']; ?>
    <p class="form-submit">
        <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
        <?php comment_id_fields( $post_id ); ?>
    </p>
    <?php do_action( 'comment_form', $post_id ); ?>
</form>
  • We need the first start tag on 'comment_form_top'. Not later because we have to catch the case of a user who is logged in.
  • We close that tag and open the second one on 'comment_form_after_fields'.
  • Finally, we close the last tag after 'comment_form_field_comment'. This one is a filter, not an action.

In the following sample code I throw a style element into the markup. In your theme you should put the CSS into the style sheet. And you should use a clearfix handler of your choice, not the markup I used here. 🙂

add_action( 'comment_form_top', 'wpse_67805_open_tag' );
function wpse_67805_open_tag()
{
    ?>
<style>
@media screen and (min-width: 800px) {
    .wpse-67805-comment-fields,
    .logged-in-as {
        float: left;
        width: 280px;
    }
    .wpse-67805-comment-textarea {
        float: right;
        width: 280px;
    }
    .wpse-67805-textarea-after {
        clear: both;
    }
}
</style>
<div class="wpse-67805-comment-fields">
    <?php
    }
    add_action( 'comment_form_after_fields', 'wpse_67805_open_close_tag' );
    add_action( 'comment_form_logged_in_after', 'wpse_67805_open_close_tag' );
    function wpse_67805_open_close_tag()
    {
        ?></div><div class="wpse-67805-comment-textarea"><?php
    }
    add_filter( 'comment_form_field_comment', 'wpse_67805_close_tag' );
    function wpse_67805_close_tag( $textarea )
    {
        return "$textarea</div><div class="wpse-67805-textarea-after"></div>";
    }

Result in TwentyEleven

enter image description here

Not exactly beautiful, you have to adjust the CSS. But the general way should be clear now.