How to add a class to the comment submit button?

How do I add a class to the comment submit button? The simplified function
comment_form(array('id_submit'=>'buttonPro')); obviously only changes the id and class_submit does not seem to exist.

I have read through both Otto’s and Beau’s writeups but to no avail.

Related posts

Leave a Reply

7 comments

  1. If you check out the source of the function comment_form(), you’ll see it doesn’t even print a class on the input;

    <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
    

    I’m guessing you need to add a class for styling? Why not modify your CSS to just;

    input.submit, #buttonPro {
        /* some awesome style */
    }
    

    Otherwise I guess the ‘easiest’ solution would be to simply copy the function to your functions.php, rename it, add in a class argument & print, and use that instead – which you can find here 😉

  2. From WordPress Version 4.1 (trac ticket #20446) it’s now added to pass your own class as an argument of comment_form($args) using 'class_submit' array key:

    $args = array( 'class_submit' => 'btn btn-default' );
    

    No need to do extra hard work. (Edited the Codex too) 🙂

  3. I’m working with the Foundation framework as well. I’ve found that the easiest way to add a class to a non-filterable element is to do it with jQuery.

    jQuery(document).ready(function($) { //noconflict wrapper
        $('input#submit').addClass('button');
    });//end noconflict
    
  4. Why do you need a class on the submit button? You can give it an ID, as you have discovered, and that’s all you need for styling it.

    comment_form(array('id_submit'=>'buttonPro'));
    

    Then to style it:

    input#buttonPro {...}
    

    Simple. Or, if you prefer to use classes only for some reason:

    .form-submit input {...}
    

    There’s no advantage I can see, from any angle, to putting a class on the comment form’s submit button.

  5. I was searching for the same solution and at last i found the solution, the below code worked perfectly for me, I wanted to add “btn btn-primary” class to the submit button in comment form.

    ob_start();
    comment_form( $args );
    $form = ob_get_clean(); 
    $form = str_replace('class="comment-form"','class="comment-form"', $form);
    echo str_replace('id="submit"','class="btn btn-primary"', $form);
    

    the $args i used are

    $args = array(
    'comment_field' => '<p class="comment-form-comment"><label for="comment">Comment</label> <textarea class="form-control" id="comment" name="comment" cols="35" rows="12" aria-required="true"></textarea></p>',
    'fields'        => array(
        'author' => '<p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input class="form-control input-comment-author" id="author" name="author" type="text" value="" size="30" aria-required="true"></p>',
        'email'  => '<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input class="form-control input-comment-email" id="email" name="email" type="text" value="" size="30" aria-required="true"></p>',
        'url'    => '<p class="comment-form-url"><label for="url">Website</label> <input class="form-control input-comment-url" id="url" name="url" type="text" value="" size="30"></p>',
    ),
    'cancel_reply_link' => '<button class="btn btn-danger btn-xs">Cancel reply</button>',
    'label_submit' => 'Post Comment',);
    
  6. I suggest those who have this problem to set a style for “post-comment” id, like what i did:

    #post-comment {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #FFFFFF;
    padding: 8px 20px;
    float: left;}
    

    good luck! 🙂

  7. I’m going to reply (late) since I was looking for an answer to this and decided to tackle it myself.

    First, to answer the question “why add a class?”… In my case, I chose to use a UI framework called Foundation to design my most recent theme for my personal blog. I chose it precisely because I like its style for buttons. However, it requires the developer to add a class to an <input> button, and I didn’t realize that couldn’t be done in WP until I was almost completely done with the theme!

    So, here’s what I did. I had to edit the /wp-includes/comment-template.php file, so use at your own risk because it could be wiped out during a WP upgrade.


    After line 1540 (as of version 3.2.1) add the following line:

    'class_submit'         => 'submit',
    

    Then change line 1576 to the following:

    <input name="submit" class="<?php echo esc_attr( $args['class_submit'] ); ?>" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
    

    Now you have a new default value called class_submit that can be included in the $args array parameter on the comment_form() function:

    <?php comment_form(
            array(              
                'class_submit' => __('XXX'),
            )
        ); ?>
    

    Happy Wording!