How To Customise WordPress Comment Submit Button

2 Views

I am trying to customise the output code of 

<?php comment_form(); ?>

At the moment the submit button outputs the following:

Read More
<p class="form-submit">
    <input name="submit" type="submit" id="submit" value="Post Comment">
    <input type="hidden" name="comment_post_ID" value="486" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>

I would like it to output the following: 

<div class="darkbutton" onclick="document.commentform.submit()">
    <span class="darkbutton-left"></span><a href="javascript: submitform()">Log In</a>  
    <span class="darkbutton-right"></span>
</div>

so as the completely restyle the button. Now I know it could be done by editing the core WordPress files in comment-template.php but I really don’t want to have to do this if there is any other way.

Any suggestions greatly appreciated! 🙂

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Have a trick

    .form-submit{display: none;}

    You can following after

    $args = array(
 'comment_notes_after' => '<button type="submit" id="submit-new"><span>'.__('Post Comment').'</span></button>' 
);
comment_form($args);

  2. I needed to add a class to form tag and the submit button. I don’t know where I found it, but this solution helped me out. You have to modify the str_replace to suite your needs.

    ob_start(); 
comment_form($comments_args, $post_id);
$form = ob_get_clean(); 
$form = str_replace('class="comment-form"','class="comment-form my-class"', $form);
echo str_replace('id="submit"','class="btn btn-warning"', $form);

  3. Wrodpress has “Pluggable Functions” That allow you to overwrite some core functions. This is useful because they won’t overwrite your changes when upgrading and such. However, it does not look like the comment_form() is one of them.

    If you’re looking to avoid modifying core files, why not just edit your template file to output your desired code instead of calling the comment_form() function? Otherwise, I’m pretty sure you’re just going to have to modify that file.

  4. You can read some discussion about this issue here, but it doesn’t look like any fixes have been made to the WP codebase.

    For now, I’m making style changes to my button on client side with jQuery. You could generate your <div> block with jQuery, and then hide their form-submit block by doing this:

    .form-submit {
    display: none;
}

    This isn’t foolproof code, but it’s a hack that will work until they implement something better.