Customising a WordPress Comment Form

By default the WordPress Comment Form is very plain and it often needs a touch of customisation. On the latest theme I am working on I wanted a few changes to the comment form. To do this I needed to change the arguments passed to the comments form along with a few lines of styling.

What I Required

You will notice on the image that 3 of the fields are clearly marked as required, the Name and Email fields are next to one another and the GDPR consent check-box is prominently displayed just before the Submit button.

Function

I added the following function to the file template-functions.php (in your theme the functions could be stored elsewhere):

if ( ! function_exists( 'your_domain_comment_args' ) ) {
	/**
	 * Sets arguments for comments.
	 * Adds classes around author and email fields so that these can be styled differently from the rest.
	 * Sets comment policy, the reply title on the comment form as well as sets the textarea to required.
	 */
	function your_domain_comment_args() {
		$commenter = wp_get_current_commenter();
		$req = get_option( 'require_name_email' );
		$aria_req = ( $req ? " aria-required='true'" : '' );

		$fields = array(
			// Author Field.
			'author' => '<div class="comment-form-field-wrapper"><div class="comment-form-author"><label for="author">' . __( 'Name', 'your-domain' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<br /><input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
			// Email Field.
			'email' => '<div class="comment-form-email"><label for="email">' . __( 'Email', 'your-domain' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
			'<br /><input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div></div>',
			// Website Field.
			'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website', 'your-domain' ) . '</label> <br /><input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
		);
		// Consent Checkbox.
		$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';
		$fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' /><label for="wp-comment-cookies-consent" class="consent-label">' . __( 'Save my name, email, and website in this browser for the next time I comment.', 'your-domain' ) . '</label></p>';
		if ( isset( $args['fields'] ) && ! isset( $args['fields']['cookies'] ) ) {
			$args['fields']['cookies'] = $fields['cookies'];
		}
		// Change the Comments Title.
		if ( get_comments_number() ) {
			$reply = __( 'Join the Conversation', 'your-domain' );
		} else {
			$reply = __( 'Start the Conversation', 'your-domain' );
		}

		$comments_args = array(
			// Set the Comments Title Set Above.
			'title_reply' => $reply,
			// Notes that appear below the Comments textarea.
			'comment_notes_after' => '',
			// Main Comments Textarea.
			'comment_field' => '<p style="margin-bottom: 0;" class="comment-form-comment"><label for="comment">' . __( 'Comment', 'your-domain' ) . '<span class="required"> *</span></label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
			'fields' => apply_filters( 'comment_form_default_fields', $fields ),
		);
		comment_form( $comments_args );

	}
	add_action( 'your_domain_comment_args', 'your_domain_comment_args' );
}// End if().

The code is quite a mouthful. Let me try and break things down a bit.

  • The Author and Email fields are now wrapped in a class called comment-form-field-wrapper.
  • The Author field has a class called comment-form-author and the Email field a class called comment-form-email assigned to each of them respectively.
  • Because of the changes WordPress implemented with regards to the EU General Data Protection Regulation (GDPR) the Consent check-box has become very important. We all know that if your site has comment moderation turned on and the user does not check this check-box the comment will simply disappear, there will be no warning that the comment has gone for moderation. In this code you could include a warning to this effect by simply adding the warning in the part that reads Save my name, email, and website …
  • In the Comments Title section a conditional statement has been added. If there are no comments as yet the Comment Title will read Start the Conversation. If there are other comments this same title will read Join the Conversation.
  • In this code I left the comment_notes_after blank. If I had entered something here (maybe a comment policy etc.) whatever I had entered would have appeared below the Comment text-area.
  • The code adds a required class to the main text-area. By default the comments text-area has always been a required field but it is not marked as such.
  • The code ends with comment_form( $comments_args ); .

Calling The Function

At the bottom of your file comments.php you would normally have something like comment_form() to call your comments. This single call would now have to be replaced with your_domain_comment_args().

Please remember to change the your_domain and your-domain bits both here as well as in the function to your theme’s real domain name.

Styling

All the relevant fields on the comment form now have a class of required. You will need a single line of styling to change the colour;

.required {
    color: red;
}

Add whatever colour you prefer.

The Author and Email fields now are side by side. This could cause a problem on small screens. To make this responsive you will need the following styling:

.comment-form-field-wrapper {
	overflow: hidden;
	margin-top: 16px;
}

.comment-form-author,
.comment-form-email {
	width: 100%;
	float: none;
	margin-right: 0;
}

.comment-form-email {
	margin-top: 16px;
}

@media screen and (min-width: 48.9375em) {
	
	.comment-form-author {
		width: 47.5%;
		float: left;
		margin-right: 5%;
	}

	.comment-form-email {
		width: 47.5%;
		float: right;
		margin-right: 0;
		margin-top: 0;
	}
	
}

Please remember that I style mobile-first.

I have now achieved everything I set out to do. It would now be very easy to make even more changes should I need them one day.

Thanks for visiting.

Arnold.

Start the Conversation

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


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.