How to add a class to the comment submit button?

It is sad and unfortunately very true that seemingly to add a class to the comment submit button is being held back by a few people that simply do not want it in Core; for whatever reason I might add.

The comments form comes with an incredible amount of hooks and filters to adjust it completely to your own wishes, except it is incredibly difficult to simply add class="button" to the submit “button”.

Why would you want to add a class to the comment submit button in the first place?

Well, nowadays there are many front end frameworks, such as Foundation – WP TIPS is built on top of it – with which you can create buttons on the fly. By simply adding the class “button” to an element you will get a nice button. No need for additional styling, no need for additional code, simply add the class and you’re set!

But some people in the WP Core team think that this is semantically incorrect and therefore do not allow adding this class to the comments template file. There is a 4 year old ticket for something very similar that even has a patch, but it still has not been submitted into Core. There is also this ticket of two years ago that has a patch that adds the class as a customizable parameter.

What solutions are there?

Apart from copying the entire comment template from core and adding it to your theme as TheDeadMedic suggests over at WordPress Answers, there are a few hacks that I found today and which I would like to share here.

Hack #1
This one is quite creative actually. It uses one of the many fields that you can actually change.
Specifically it uses the comment_notes_after parameter. This parameter usually outputs the html tags you can use in your comments. On non-technical blogs these tags likely don’t make much sense to people anyway, so it could be a good trade-off.

Paste the following at the bottom of your theme’s comments.php file:
[php]<?php
$comments_args = array(
// use the "Text or HTML to be displayed after the set of comment fields"-field to to add a class to the comment submit button
‘comment_notes_after’ => ‘<input type="submit" class="button" id="submit-new" value="’ . __( ‘Post Comment’, ‘textdomain’ ) . ‘" />’
);

comment_form( $comments_args );
?>[/php]

If you think you’re done with this, you’re wrong as now you will have two “Post Comment” buttons, one nice looking (your new button) and the old and ugly one below that. A simple CSS rule takes care of that:
[css].form-submit {
display: none;
}[/css]

source

Hack #2
We already know that there is no filter or action to change or remove the submit button generated by the comment form. But we can create a new submit button by hooking it to another action. Add the following snippet to your functions.php or functionality plugin or file:

[php]<?php

function so_comment_button() {

echo ‘<input name="submit" class="button" type="submit" value="’ . __( ‘Post Comment’, ‘textdomain’ ) . ‘" />’;

}

add_action( ‘comment_form’, ‘so_comment_button’ );

?>[/php]

As with Hack #1, you end up with two submit buttons now, so you need to add the CSS again to make the ugly one disappear.

source

Hack #3
Possibly the cleanest solution is the next hack that uses jQuery to simply add a class to the comment submit button:

[js]jQuery(document).ready(function($) { //noconflict wrapper
$(‘#commentform input#submit’).addClass(‘button’);
});//end noconflict
[/js]

Here there is (obviously) no need for additional CSS as it really just adds the class “button” to the input.

source

Which of the three will you use?

Mostly due to simplicity I have chosen to use the 3rd one here on WP TIPS, but I like the first one also very much, if only because it is such a creative solution. Let me know in the comments and please share if you have found another way of doing it!

4 Comments

  1. Sorry to show my ignorance, as you can probably tell from my website, I am a big time rookie. I get the first 2, my problem with the 3rd, is what page are you pasting this code to, or is it a new page you created?

  2. Hi Jeannine, you can add the script to one of the .js files that is included in your theme. Most themes have a js folder, so you could add it to one of the existing files in that folder. Please let me know whether that works for you.

Comments are closed.