Preparing for WordPress 4.4 comment form changes

As detailed on the Make WordPress blog, the order of comment fields will change in WordPress 4.4, scheduled for a December 2015 release.

This may affect your theme if the comment form doesn’t use the typical layout of one field above the other.

Preparing your theme for the release of WordPress 4.4 will require your CSS allow for two version of the comment form: comment field last (current) and comment form first (future).

If you’re styling any of the comment form fields especially, it’s likely you will be using one of the following selectors:

• .comment-form-author
• .comment-form-email
• .comment-form-url
• .comment-form-comment

In WordPress 4.4, the comment field will be the second element in the comment form, or in CSS terms :nth-child(2).

The general sibling combinator (~) selects sibling elements that follow the first element in the source code. As of WordPress 4.4 the comment meta fields follow the comment field, the general sibling combinator can be used to apply styles without affecting earlier versions of WordPress

You can use the following selectors to prepare your theme for WordPress 4.4

• .comment-form-comment ~ .comment-form-author
• .comment-form-comment ~ .comment-form-email
• .comment-form-comment ~ .comment-form-url
• .comment-form-comment:nth-child(2)

Styling a two column comment form

In my comment form, on all but the narrowest of screens, the name, email and website fields for my comment form are in a side by side layout, two fields to a line.

The comment field remains full width, as it is intended for a large block of content. The submit button falls below the comment field.

To prepare for the release of WordPress 4.4, the code in my theme needed for such a layout should work for two source orders: comment field first and comment field last.

As an additional requirement, plugins may add extra fields to the comment form: commonly a Twitter or other social media handle. The code should work regardless of the number of fields.

Finally, it should work for users who are logged in or logged out.

In summary, styling the WordPress comment form for side-by-side layout requires:

• uses the WordPress default comment form HTML
• meta information (name, email and website) laid out side-by-side
• comment field is full width
• allows for plugins to request extra meta information (eg: twitter handle)
• submit button falls below last field
• works for logged in and logged out users
• works for two source orders: comment form first and comment form last

Whoa, that’s a lot of conditions. Fortunately it looks more complicated than it is, nth-child will reduce the amount of code required greatly.

Let’s start with the code for the current version of WordPress, with the comment field last.

The WordPress comment form starts with a note, usually “Your email address will not be published. Required fields are marked *”.

The comment meta fields start as the second child of the comment form. Using the nth-child recipe, this gives us an offset of two. That’s the + 2 in the selectors below.

Each child needs to be floated left and half the width of the comment form, including any padding. That gives us:

.comment-form > :nth-child(n + 2) {
  width: 48%;
  float: left;
  padding-left: 2%;
}

Alternating fields need the padding on the right, and to clear the fields above. Selecting alternating fields gives us the 2n in the selector below, the offset remains.

.comment-form > :nth-child(2n + 2) {
  clear: left;
  padding-right: 2%;
  padding-left: 0;
}

Finally, styling the WordPress 4.3 and earlier comment form requires that the comment field and the submit button be full width and fall below the field above.

The nth-child selector has the same specificity as a class, so to override these styles requires a higher specificity. We can use the double class hack for this, these are the repeated classes below.

.comment-form > .comment-form-comment.comment-form-comment,
.comment-form > .form-submit.form-submit {
  clear: left;
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

We now need to prepare our comment form for the release of WordPress 4.4 in a few months time. There are two basic changes we need to prepare for:

• comment meta fields will follow the comment field
• the comment meta fields now start in the third position

As mentioned above, we can use the general sibling selector to differentiate between the comment form for WordPress 4.3 and WordPress 4.4.

As the comment meta fields now starts at the third child element, our nth-child offset becomes three. As seen in the selectors below.

As the offset is now different, odd and even selectors require the padding be reversed (left padding becomes right).

With the new offset, the fields which need to clear those above have changed too. We need to reset the value above (clear: none) and re-apply it to the correct items with the new offset.

To prepare for WordPress 4.4 requires a small amount of code.

.comment-form-comment ~ :nth-child(n + 3) {
  padding-right: 0;
  padding-left: 2%;
  clear: none;
}

.comment-form-comment ~ :nth-child(2n + 3) {
  padding-right: 2%;
  padding-left: 0;
  clear: left;
}

As I mentioned above, all this assume you are using the standard form markup. If you wish to change the form layout of a WordPress default twenty-something theme, the code above is ideal.

I am fussy, so have changed the HTML. If you’re using the default form, use the code above not the code in my CSS.