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.

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.

share|improve this question

6 Answers 6

up vote 5 down vote accepted

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

share|improve this answer
    
Thanks for the advice and comment form. :) I have a theme option that helps style the theme based on if it is a light or dark ui. If there was a simple function that could add a class I could wrap that function in an if:isdark kind of statement. I'll have to look more closely at longform function you provided. –  mattrepublic Jun 10 '11 at 16:22
1  
In my Oenology Theme, I output custom CSS based on whether the current color scheme is dark or light. Here's the \functions\options.php file that does all of the heavy lifting. –  Chip Bennett Jun 10 '11 at 16:43
    
@Chip Bennett Thanks Chip! –  mattrepublic Jun 10 '11 at 18:04

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
share|improve this answer
    
Never thought of that. That's hacky, but cleaner than hacking core. Copying your code right now! –  ageektrapped Nov 1 '12 at 19:28
    
I already have a heavily used jquery site. So adding this chunk of code was really easy and worked like a charm. –  Jamie Feb 10 '13 at 4:03
    
fantastic, thanks! –  Piet Jun 17 '13 at 3:43

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.

share|improve this answer
1  
Absolutely. If you need greater specificity, target your CSS selectors higher up. Look at the ID or class of the container that holds the comment reply form, or that holds the entire comments markup. Also, there should only ever be one comment reply form on any given page, so I don't see the harm in targeting the submit button ID, passed via argument, for applying CSS. –  Chip Bennett Jun 10 '11 at 16:41
5  
With all due respect, I disagree. I have a website+blog. I have defined a class & used it for all the buttons. Also I have different states for the buttons (normal, hover). If I were to not apply a class to the comment button, then that would mean that I have to target the blog comment button by ID and start adding the selector right next to the already defined class (comma separated). That means, I am unable to make use of already defined class & this is not preferred. Simply applying the class name to button makes life all the more easy without having me to add ID manually & keeps it simple. –  Devner Nov 16 '12 at 19:19
    
Devner: You're using CSS exactly backwards from the way it is intended to be used. Class names and ID's should be semantically defined, not defined according to how you want them styled. The whole point is to be able to change the CSS instead of changing the HTML, because the HTML is often generated, while the CSS is much easier to change. –  Otto Nov 17 '12 at 0:28
2  
Some frameworks such as Bootstrap provide button styles on the class e.g .btn - although not a big problem, it would make things easier if a class could be added. –  henrywright Sep 18 '13 at 16:11
2  
I know this is several years old at this point, but I'm surprised by this statement: "There's no advantage I can see, from any angle, to putting a class on the comment form's submit button." Why add an additional ID to the stylesheet when an existing class (say for button styling) can provide the styling you need? –  Chris Ferdinandi Oct 15 '13 at 14:51

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

share|improve this answer

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',);
share|improve this answer

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!

share|improve this answer
4  
it's a bad idea to hack core and on this site some people take it personally. Since you are new here, I'm going to take away your down vote that someone else left. But now you know. –  mattrepublic Oct 19 '11 at 11:50
1  
Alex, Taylor is right. NEVER modify core files! NEVER EVER! –  Devner Nov 16 '12 at 19:23
1  
Never, modify, core files. –  Rantiev Aug 17 at 18:25

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.