How to add a class to the comment submit button?

4 Views

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.

Post Views: 4

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!