How to Change the Submit Comment Button in WordPress

Most of the important elements of a WordPress blog page can be rendered via inbuilt functions. If we look at the comment form for example, it can easily be outputted by using the function “comment_form()”. Themes which use these ready-made interfaces are automatically brought up to date with the latest improvements and tweaks made by the WordPress team. However, there are quite a few themes which don’t follow this practice and implement their own custom functions instead. This is most likely the case if you’re using any kind of WordPress “framework” like Genesis. While they may have a good reason for building their own functions, it means that these can be out of date when the WordPress team makes an improvement.

I’d written earlier about how the comment form of Genesis has a problem with tabindex where the final “Submit Comment” button doesn’t possess a tabindex property and therefore doesn’t receive focus when a user presses the “tab” button after entering a comment to post it. At that time, I’d recommended rewriting the entire comment form from scratch to remove the tabindex properties of the first four fields.

However with the introduction of WordPress 4.2.0, a new filter has been made available to us called “comment_form_submit_field”. You can see the documentation on the developer section of WordPress. It finally allows us to exert some control over the HTML output of the “Submit” button. What this means is that instead of having to rewrite the comment form code thereby risking obsolescence when it gets updated, we can instead simply add a new tabindex property to the comment submit button. This is a much more scalable, efficient, and safe way to resolve the issue.

Using the “comment_form_submit_field” Function

Keep in mind that this only works on the very latest version of WordPress as of this writing – 4.2.0. Which means that if you haven’t updated WordPress since 23 April 2015, this filter will be unavailable to you. So let’s take a look at how to hook into the HTML of the comment form submit button and make some changes of our own.

In this example, what I want to do is add an HTML property of tabindex = “5” to the submit button for those themes where the name/email/URL and comment text fields have tabindex properties of one, two, three and four respectively as shown in the screenshot here:

To preserve consistency, I need to increment the tabindex property of the comment submit button by 1. To do this, open up your functions.php file and insert the following code:

function change_submit_button($submit_field) {
	$changed_submit = str_replace ('name="submit" type="submit" id="submit"', 'name="submit" type="submit" id="submit" tabindex = "5"', $submit_field);
    return $changed_submit;
}
add_filter('comment_form_submit_field', 'change_submit_button');

You see the new filter ” comment_form_submit_field” in action. By default it accepts the existing HTML for the submit button code as a parameter, but it can also accept the comment form arguments as an optional. In this function what I do is simple – I simply search for the submit button code within the HTML and replace it with the exact same thing with a new “tabindex” attribute attached to it. I then return this modified HTML to be the new submit button instead.

These few lines of code are able to achieve the same effect as rewriting the entire comment form in the first place. You can see in the screenshot below that our new tabindex= “5” line has been added to the submit button code:

With this in place, users are no longer directed to the top of the page after hitting the “tab” button when submitting a comment. Instead, it works as expected and the focus switches to the submit button ready for the user to hit the “enter” key as they are used to doing for all kinds of forms. The new filter introduced and 4.2.0 finally allows us to make this tweak without excessive coding.