WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Style the WordPress Comment Form (Ultimate Guide)

How to Style the WordPress Comment Form (Ultimate Guide)

Last updated on October 2nd, 2018 by Editorial Staff
262 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Style the WordPress Comment Form (Ultimate Guide)

Do you want to change the style of WordPress comment form on your website? Comments play an important role in building user engagement on a website. A good-looking user-friendly comment form encourages users to participate in discussion. That’s why we have created the ultimate guide on how to easily style the WordPress comment form.

Styling WordPress comment form

Before Getting Started

WordPress themes control the appearance of your website. Each WordPress theme comes with several files including template files, functions file, JavaScripts, and stylesheets.

Stylesheets contain the CSS rules for all elements used by your WordPress theme. You can add your own custom CSS to override your theme’s style rules.

If you haven’t done this before, then see our article on how to add custom CSS in WordPress for beginners.

Apart from CSS, you may also need to add some functions to modify the default appearance of your WordPress comment form. If you haven’t done this before, then please see our article on how to copy and paste code in WordPress.

That being said, let’s take a look at how to style the WordPress comment form.

Since this is a fairly comprehensive guide, we have created a table of content for easy navigation:

  • Change WordPress Comments with Default CSS Classes
  • Adding Social Login to WordPress Comment Form
  • Adding Comment Policy Text in WordPress Comment Form
  • Moving Comment Text Field to Bottom
  • Removing Website (URL) Field from WordPress Comment Form
  • Adding Subscribe to Comments Checkbox in WordPress
  • Add Quicktags in WordPress Comments

Changing Comment Form Style in WordPress

Inside most WordPress themes there is a template called comments.php. This file is used to display comments and comment form on your blog posts. The WordPress comment form is generated by using the function: <?php comment_form(); ?>.

By default, this function generates your comment form with three text fields (Name, Email, and Website), a textarea field for the comment text, a checkbox for GDPR compliance, and the submit button.

You can easily modify each of these fields by simply tweaking the the default CSS classes. Below is a list of the default CSS classes that WordPress adds to each comment form.

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.form-submit

By simply tweaking these CSS classes, you can completely change the look and feel of your WordPress comment form.

Let’s go ahead and try to change a few things, so you can get a good idea on how this works.

First, we will start by highlighting the active form field. Highlighting the currently active field makes your form more accessible for people with special needs, and it also makes your comment form look nicer on smaller devices.

	
#respond { 
background: #fbfbfb;
padding:0 10px 0 10px;
}
 
/* Highlight active form field */
 
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
  
  
#respond input[type=text]:focus,
input[type=email]:focus, 
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

This is how our form looked like in the WordPress Twenty Sixteen theme after the changes:

Highlight active comment form field

Using these classes, you can change the behavior of how text appears inside input boxes. We will go ahead and change the text style of the author name and the URL fields.


#author, #email { 
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d; 
letter-spacing:.1em;
} 
 
#url  { 
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
} 

If you take a close look in the screenshot below, the name and email field font is different than the website URL.

Changing comment form input style

You can also change the style of the WordPress comment form submit button. Instead of using the default submit button, let’s give it some CSS3 gradient and box shadow.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 
 
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a; 
}
#submit:active { 
position:relative;
top:1px;
}

Comment form button style

Taking WordPress Comment Forms to the Next Level

You might be thinking that was too basic. Well we have to start there, so everyone can follow along.

You can take your WordPress comment form to the next level by rearranging form fields, adding social login, subscribe to comments, comment guidelines, quicktags, and more.

Add Social login to WordPress Comments

Let’s start with adding social logins to WordPress comments.

The first thing you need to do is install and activate the WordPress Social Login plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » WP Social Login page to configure plugin settings.

WP Social Login settings

The plugin will require API keys in order to connect with social platforms. You will see links with instructions on how to get this information for each platform.

After entering your API keys, click on the save settings button to store your changes.

You can now visit your website to see the social login buttons above your comment form.

Add social login buttons to comment form

Adding Comment Policy Text Before or After Comment Form

We love all of our users, and we really appreciate them taking a few minutes to leave a comment on our site. However, to create a healthy discussion environment it is important to moderate comments.

To have full transparency, we created a comment policy page, but you can’t just put this link in the footer.

We wanted to have our comment policy be prominent and visible for all users who are leaving a comment. This is why we decided to add the comment policy in our WordPress comment form.

If you want to add a comment policy page, then the first thing you need to do is create a WordPress page and define your comment policy (you can steal ours and modify it to meet your needs).

After that, you can add the following code in your theme’s functions.php file or a site-specific plugin.


function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
 
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

The above code will replace the default comment form before notes with this text. We have also added a CSS class in the code, so that we can highlight the notice using CSS. Here is the sample CSS we used:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

This is how it looked on our test site:

Comment policy notice

If you want to display the link after the comment text area, then use the following code.


function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='http://www.example.com/comment-policy-page/'>comment policy</a>.</p>";
    return $arg;
}
 
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Don’t forget to change the URL accordingly, so it goes to your comment policy page rather than example.com :)

Move Comment Text Field to Bottom

By default, WordPress comment form displays the comment text area first and then name, email, and website fields. This change was introduced in WordPress 4.4.

Before that, WordPress websites displayed name, email, and website fields first, and then the comment text box. We felt that our users are used to seeing the comment form in that order, so we still use the old field order on WPBeginner.

If you want to do that, then all you need to do is add the following code to your theme’s functions.php file or a site-specific plugin.

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
 
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'); 

This code simply moves the comment text area field to the bottom.

Comment text area to bottom

Remove Website (URL) Field from WordPress Comment Form

The website field in the comment form attracts a lot of spammers. While removing it won’t stop spammers or even reduce spam comments, it will certainly save you from accidentally approving a comment with bad author website link.

It will also reduce a field from the comment form, making it easier and more user-friendly. For more on this topic, see our article on removing website url field from WordPress comment form

To remove URL field from comment form, simply add the following code to your functions.php file or a site-specific plugin.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Remove URL field from comment form

Add a Subscribe to Comments Checkbox in WordPress

When users leave a comment on your website, they might want to follow up on that thread to see if someone has replied to their comment. By adding a subscribe to comments checkbox, you enable users to receive instant notifications whenever a new comment appears on the post.

To add this checkbox, first thing you need to do is install and activate Subscribe to Comments Reloaded plugin. Upon activation, you need to visit Settings » Subscribe to Comments to configure the plugin settings.

For detailed step by step instructions, see our article on how to allow users to subscribe to comments in WordPress.

Subscribe to comments reloaded

Add Quicktags in Comment Form

Quicktags are formatting buttons that enable users to easily style their comments. These include buttons to bold, italicize, add a link, or blockquote.

To add quicktags, you need to install and activate the Basic Comment Quicktags plugin. For details, see our article on how to easily add quicktags in WordPress comment form.

This is how your comment form will look after adding quicktags.

quicktags in comment form

We hope this article helped you learn how to style WordPress comment form to make it more fun for your users. You may also want to see our tips to get more comments on your WordPress blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

262 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

83 Comments

Leave a Reply
  1. tom says:
    Dec 3, 2019 at 8:26 am

    Great Article! thanks a lot

    Reply
    • WPBeginner Support says:
      Dec 4, 2019 at 10:28 am

      You’re welcome :)

      Reply
  2. mobileninja says:
    Jul 21, 2019 at 2:32 am

    Thank you so much. It is very helpful article.

    Reply
    • WPBeginner Support says:
      Jul 22, 2019 at 12:55 pm

      Glad it could be helpful :)

      Reply
  3. Emma says:
    Jun 2, 2019 at 10:36 am

    Hi. Great tutorial. I wanted to refrain my users from adding their website url to the comment section, because it causes crashes for some users (no idea why). I succeeded, but now it still says the usual “remember my name, e-mail adres and website for the next time I leave a comment”. Do you know how to fix that?

    Reply
    • WPBeginner Support says:
      Jun 3, 2019 at 1:00 pm

      You may want to check with your theme’s support and let them know about the crashing and editing that message.

      Reply
  4. nextprotips says:
    May 27, 2019 at 4:28 am

    Thanks a lot. I was searching for this . After searching 30 minutes i got it finally

    Reply
    • WPBeginner Support says:
      May 28, 2019 at 2:37 pm

      Glad our guide could help :)

      Reply
  5. Deepak Bharti says:
    Mar 28, 2019 at 3:19 am

    Thanks for sharing this type of article. it is helpful for me and my website.

    Reply
    • WPBeginner Support says:
      Mar 28, 2019 at 11:06 am

      Glad our article could be helpful :)

      Reply
  6. Rubel Ahmed says:
    Mar 25, 2019 at 2:25 am

    Hello

    Nice article and I have used some of your suggestions but I found a code error that needs fixing under ‘Adding Comment Policy Text Before or After Comment Form’.

    You have placed the add filter within the function or otherwise it won’t get executed, it needs to be moved outside of the function.

    Rubel

    Reply
    • WPBeginner Support says:
      Mar 25, 2019 at 3:25 pm

      Both filters should be outside the function but we will certainly take another look and update if we can see the error :)

      Reply
  7. suvo says:
    Mar 14, 2019 at 2:29 am

    obviously like your web-site Post Thanks for Shearing. i Read your Blog every day.it very bothersome to tell the reality then again I’ll definitely come back again.Please write more about this topics.

    Reply
    • WPBeginner Support says:
      Mar 14, 2019 at 10:07 am

      Glad you like our articles :)

      Reply
  8. ARPIT says:
    Jan 7, 2019 at 6:35 am

    The Information you’ve provided here is very good. Nice Tutorial. Thanks for sharing. I was looking for a long time for this.It’s really helping me get more familiar with WordPress!

    Reply
    • WPBeginner Support says:
      Jan 7, 2019 at 11:58 pm

      Hi Arpit,

      We are glad you found the tutorial helpful. :)

      Reply
  9. Hồ Ngọc Thanh says:
    Oct 24, 2018 at 12:14 am

    I can’t find #respond { }
    #reply-title { }
    #cancel-comment-reply-link { }
    #commentform { }
    #author { }
    #email { }
    #url { }
    #comment
    #submit
    in my wordpress theme?

    Reply
    • WPBeginner Support says:
      Oct 24, 2018 at 1:16 pm

      Your theme may have styled it differently, for finding what they are you would want to take a look at our article: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      The # would be for the ID of the object so if something had the ID of button then it would be #button

      Reply
  10. Chintan says:
    Jun 13, 2018 at 2:29 pm

    How to add real-time comment preview?

    Reply
    • Paulina says:
      Aug 5, 2018 at 10:47 am

      Hello, thank you for this very useful article. I am interested in adding a text before the button “submit”. In the code that you are providing here: would I need to change the words ‘wpbeginner’ to anything else that is connected to my own site?

      Reply
      • Akramul Hasan says:
        Oct 3, 2018 at 10:43 am

        Hello Paulina,
        You can add text or anything before Submit button by using a simple filter hook that works for comments form fields.

        Reply
  11. Hena says:
    Jun 3, 2018 at 7:45 am

    wow!! It’s very good

    Reply
  12. Woolker Cherenfant says:
    Apr 3, 2018 at 9:04 am

    Hi! Great article as usual. But I am wondering how can I change the word “says” in the comment section. I want to translate it into Haitian Creole “di”. Any help with that?

    Thanks in advance.

    —Woolker

    Reply
  13. Tisha says:
    Mar 23, 2018 at 7:41 am

    Is it possible to copy the code to blogger?. Because I want to make WordPress style comment in my Blogger blog. Thanks for your help. :)

    Reply
  14. Mate Hodi says:
    Nov 14, 2017 at 10:24 am

    Hey!

    Great article! I was looking for a solution to change the “Leave a Reply” part. Do you have any idea how I may change it?

    Reply
  15. Neeraj says:
    Sep 24, 2017 at 8:47 am

    This is a helpful guide which gave thorough guidance to me about Comments Section Optimization.

    Reply
  16. Kevin Byrnes says:
    Apr 29, 2017 at 11:25 am

    Excellent article. I will be facing some of these issues as well..

    Reply
  17. JP says:
    Feb 18, 2017 at 7:06 pm

    Hi
    I love your tutorials! I still have a question though; is it popular to change the greyish background color of the entire comment form to some thing else? Perhaps even to an image instead of a solid color?

    Reply
  18. Mahesh says:
    Feb 8, 2017 at 6:41 am

    I’m Loving Your Tuts It is very Easy to Understand and More Useful any Where.

    Thanks For Sharing Sir.

    Reply
  19. Lisa Marten says:
    Jan 13, 2017 at 4:01 pm

    Can I put the comment box to be fill in above the list of posted comments instead of below?

    Reply
    • WPBeginner Support says:
      Jan 13, 2017 at 11:54 pm

      Yes you can.

      Reply
  20. SiRetu says:
    Oct 16, 2016 at 12:06 am

    Is there any complete tutorial? I mean start from scratch including creating comments.php file from the first time. Thanks, great tutorial as always

    Reply
  21. Luis Izquierdo says:
    Oct 7, 2016 at 10:46 pm

    I am customizing my wp themes child theme and I was able to place the policy text above the comment form. But it only shows to logged out users. How do I get it to show to Logged in users?

    Reply
  22. Luca Morelli says:
    May 12, 2016 at 11:09 am

    Hello great tutorial: thanks!

    I keep improving my knowledge about WordPress thanks to your lessons. I have a question (I don’t know much about php): I managed to add the comment policy text before the submit button, but I noticed that if I click “reply” and see your codes, the php output is inside the paragraph tag together with a class named “commentpolicy”. How did you achieve that (e.g. how to style the php output on an HTML webpage with a tag and a class, which can then be styled with CSS)?

    Hopefully I explained it correctly and my question makes sense.

    Again many thanks for all your tutorials.

    Luca

    Reply
    • WPBeginner Support says:
      May 12, 2016 at 10:05 pm

      We are not sure what you are trying to ask. Can you please explain bit more? Thanks.

      Reply
      • Jayanta says:
        Sep 15, 2016 at 12:46 am

        I have the same question. Trying to clarify a bit.
        I have added your snippet to get the comment policy text before comment field. But This is only some text, no special div class is added for that text. So, I am not able to style it using css (I would like to make the text smaller, or may be put a border-box to it). Please guide us. Hope it makes sense now. Thank you so much.

        Reply
  23. Erick says:
    Mar 18, 2016 at 8:20 am

    How do you make comments look like this website?

    Reply
  24. gift charles says:
    Jan 3, 2016 at 8:35 pm

    Thank you very much for this,i was looking for a long time for a way to make the built in comments look better because i prefer them to other services like facebook comments or disqus

    Reply
  25. Adnan Bashir says:
    Dec 14, 2015 at 12:54 am

    As you have noticed, the newest version of WP (4.4) is displaying Name and Email form below Text box, do you have any idea how to revert it to old style (Name and Email box above the Text box) ?
    Thanks

    Reply
    • WPBeginner Support says:
      Dec 16, 2015 at 10:21 am

      Please take a look at How to move comment text field to bottom in WordPress 4.4

      Reply
      • Adnan Bashir says:
        Dec 17, 2015 at 12:42 am

        Thank you, now the Comment form is looking better :D

        Reply
  26. mario says:
    Jun 10, 2015 at 7:05 am

    Hello, great tutorial !
    But I’d like to know one more thing: is it possible to add a checkbox for the privacy policy? Since wordpress system collect the ip, I want my users to check teh box before sending the message. Any suggestion ? Thank you !

    Reply
    • WPBeginner Support says:
      Jun 10, 2015 at 9:02 am

      Please see our article on how to add custom fields to comments form in WordPress.

      Reply
  27. Ramon says:
    Apr 12, 2015 at 9:41 am

    I would like to have the input comments fields above the comments them self so my customers can leave a comment without the need to scroll all the way down the page.

    Is there an easy way to accomplish this?

    Thank you.

    Reply
  28. dragons says:
    Mar 2, 2015 at 4:51 pm

    Is there any way to ad an EDIT button for the commenters? So they can fix typos and such? Also what if the site wants to allow commenters the ability to upload images in the comments? Is there a way to do that?

    Reply
  29. Rick Hellewell says:
    Jan 30, 2015 at 8:59 pm

    Good tutorial. Used it to develop my own customized contact form
    plugin, where I re-define the $args for the comment form fields.

    But it turns out, while testing, that some themes create their own
    ‘textarea’ field, which adds to my ‘textarea’ field, resulting in two
    comment text fields. Not good.

    I have set my add_filter( ‘comment_form_default_fields’…. with a
    higher priority (99) so that it happens later in the ‘page build’ (after
    the theme does it’s comment_form_default_fields), but the duplicates
    comment text boxes are still there. Also tried a priority of 8, and that
    didn’t do it either.

    So, can you think of a generic (works for any theme) that can
    determine if the comment field has already been defined? And, if the
    duplicate is found, remove the one in the theme, so I can replace it
    with mine?

    I understand that the problem is caused by bad coding practices on the theme, but would like to find a workaround.

    Thanks….Rick…

    Reply
  30. Larisa Frolova says:
    Jan 21, 2015 at 4:04 am

    Thank you!

    I’ve searched the forums and Google for this, but I’m still a little confused as to what to do. If I just want to change the LOCATION of the comment/reply link that appears on posts, how do I do that? It’s not that I want to make it invisible, or change the wording – I just want it to be at the bottom of a post, not at the top.

    How do I go about doing that for the Twenty-Twelve theme?

    Reply
  31. Mikael says:
    Sep 7, 2014 at 10:31 am

    I like this layout!

    Reply
  32. lflier says:
    May 30, 2014 at 12:07 pm

    Very helpful!

    I’m really liking the Disqus comment system you’re now using. It’s slick and very inviting. I find myself leaving more comments on sites using Disqus.

    But I’m discouraged from using it on my own site by the lack of integration with BuddyPress activity stream. So the more I can do to streamline the native WordPress comment system and make it as inviting as Disqus, the better. Thanks again for your tutorial.

    Reply
  33. Therese says:
    Apr 19, 2014 at 2:03 pm

    Thank you so much for all this! It’s really helping me get more familiar with WordPress!
    I’ve got the social media logins, I’ve got the border sorted, but now I am totally stuck in trying to find *where* to edit the font for the comment box’s individual boxes.

    I can’t figure it out. :(

    Can you please tell me where exactly to find that? You don’t specify this clearly enough in the tutorial. :)

    Reply
    • WPBeginner Support says:
      Apr 20, 2014 at 2:08 pm

      Please see how we changed fonts for #author and #url input fields in the article. To change font in the comment box you can use something like this:

      #comment { 
      font-family: arial, verdana, sans-serif; 
      font-size: 16px;
      } 
      
      Reply
  34. JG says:
    Apr 2, 2014 at 5:29 am

    how do I add a required checkbox people have to tick before the form gets submitted? I have tried adding the field in via adding a field under add_filter(‘comment_form_default_fields,) while the field shows the form can still be submitted without ticking the box.

    Reply
  35. Jewel says:
    Dec 3, 2013 at 10:53 am

    Thank you a lot…

    Reply
    • Bhushan says:
      Apr 1, 2014 at 2:38 am

      I’m trying

      Reply
  36. Ann says:
    Oct 11, 2013 at 12:54 am

    I read through your tutorial… and was wondering if it can be applied to a WordPress site that has a Genesis Framework and Child theme. I am using the Epic Child theme by the way. Thanks for your help.

    Reply
    • WPBeginner Support says:
      Oct 11, 2013 at 3:24 pm

      Yes some parts of the tutorial can be directly applied to your child theme. For CSS styling you need to over ride your childtheme’s CSS.

      Reply
  37. Jonathan says:
    Oct 11, 2013 at 12:21 am

    Any idea how to place those checkboxes for Subcribe to Comments and other plugins so that they appear above the Submit button? Is there a way define where wordpress would normally include those items?

    Reply
    • WPBeginner Support says:
      Oct 11, 2013 at 3:29 pm

      if you are using Subscribe to comments plugin then you can place <?php show_subscription_checkbox(); ?> in your templates where you want the subscription checkbox to appear.

      Reply
  38. Jeff Hilron says:
    Aug 21, 2013 at 5:52 pm

    Im trying to figure out how to get the round avatars.

    Reply
    • Editorial Staff says:
      Sep 11, 2013 at 4:15 am

      Here is a tutorial for you:
      https://www.wpbeginner.com/wp-themes/how-to-display-round-gravatar-images-in-wordpress/

      Reply
  39. Ravinder says:
    Jul 18, 2013 at 8:06 am

    Nice Tutorial. the information you have provided here is very good. I was searching for it from a while. Thanks for sharing.

    Reply
  40. mohib says:
    Jul 5, 2013 at 6:21 am

    This is a wonderfull tuturial, “Click here to cancel repley” i want ot chage this name, but not found any way, would you pls help me ?

    Reply
  41. Mike Lee says:
    May 13, 2013 at 12:46 pm

    Hi, your tutorial is so wonderful and i would like to ask how to make the comment form appear under the specific comment when clicking the ‘Reply’ word of that coment.

    Thanks

    Reply
    • Editorial Staff says:
      May 15, 2013 at 8:50 am

      This happens by default in the WordPress theme when you allow threaded comments. WordPress loads comment-reply.min.js. If your theme is not loading that, then you need to load it.

      Reply
      • Jae says:
        May 26, 2013 at 6:09 pm

        I have the Elegant Tonight theme on my WordPress, and I have my dashboard-settings-discussion set to: Enable threaded (nested) comments 3 levels deep. So, I should be seeing threaded comments, but I am not. WordPress doesn’t seem to be loading comment-reply.min.js. Where in my comments.php theme do I add this? And do I add exactly that, or in some other coding format? Thank you for any advice!

        Reply
        • Editorial Staff says:
          Jun 16, 2013 at 2:37 pm

          Hey Jae,

          Elegant themes staff is better equipped to answer that question because we are not very familiar with that theme. When you pay for Elegant Themes, you also get access to their support.

  42. Robo Ek says:
    May 13, 2013 at 9:39 am

    Helpful article once again from you. Maybe you should change your name. Even professionals would find your tutorial useful

    Reply
  43. Adrian Robertson says:
    Apr 2, 2013 at 11:06 pm

    Another nice tutorial from you guys, time and time again when I can’t remember how to do something I end up on your site.

    Great work!

    Reply
  44. Mattia says:
    Apr 2, 2013 at 4:30 am

    Hi guys thanks a lot. Just a question: which is the difference between and . With this last one, your adivecs don’t work! ;)

    Reply
    • Mattia says:
      Apr 2, 2013 at 4:32 am

      sorry the output deleted my question: difference between “comment_form” and “comment_template”… ;)

      Reply
      • Editorial Staff says:
        Apr 2, 2013 at 7:48 am

        No problem. So comments_template is a function that loads the template used to display comments. It loads the comments.php file by default however you can use another file if you have a customized version. The comments.php file usually contains the code to load all the comments, and it also contains the function comment_form. The commnent_form function outputs the actual comment form (name, email, website, message, submit button, etc).

        Hope that helped clear things up :)

        Reply
        • Mattia says:
          Apr 2, 2013 at 10:02 am

          It did. Thanks ;)

  45. Sue Kearney says:
    Apr 1, 2013 at 2:46 pm

    I’m loving all of this juicy input, some of which I’ve shamelessly lifted from what you do. I’m about halfway done. Check it out here: http://goo.gl/8r9uO

    Thanks again!

    Reply
  46. Ernice Gilbert says:
    Mar 31, 2013 at 7:06 pm

    Hello, how do I add a reply button in the comments box just like yours to my wordpress site? It is a plugin or tweaking of code?

    Thanks.

    Reply
    • Editorial Staff says:
      Apr 1, 2013 at 7:58 am

      Hey Ernice,

      It is not a plugin. We are using the same technique showed in this article. Instead of using background color, we are using the background image property of CSS.

      Reply
  47. Rifat Bin Sharif says:
    Mar 31, 2013 at 12:02 am

    In my wordpress theme, I just noticed that in comment area there is a word ”says’ but I couldn’t find it in comments.php file. How to remove this text?
    Thanks

    Reply
  48. Colin Crawford says:
    Mar 28, 2013 at 5:05 pm

    Hi Nice article and I have used some of your suggestions but I found a code error that needs fixing under ‘Adding Comment Policy Text Before or After Comment Form’.

    You have placed the add filter within the function or otherwise it won’t get executed, it needs to be moved outside of the function.

    Colin

    Reply
    • Editorial Staff says:
      Apr 1, 2013 at 8:43 am

      Fixed it :)

      Reply
  49. Gaelyn says:
    Mar 27, 2013 at 1:33 pm

    All wonderful suggestions. Now, how do you change the word “responses” to “comment” and make it more prominent. On Suffusion theme. Thanks.

    Reply
    • Editorial Staff says:
      Mar 28, 2013 at 11:15 am

      Edit your comment.php file in the theme to make the change.

      Reply
  50. Umer Rock says:
    Mar 27, 2013 at 11:20 am

    I just want to add a Image just right on Comment Box, How i can, for example this is a screenshot of comment box : http://oi48.tinypic.com/2itrket.jpg

    Reply
    • Editorial Staff says:
      Mar 27, 2013 at 12:47 pm

      You could probably use the filters shown in the article and CSS to make it look like that.

      Reply
      • Umer Rock says:
        Mar 27, 2013 at 3:06 pm

        Ok. Thank you, let me consider again on article. well i am not expert with CSS.

        Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd WordPress Coming Soon Page Plugin
SeedProd
Jump start your website with viral coming soon pages. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • 7 Best CRM Software for Small Businesses (Compared)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
ProfilePress
ProfilePress Coupon
Get 20% OFF on ProfilePress WordPress ultimate user and profile plugin.
IPVanish Coupon
Get 60% OFF on IPVanish, one of the best VPN service providers for bloggers and WordPress users.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.