How to add a class to the comment submit button?

Question

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.

Answer 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 ;)

Answer 2

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.

Answer 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

Answer 4

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! :)

Answer 5

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!