5 WordPress Comment Box customization for better visitor experience

WordPress ships with very good commenting system.The default comment form is also very impressive.After using comment system without any modification I made few changes.The changes were made to increase visitor experience and better search engine optimization.I will explain the reasons for making the changes in detail under each customization.

Some changes are made for better search engine optimization.Some changes are made for enriching commenting experience of your website visitors.Couple of changes are to make your comment form look clean and occupy less space than the default one.

But wordPress comment box customization requires modifying WordPress core files.Modifying WordPress core files is not recommended.It is also difficult task for a non technical person.So I decided to write a step by step tutorial on this topic.

I have covered basic WordPress comment box customization tasks.There are plugins available for some of these purpose.But I would not recommend using plugins for simple tasks as these.I have written detailed post on this topic.

I have used most of the customizations on this website.So below code is verified and tested (production ready).You can follow the tutorial and make changes in parallel.Also there is a good reason I made below changes on this website.The most important is Visitor Experience.

Display WordPress Comment box above comments

WordPress comment box is displayed below comments by default.There is nothing wrong in this setting as it allows commenter to read all the comment and then write his/her own comment.There is also a chance that commenter may end of making reply to a person instead of adding a new comment.

But having comment box below comments does have downside as well.Visitors may not scroll down to leave the comment at all.Some might say that if one wants to leave comment he/she will scroll down and leave but this is not the case with most of the users on web.

It is good idea to display comment box before comments so that visitor can post comment without scrolling down the list.This might be reason of almost all the third party comment system like Disqus,Livefyre and Facebook comments display comment box before comments.

Now to display WordPress comment box before comments follow below steps (In this example I would be using Twentytwelve theme but the steps will be more or less same for other themes as well)

  • Open the comments.php file of your theme.This file is present in almost all the themes.
  • You will see below code fragment in your comments.php file (the below code is taken from twentytwelve theme your theme may have same code or may be slightly different).You will find this code on top part of your file
<?php if ( have_comments() ) : ?>
		<h2 class="comments-title">
			<?php
				printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),
					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
			?>
		</h2>
  • This code gets executed if your post has comments.This part output comment title so we need to add comment box right.
  • TO show comment box right after title and comments list modify above code as shown below (the last line is added only rest is same as above)
<?php if ( have_comments() ) : ?>
		<h2 class="comments-title">
			<?php
				printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),
					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
			?>
		</h2>
<?php comment_form(); ?>
  • The job is not yet complete.Current code will show two comment boxes on post with comment, one comment box above comments and one below comments.You do not want that right so read on below.
  • Now move to bottom of the file you will see the last line we included above in code (comment_form).As shown in code below
<?php comment_form(); ?>
  • Modify the code above as shown below.
<?php if ( ! have_comments() ) : ?>
	<?php comment_form(); ?>
<?php endif; // does not have_comments() ?>
  • We are not showing this comment box only if there is no comments made.

WordPress Comment Box Name and Email field in Single line

WordPress comment box has Name field,Email field,URL field,comment field and submit button.These fields are displayed one after another be default.This does takes up a lot of space.The default comment box occupies considerable amount of your page real estate and should be customized to be much slimmer.

You can display Name and Email field in one line to minimize the space occupied by WordPress comments box.Additionally the height of comment field can be made less (this topic is covered in other post you can find all posts in sidebar or below this post.)

Now to show email and name fields of WordPress comment box in a single line follow below steps

  • Open the file comment-template.php inside wp-includes directory of your WordPress installation.
  • Locate below lines of code in the file (Code starts from line number 1524 and ends to 1527) and change every occurrence of paragraph HTML tags with div HTML tags.Below is original source code and modified source code

Original code

'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',

Modified code

'author' => '<div class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
		'email'  => '<div class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
  • Save the file.
  • Now you need to modify style.css file of your theme.It is better to modify child theme but it is not present then modify parent theme.Alternatively if your theme supports custom css then you can use that feature as well instead of making code changes
  • Enter below css code in appropriate place depending upon your theme.
.comment-form-author {
width:250px;
    float:left;
}
.comment-form-email{
width:350px;
    float:right;
}
  • The first css sets width of Name field and second CSS sets width of email field.
  • You can set width of Name and email fields depending upon your theme (for example if content area of your theme is of width 500 then you need to set the width as 200 and 250.Sum of width of these two fields should be equal to or less than you content field width.
  • Save the changes.

I have tried to come up with generic approach to make email and name field in single line of WordPress comment box.You might need to do some changes depending upon your theme.

WordPress Comment Box Remove you may use these HTML line

WordPress comment box by default shows below line under the comment box

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

There is nothing wrong in printing this line but in my view this information does not mean much to a visitor.No way commenter is going to use HTML tags to express his/her thoughts.Until and unless your audience are tech people HTML tags are meaningless.I personally prefer not to show these additional lines below my WordPress comment box.

If you have similar feeling and want to remove this line then follow below steps

  • Browse to the root of your WordPress installation directory.You will be able to see wp-includes directory.
  • Open the wp-includes directory and search for file comment-template.php.
  • Open the file comment-template.php file and locate below line ( it is around line number 1539 assuming you have not made any changes to this file earlier)
'comment_notes_after'  => '

‘ . sprintf( __( ‘You may use these HTML tags and attributes: %s’ ), ‘ ' . allowed_tags() . '‘ ) . ‘

‘,

  • The code shown above is responsible for displaying the line You may use these HTML tags and attributes below WordPress comment box.
  • Delete the line.Make sure you only delete this line in whole nothing else.
  • Save the file and browse your website to see the changes in effect.

WordPress comment box Disable Author Links

WordPress comments shows author name linking back to author website by default.The destination URL is same as that entered by comment author in URL field while posting comment.It is a external nofollow link.Many blogs are removing URL field from their WordPress comments box so that this linking back feature is disabled.

But if you have not removed URL field from beginning then name field will be a external nofollow link back to author website.This problem also occurs if you are moving to default WordPress comments from third party comment system like Disqus,Livefyre or facebook comments.

Now to remove link back to author website or profile link from author name follow below steps

  • Open the comment-template.php file inside wp-contents directory of your WordPress root installation.
  • Locate below line of code inside the file.The code starts from line 147 in the file.The original code is shown below along with modified code.You can directly copy the modified code and paste it over original code to make it work.

Original code

function get_comment_author_link( $comment_ID = 0 ) {
	/** @todo Only call these functions when they are needed. Include in if... else blocks */
	$url    = get_comment_author_url( $comment_ID );
	$author = get_comment_author( $comment_ID );

	if ( empty( $url ) || 'http://' == $url )
		$return = $author;
	else
		$return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
	return apply_filters('get_comment_author_link', $return);
}

Modified code

function get_comment_author_link( $comment_ID = 0 ) {
	/** @todo Only call these functions when they are needed. Include in if... else blocks */

	$author = get_comment_author( $comment_ID );
	$return = $author;
	return apply_filters('get_comment_author_link', $return);
}
  • We are removing the link to author and treating as if no link is present.
  • Instead of returning link we are returning the name of author.
  • By making above changes you can rest assured and there is no need to remove URL field from WordPress comments box.

WordPress comment box Disable comment cookies

I do not know whether you have noticed this or not.If you leave a comment using WordPress comment form on a website it remembers you email id ,website name and name.If you visit the same website after few days it will auto populate your name ,website name and email address.

Your details will not be visible to other users.You can see the auto-filled details if you are using same browser both the time.

WordPress does this by storing a cookie in your browser.This does help users.They do not have to write their details second time.Should cookie be used to store commentators information? This question is debatable.I disabled this feature on this very site due to reasons mentioned below

  • I am using caching system which was caching the cookies as well.So details of recent commentator was available to other users as well.WordPress comment form was filled with user name and other details.This was not good for privacy of commentators.
  • Modern browsers remember the values entered in forms.So commentators can use that feature easily.Although less user friendly than cookie method.

If you also want to disable WordPress comment form cookie follow below steps

  • Open the file comment.php located inside wp-includes folder.This folder is located inside your WordPress root installation directory.
  • Search for wp_set_comment_cookies in the file.It is situated somewhere near line 614.I have copied the code below
 function wp_set_comment_cookies($comment, $user) {
    if ( $user->exists() )
        return;

    $comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
    setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
    setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
    setcookie('comment_author_url_' . COOKIEHASH, esc_url($comment->comment_author_url), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
}
  • You need to comment the code to disable cookie.
  • The modified code is reproduced below (There is /* at second line and at second last line */).Rest of the code is same.Adding /* and */ comments the code in between.
  • So this function will get called but will not executed any code.
 function wp_set_comment_cookies($comment, $user) {
 /* if ( $user->exists() )
        return;

    $comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
    setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
    setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
    setcookie('comment_author_url_' . COOKIEHASH, esc_url($comment->comment_author_url), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
 */
}

Save the file and enjoy.You can test whether the changes are correct or not by making a comment on your site using WordPress comment form and then re visit your site.Your details will not be pre populated into the comment form.Above testing process should be carried out without login as Admin.

Conclusion

I will update this post with more changes if required in future.Since the post contains codes snippet I will keep it updated with recent WordPress updates.

Consider shaing this post in case you found this useful.

8 thoughts on “5 WordPress Comment Box customization for better visitor experience

  1. You have brought up a very excellent details , regards for the post. kgabddfakgbafbkb

    • thanks for dropping by

  2. Hi nice post. I need a favour if you don't mind. I am using ignite theme and want some changes in comment box. some are covering here some are not. check this link. I am working on it.

    1. I want to remove "You must be logged in to post a comment". as it redirects user to wordpress login but I am using buddypress login. So I want to remove this line or if its possible to remove hyperlink.

    2. I want to lower font size of "Be First to Comment" if it is possible. I tried a lot but did not get any clue on this. If you need I can provide you my comments.php coding.

    Really need a help. Thanks in advance.

    • I can provide some pointers do let me know if it does not help

      1.You must be login to post a comment can be customized editing wp-comments file inside wp-includes ( this file is referenced in the post also)
      2.This is the theme issue.You need to customize your theme style.css file.

  3. Thanks for reply.

    #2 I changed the theme. issue is solved.

    #1 I did some coding with the help of php tutorial and remove redirect it to new login page.

    but new issue raised. when I put wrong password, it redirects to me again default wordpress login page.

    Can you please provide some input? 🙂

    • Without details of your changes I am unable to make any comment

  4. I would recommend not to install commnet box on your website at all. Yeah true that it brings additional traffic to your website, though you will get spam and this required very strict moderation. If you are ready to spend 2 hours each day for cleaning your comments, then it will work for you.

  5. Thanks a lot. This a tips which has helped me to get better visitor experience

Leave a Comment