Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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)?

share|improve this question

1 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

enter image description here

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

share|improve this answer
    
Thanks for the reply. My theme does not have a comments.php file. Rather, the code is written in functions.php file to populate the form with custom fields. So in this case, what can be done to separate them? –  Devner Oct 11 '12 at 16:25
    
A comments.php is not necessary, you need just a call to `comment_form()´ somewhere. If your themes does not even have that you have to add the tags manually to its code. –  toscho Oct 11 '12 at 16:56
    
I implemented your solution & it looked like I am doing something wrong & hence I could not get the results. So I did find an online resource that shows you the almost exact same code that I am using for showing the comment_form. Please refer to this page: codex.wordpress.org/Function_Reference/comment_form I am using $fields = array('author' => ...); If you can let me know how to implement your solution to the style of coding indicated by the code in the above page, that will be really helpful. –  Devner Oct 15 '12 at 7:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.