Customize WordPress Comment Form – Ultimate Guide

An interesting challenge that I found in the redesign of my site is the need to customize the WordPress comment form, so I wanted to share with you the way to do this as a tutorial.

Here is the summary so that you can copy the code for the comment form in case you need it:

General changes
To make general changes to the comment form, what you need to do is modify the comment_form () function that appears in the comments.php file of your theme.

This function is usually used with the default options, but what we will do is pass some parameters to configure its operation. In my case the code was like this:

  1. <? php
  2. // Show comment form
  3. comment_form (array (
  4. ‘title_reply’ => __ (‘What do you think?’, ‘apk’), // Change title
  5. ‘label_submit’ => __ (‘Publish opinion’, ‘apk’), // Change button text
  6. ‘comment_field’ => ‘<textarea id = “comment” name = “comment” cols = “45” rows = “8” aria-required =
  7. “true” placeholder = “‘. __ (‘Write your opinion …’ , ‘apk’). ‘”> </ textarea>’, // Delete paragraph and label of
  8. textarea
  9. ‘comment_notes_before’ => ”, // Delete the notes before the form
  10. ‘comment_notes_after’ => ‘<p class = “comment-notes”>’. __ (‘Just in case, your email will not be shown;)’,
  11. ‘apk’). ‘</ p>’ // Edit the notes after the form
  12. ));
  13. ?>

Check Out: 15+ Top Knowledge Base WordPress Theme Wiki Style

Changes in inputs
In order to modify the way in which the name, email and website inputs behave, we will have to do something different, although quite simple. What we will do is create a function in our functions.php file and associate it with the comment_form_default_fields filter, as shown below:

  1. // Modify the Author, Email and Website fields of the comment form
  2. function apk_modify_comment_fields ($ fields) {
  3. // Variables necessary for this to work
  4.    $ commenter = wp_get_current_commenter ();
  5. $ req = get_option (‘require_name_email’);
  6. $ aria_req = ($ req? “aria-required = ‘true'”: ”);
  7. $ fields = array (
  8. ‘author’ =>
  9. ‘<input id = “author” name = “author” type = “text” value = “‘. esc_attr ($ commenter [‘comment_author’]).
    Check Out: 5 Best SEO Local Search Tactics Your Competitors Probably Aren’t Using
  10. ‘”size =” 30 “‘. $ aria_req. ‘placeholder =”‘. __ (‘Your name’, ‘apk’). ‘”/>’, // We edit the author field
  11. ’email’ =>
  12. ‘<input id = “email” name = “email” type = “text” value = “‘. esc_attr ($ commenter
  13. [‘comment_author_email’]).
  14. ‘”size =” 30 “‘. $ aria_req. ‘placeholder =”‘. __ (‘Your email’, ‘apk’). ‘”/>’, // We edit the email field
  15. ‘url’ =>
  16. ‘<input id = “url” name = “url” type = “text” value = “‘. esc_attr ($ commenter [‘comment_author_url’]).
  17. ‘”size =” 30 “placeholder =”‘. __ (‘Your website’, ‘apk’). ‘”/>’, // We edit the website field
  18. );
  19. return $ fields;
  20. }
  21. add_filter (‘comment_form_default_fields’, ‘apk_modify_comment_fields’);

Supporting the placeholder
The changes we made previously completely eliminate the labels of the form fields and their functionality is replaced by the placeholder attribute, which in most browsers works perfectly, however, there are some (internet explorer 8 and 9) where it is not supported.

To solve this, we will use a jQuery plugin that enables this functionality in old browsers. To include it in the theme, we will put it inside the js folder and call it from our functions file like this:

  1. // Load conditional JavaScript
  2. function apk_js_conditional () {
  3. ?>
  4. <! – [if (gte IE 6) & (lte IE 9)]>
  5. <script type = “text / javascript” src = “<? php echo get_stylesheet_directory_uri ();?> / js /
  6. jquery.placeholder.js”> </ script>
  7. <script type = “text / javascript”>
  8. jQuery (‘document’). ready (function ($) {
  9. $ (‘input, textarea’). placeholder ();
  10. });
  11. </ script>
  12. <! [endif] ->
  13. <? php
  14. }
  15. add_action (‘wp_head’, ‘apk_js_conditional’);

For this plugin to work, it is necessary that jQuery is being previously loaded, so make sure it does.

Also Read: How to Install WordPress Locally on Mac using MAMP

Well, that’s all for now, I hope the tutorial has been useful. If you have any questions or suggestions just leave a comment.

Read More: How to migrate from Blogger to WordPress without losing SEO

 

Leave a Reply

Your email address will not be published. Required fields are marked *