Customizing the WordPress Comment Form

Customizing the WordPress Comment Form

The comment form is a great tool – it allows your readers to interact with your authors and vice versa. Engagement is extremely important for any website, such a direct line of communication should be fostered with care.

In this article we’ll take a look at some of the options we have for bending the comment form to our will.

Customize WordPress Comments Form
Customizing the comment form is easy!

The Comment Form Function

WordPress has a single function for outputting the contact form: comment_form(). It accepts a (rather lengthy) array as its first argument, which allows you to specify everything from the labels to the notice below the comment box.

It is most commonly called from the comments.php template file. In Twenty Fourteen and other default WordPress themes this is the favoured approach and I suggest you do the same.

comments.php itself is usually called from the single post template, single.php. It is called via the comments_template() function, take a look at the default themes to follow along.

Customizing The Form

There are three basic things we can do to customize our comment form. We can add our own styling, we can modify the arguments passed to the generating function to alter its behaviour or we can use plugins. We’ll mostly be focusing on the first two here.

Styling The Form

There are two approaches you can take. If you’re building a theme from scratch you can just add the necessary CSS to your existing stylesheet. If you would like to modify an existing theme you really should create a child theme.

How you style your comment form is of course up to you. However, since forms are generated using the same function their HTML output is roughly the same. Using the arguments we will discuss shortly you may add and remove elements but other then that, the classes and IDs are usually the same. Here’s how the HTML for the default comment form in Twenty Fourteen looks:

Customizing The Form Function

The comment_form() function takes two parameters. The first is an array where you can customize it, the second is an optional post ID. This can be used to output a comment form for an arbitrary post:

Let’s dig deeper and take a look at all the parameters we can use to modify the behaviour of our form:

Element IDs

Two parameters allow us to overwrite the default ID for the form and the submit button. id_form controls the ID for the form itself while id_submit determines the ID for the “submit” button.

Labels & Titles

Four functions allow us to control some of the labels and titles in the form. title_reply controls the title at the top of the form when writing a top-level comment. title_reply_to controls the title of the comment comment form when writing a reply to another comment.

You can control the text of the cancel reply link using cancel_reply_link and you can modify the text in the submit button using the label_submit parameter.

Notes & Text

There are four larger blocks of text available in the contact form. comment_notes_before and comment_notes_after controls the text seen before and after the comment form. Many people prefer to hide the notice about the usable HTML elements, and just set comment_notes_after to an empty string.

The text in the login notification can be controlled using the must_log_in and logged_in_as parameters. The former is used when a user comments without logging in, the later is displayed for logged in users.

Field Customization

Fields can be customized by specifying their full HTML. Oddly enough the author, email and url fields can be customized by using the fields parameter while comment field has it’s own parameter: comment_field. Take a look at the example below which shows the default code for each field.

Using Plugins

There are a number of plugins which modify comments. Some add functionality like AJAX to prevent page reloading, some add styling and some replace the default comment form with a third-party solution like Disqus or Facebook comments.

Take a look at the comments related plugins available in the repository, at the time of writing there are 1,533.

Overview

Hopefully you have a better picture of the possibilities the comment_form() function offers. While this is not a perfect implementation from WordPress by any measure, it is flexible enough to allow for many modifications.

If you have any great tips on handling comment forms or perhaps you’ve written your own comment form, let us know in the comments below.

Image credit: Sergey Zolkin, icons made by Yannick from www.flaticon.com is licensed by CC BY 3.0