How to Move the Reply Box Above the Comments in WordPress

How to Move the Reply Box Above the Comments in WordPress

By default, the comment box in WordPress is placed at the end of the existing comments on the site. It’s been this way for a long time and even though WordPress recently made the change in version 4.4 to put all the form fields underneath the main comment box, this basic design philosophy hasn’t changed. However, many comment systems such as Disqus and Livefyre place the “submit” box above the list of existing responses. There’s no clear answer as to which design is better. Some feel that the box being on top relieves the need to scroll all the way down before you’re able to reply. Others think that being at the bottom encourages individuals to read and participate in the discussion.

No matter what your preference is, you should be able to implement it on your WordPress website. Unfortunately, it’s not particularly easy to do so. This is because every theme codes its comment system differently. There’s no single easy “plug-and-play” solution to moving the WordPress submit box to the top of the comment section. However, I will walk you through the general process and tell you how to go about it.

Modifying comments.php in your Theme

Provided you don’t have a framework such as Genesis, you need to delve into your theme files to change the location of the comment box. If you haven’t already done so, this is a good time to¬†develop a child theme for making your changes so that all your hard work isn’t erased the next time it gets automatically updated.

I’m going to use the default WordPress TwentySixteen theme as an example. Right now by default, the comments begin immediately after the article without any comment box:

comment start immediately

To start editing theme files, go to Appearance->Editor from the WordPress dashboard.

theme editor

This will bring up your existing theme with a list of all editable files on the right-hand side.¬†Scroll down the list on the right until you find the one labeled “comments.php”.

comments php

This will open up the file in the text editor on the left for editing. What were looking for is the PHP code block containing the function “comment_form”. If you do a search of all the text, you should be able to find it easily. Note that we’re looking for not just the line containing the function itself, but the entire block with opening and closing PHP tags. In the TwentySixteen team, it looks like this:

<?php
comment_form( array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after'  => '</h2>',
) );
?>

I find this towards the bottom of comments.php which is where the submit text area is currently located. What we want to do is move the above snippet to a more desirable location. Examine your theme to find out exactly where you want to paste this. In my example, I chose to place it just under the navigation section as shown here:

change position of box

So cut out the PHP block that you identified earlier and move it to where you want. Make sure you take a backup of the original comments.php file before making any changes. Things can go wrong very easily and you don’t want to mess up your theme! After saving your changes, the comment box will now appear in the new location like this:

comment box under

That’s all there is to it.

Doing it with Genesis

However, if you’re using a framework like Genesis, it becomes significantly easier due to the modular system they have in place. Simply open up your functions.php file and paste in the following:

function move_commentbox_to_top () {
if ( is_single() ) {
if ( have_comments() ) {
remove_action( 'genesis_comment_form', 'genesis_do_comment_form' );
add_action( 'genesis_list_comments', 'genesis_do_comment_form' , 5 );
}
}
}
add_action( 'genesis_before_comments' , 'move_commentbox_to_top' );

As you can see, this checks whether a single post has any comments and then simply removes the existing comment form action and adds a new one using the “genesis_before_comments” placeholder hook. Problem solved.

Maybe one day WordPress will give us more programmatic control over the placement of the comments box. But till then, you’re stuck with manually editing your theme files as shown above.

6 Comments on “How to Move the Reply Box Above the Comments in WordPress”!

  1. Avatar

    Hello; I’m using the twenty sixteen theme (but not Genesis) and wanted to try it. It worked great for existing posts, but when I add a new post, there is no comment form showing at all! Any suggestions? Thanks!

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.