WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • 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» Tutorials» How to Move Comment Text Field to Bottom in WordPress 4.4

How to Move Comment Text Field to Bottom in WordPress 4.4

Last updated on December 16th, 2015 by Editorial Staff
62 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
How to Move Comment Text Field to Bottom in WordPress 4.4

Did you notice that there was a slight change in the comment form fields in WordPress 4.4? The comment textarea is moved to the top whereas the Name, Email, and Website field is moved to the bottom. One of our readers asked if there was a way move back the comment text field to the bottom. Yes, there is because we did it on our site. In this article, we will show you how to move comment text field to the bottom in WordPress 4.4 and later versions.

Move comment field to bottom in WordPress 4.4

Why Comment Form Text Layout Was Changed?

The decision to move the comment form text field to the bottom was made to fix a bug in WordPress comment form layout.

Previously when users clicked on reply button they were taken to the comment text area. If a user was on desktop, then they can clearly see that they need to fill in the name and email fields first.

But on mobile, users may not even see the comment name and email fields. They may write and submit a comment only to return back with an error that they forgot to enter name and email fields.

This was bad from usability and accessibility point of view and WordPress 4.4 addressed that issue.

This is how the default comment form looks like now.

New comment form layout after WordPress 4.4

While this change improves usability, some site owners believe that their users are used to the old layout and want to switch back. Here is how you can do that.

Moving the Comment Text Field to Bottom

Simply add this code snippet in your theme’s functions.php file or in 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' );

That’s all, you can now visit a post on your website as a logged out user and see the change in action.

Comparing comment forms before and after moving comment text field to bottom

We hope this article helped you move comment text field to the bottom in WordPress 4.4. You may also want to see our guide on how to improve WordPress comments with De:comments.

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.

62 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Step by Step Guide: How to Start a Podcast with WordPress

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

34 Comments

Leave a Reply
  1. wsef says:
    Mar 9, 2018 at 5:45 am

    how to create leave a reply form

    Reply
  2. Kneema says:
    Nov 16, 2017 at 2:58 pm

    Thank you so so much! I’ve been looking for this code for a long time… God bless you

    Reply
  3. Andres says:
    Oct 10, 2017 at 4:23 pm

    Hi there!,

    Thanks so much, I have resolve my problem :)

    Reply
  4. lucy says:
    Sep 7, 2017 at 5:40 am

    i like this post

    Reply
  5. Aleks says:
    Aug 12, 2017 at 5:03 pm

    You know what would be nice, if you could provide an example, how to move comment box above comments. Right now I had to go through entire comments, to write it. I want to switch places. Top > Comments Box. Bottom > Comments. So I don’t need to scroll. I can see that it’s quite easy to do in comments.php, but it’s better if there were a safer way to do so; child theme for instance.

    Reply
  6. Shamim Mia says:
    Feb 20, 2017 at 2:13 am

    It worked well, thank you so much for sharing the snippet!

    Reply
  7. Romee Prajapati says:
    Jan 26, 2017 at 11:30 am

    It doesn’t work for me. I am using understrap theme. Can anybody help.

    Reply
  8. majid says:
    Jan 2, 2017 at 2:24 pm

    Thank you for sharing your wealth of knowledge

    Reply
  9. Ivan Zhotev says:
    Dec 8, 2016 at 1:17 pm

    Great snipped. Thanks a lot! Cheers!

    Reply
  10. Umer Sheikh says:
    Oct 28, 2016 at 1:26 pm

    Thank you! It is a useful article.

    Reply
  11. Anhduc says:
    Aug 4, 2016 at 6:14 am

    Thanks you so much!!!!

    Reply
  12. Leo Nguyen says:
    Aug 1, 2016 at 10:46 pm

    Many thanks to you. This is really big help for me.

    Reply
  13. Susann says:
    Jul 18, 2016 at 10:01 am

    a big thank you for that snippet. Saved me quite some time :-)

    Reply
    • WPBeginner Support says:
      Jul 19, 2016 at 1:02 pm

      Glad you found it helpful :)

      Reply
  14. Portekoi says:
    Jul 15, 2016 at 5:57 am

    Thanks a lot ! Save my time :)

    Reply
  15. Abhilash Sharma says:
    Jun 24, 2016 at 8:06 am

    thank you so much

    Reply
  16. Emily says:
    May 20, 2016 at 5:31 am

    You are awesome!!! Thank you!!!

    Reply
  17. Ruby Ann Rosales says:
    Mar 12, 2016 at 2:25 am

    Works like magic! Thanks :)

    Reply
  18. Lucas says:
    Feb 26, 2016 at 12:40 pm

    Awesome solution to a very aggravating problem. This should be ranked higher for rearranging the comment field order on wordpress. It’s the only link that actually included a WORKING solution.

    Thanks!

    Lucas

    Reply
  19. Sabin says:
    Feb 25, 2016 at 9:36 am

    Thanks a lot. This was awesome.

    After 2 hours trying to fix it, it took me 1 minute to copy-paste this code. – WP 4.4.2.

    Reply
  20. Alejandro says:
    Feb 18, 2016 at 1:57 pm

    You saved my life, i worked three days trying to fix it thinking it was the theme.

    Reply
  21. Pascal says:
    Feb 17, 2016 at 11:17 am

    Thanks!

    Reply
  22. Iman Dastbelaraki says:
    Jan 24, 2016 at 1:31 am

    Thank you very much, very useful article.

    Reply
  23. Erin Kodama says:
    Jan 22, 2016 at 4:52 pm

    Just what I was looking for. Thanks!

    Reply
  24. Guyom says:
    Jan 19, 2016 at 11:23 am

    Very useful snippet! Thanks a lot for that.

    Reply
  25. Omid says:
    Jan 10, 2016 at 10:53 pm

    It is a useful article, thanks!

    Reply
  26. moho says:
    Dec 26, 2015 at 12:22 pm

    thank you for this tip, I had used a code to automatically approve comments of a specific category but after the last update 4.4 this code not work, do you know how to automatically approve comments in the posts of a specific category?

    Reply
  27. Mr Darlington says:
    Dec 21, 2015 at 11:46 am

    Really amazing… I just learned a few thing right here.

    awesome article..

    Reply
  28. Syams says:
    Dec 21, 2015 at 11:29 am

    How to remove website/url coloum?

    Reply
    • Editorial Staff says:
      Dec 21, 2015 at 4:26 pm

      This article should help: http://www.wpbeginner.com/plugins/how-to-remove-website-url-field-from-wordpress-comment-form/

      Reply
  29. Simon Lock says:
    Dec 20, 2015 at 3:03 pm

    I have been struggling with the comments section for the last 3 days on my wife’s travel blog after it was drawn to my attention that the comments section was not working properly. Of course I had not realized that WordPress had made changes that might impact that area. Seems like the order is now:

    Comment > Write (instead of post > Name > EMail > captcha

    but the more logical order should really be:

    Name > EMail > Website URL (missing right now) > Comment > captcha > Post

    So your article was both timely and appreciated except the code provided does not appear to work with the theme that is currently being used (TeslaThemes ~ Epilog).

    In the theme they provide a place to add custom code but when I pasted in your code nothing changed with the order of the comment fields. Also you show a box for entering a website URL and that does not even show up in the comments area.

    Perhaps you could suggest what is going on – also I was playing around with Jetpack to try and make the comments work and now the home page is screwed up too and is dark brown instead of white. Not sure if this is coming from the Epilog theme or from Jetpack.

    Guidance would definitely be appreciated. URL for the blog was withheld per your policy but can be provided if it is germane to the consideration of this comment.

    Thank you

    Simon

    Reply
    • Editorial Staff says:
      Dec 21, 2015 at 7:23 am

      Hi Simon,

      I’m not sure about the Epilog theme, but most themes have insert codes area for front-end (i.e HTML / CSS). The code we’re asking you to enter here must be inserted as a site-specific plugin or in your theme’s functions.php file in order for it to work.

      On our site, we have disabled the website field because it attracts a lot of spam.

      More info on that here: http://www.wpbeginner.com/plugins/how-to-remove-website-url-field-from-wordpress-comment-form/

      Reply
      • Simon Lock says:
        Dec 21, 2015 at 6:48 pm

        Thanks for the hints. I could not figure out where to add this code in to Functions.php but while exploring the appearance editor I discovered a file called Comment.php. Although I don’t really understand all the coding I placed your code in what I thought was the appropriate place. I also discovered the “Write” button location and changed that to “Post Your Comment”.

        This successfully moved things around except for the Captcha code created by BestWebSoft. The order now with your code inserted is:

        Name > E-Mail > Captcha > Message > Post Your Comment

        Problem is that I now get an error message “Time Limit is Exhausted. Please enter CAPTCHA value again”

        If I remove the need for a Captcha ie

        Name > E-Mail > Message > Post Your Comment

        then everything works great!!

        Is there some additional code I should add to position the Captcha after the comment block, OR should I just eliminate the need for entering a Captcha.

        If you recommend leaving the Captcha out, what is the downside – do I leave the site vulnerable to spambots or is there some other mechanism of protecting against this?

        Thank you for sharing your wealth of knowledge

        Simon

        Reply
        • WPBeginner Support says:
          Dec 22, 2015 at 3:56 am

          As you have already figured it out, it is your recaptcha plugin. There are other recaptcha plugins that you can use.

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 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. 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 2018 (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 (2018)
    • Which is the Best WordPress Slider? Performance + Quality 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
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • 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 2018 – Step by Step Guide
Deals & Coupons (view all)
Soliloquy Logo
Soliloquy Coupon
Get 10% off Soliloquy, the best responsive WordPress slider plugin available in the market.
iPage Coupon
Get over 83% off on iPage web hosting and a free domain name.
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
  • List25
  • Awesome Motive
  •  

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

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.