Timeless
Published in

Timeless

Customizing WordPress default comment form structure and posted comment structure.

People who worked with WordPress might know that it has its own way of comment form for the readers to post their comments. In this blog, we are going to learn some useful comment tags and change the structure of the comment form and posted comment. So let's get started.

The below image shows the default WordPress comment form,

Default comment form.

Basically, comment form and comment related things are from your theme file comments.php. So, here we are going to work mostly on that file. Before getting into changing the structure of comment form and posted comments, let's learn some basic arguments that can be passed on comment form:

  • ‘comment_field’: Text area for comment to be typed.
  • ‘author’: Input field for the comment author name.
  • ‘email’: Input field for an email of the author.
  • ‘URL’: Input field for an author website.
  • ‘cookies’: Opt-in field for comment cookies.
  • ‘comment_notes_before’: Message that displayed before the text area field of the comment form.
  • ‘comment_notes_after’: Message that displayed before the text area field of the comment form.
  • ‘submit_field’: Submit button for the comment form.

And, for much more for comment related arguments visit here.

Now, open the comments.php file from your theme folder, find comment_form(); this is where your comment form loads with default fields in it, to get the desired input fields and structure, you need to pass arguments inside the comment form. For example, I’m going to get the form only with name, email, text area for comment fields. And the structure will be of name and email input fields will be on the same line with 50% width on flex and comment area with full width below it.

Paste the below code in comments.php, if comments.php is not available in your theme, create one with the below content,

Now add the below jQuery to accept the privacy policy by the comment author,

with the above code as comments.php, you should get the desired comment form as I said earlier. And, the new comment form will look like below,

Comment form after customizing.

You can style above form to your expected design. Now lets change the posted comment structure and learn some tags:

  • echo get_avatar( get_comment_author_email()) : Gets the comment author image.
  • comment_author_link() : Gets the author name.
  • echo get_comment_date(‘d/m/y’) : Gets the comment posted date in format of (dd/mm/yyyy).
  • echo get_comment_time() : Gets the comment posted time.
  • comment_text() : Get the comment posted by author.

For much more tags click here

Add the below code in comments.php inside ordered list<ol class=”comment-list”></ol>

the above argument initiates the callback function for single comments.

Now inside your theme function add this callback function,

Now create another file name comment.php inside your theme folder and paste the below code to get the customized comment structure.

The above comment is structured with basic HTML and comment tags learned.

Add the below CSS to your theme CSS file.

Now the posted comment will be like the below image, which differs from the default comment structure that WordPress shows.

Customized comment structure.

Get complete code from GitHub Repository.

Try, use the above method if You want to change the default comment section and change it to your own way. And, feel free to respond if you have any queries or doubts.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store