Show comments fields in two columns

Question

I am using comment_form(); in loop-single.php file to show the comment form. I have the following fields in it: Name, Email, Website, Title, Comment. Currently all these form fields show underneath each other. I tried to modify the form in such a way so that all textbox values appear in left column & only the textarea appears in the right column.

I tried to use comment_notes_after, comment_notes_before, comment_form_top, etc. so far but met with no success. So how can I achieve this (Any working code will be greatly appreciated)?

Answer 1

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

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