WordPress comment form – textarea above other fields
I’m developing a new website on wordpress and just spent an hour to figure out why all of a sudden my comment textarea is above other fields. I’m a human so mistakes could happen, so I just dived into debugging my code and found nothing. Started some googling and voila! It’s not a bug. It’s a feature ;o) Of course it is…
Since WordPress 4.4 the comment field will show up above other fields. You can read more about it on make.wordpress.org. Even tho I am buying reasons behind it I am not sure if it should be forced like that, as this have impact on all websites that will be updated to 4.4. And then the form could look a bit broken. Like something doesn’t align. We usually apply styles to the structure we are working on, and when someone changes the structure, our styles could break. Like this:
In this case when the comment field was at the bottom, the “comment_notes_after” was nicely aligned, full width and so on and now they are not. I am not a fan of creating CSS classes if I really don’t have to, so I use nth-child and stuff in my code. So changing a structure does impact my styles. I honestly didn’t thought that someday someone will change a structure that is from the beginning without a real “must be done or sky will fall” ;o).
Styles aside – this “notes_after” were usually used for additional comments, like this is required, something isn’t, you can use tags like this and this and so on. So now this “instructions” will be between fields instead below them. Again, not a big issue if we are developing a new theme, but this will have impact on all our “past websites” that will upgrade to 4.4. And we all want to have our wordpress up to date. This structure is here for a very long time. I don’t really understand why this hasn’t been done with some flag like “comment_field_first=>true” with default false for few versions. Or at least option to quickly reverse this as sometimes this will be quicker than updating CSS.
Anyway, if you are surprised that your textarea in comment field is above, don’t be. It’s a feature. Now I just need to check all of my websites to see if something is broken in comment forms. Yay.
Oh, and I totally agree with this comment by mindctrl.
Edit 1: Also trying to “hack” this and move “comment” to a “fields” array will not work ;o)
Quick solution to fix nth-child issues
So if you have some CSS rules like :first-child, nth-child, :last-child to control how you inputs behave, and this change of moving textarea to top messed up some stuff, you can simply wrap all those fields in container. This should hopefully fix the nth-child and first-child. For that use comment_form_before_fields and comment_form_after_fields hooks like that:
function open_wrap_fields_action(){
echo '<div>';
}
add_action('comment_form_before_fields','open_wrap_fields_action',10);
function close_wrap_fields_action(){
echo '</div>';
}
add_action('comment_form_after_fields','close_wrap_fields_action',10);
WordPress comment form – textarea above other fields
I’m developing a new website on wordpress and just spent an hour to figure out why all of a sudden my comment textarea is above other fields. I’m a human so mistakes could happen, so I just dived into debugging my code and found nothing. Started some googling and voila! It’s not a bug. It’s a feature ;o) Of course it is…
Since WordPress 4.4 the comment field will show up above other fields. You can read more about it on make.wordpress.org. Even tho I am buying reasons behind it I am not sure if it should be forced like that, as this have impact on all websites that will be updated to 4.4. And then the form could look a bit broken. Like something doesn’t align. We usually apply styles to the structure we are working on, and when someone changes the structure, our styles could break. Like this:
In this case when the comment field was at the bottom, the “comment_notes_after” was nicely aligned, full width and so on and now they are not. I am not a fan of creating CSS classes if I really don’t have to, so I use nth-child and stuff in my code. So changing a structure does impact my styles. I honestly didn’t thought that someday someone will change a structure that is from the beginning without a real “must be done or sky will fall” ;o).
Styles aside – this “notes_after” were usually used for additional comments, like this is required, something isn’t, you can use tags like this and this and so on. So now this “instructions” will be between fields instead below them. Again, not a big issue if we are developing a new theme, but this will have impact on all our “past websites” that will upgrade to 4.4. And we all want to have our wordpress up to date. This structure is here for a very long time. I don’t really understand why this hasn’t been done with some flag like “comment_field_first=>true” with default false for few versions. Or at least option to quickly reverse this as sometimes this will be quicker than updating CSS.
Anyway, if you are surprised that your textarea in comment field is above, don’t be. It’s a feature. Now I just need to check all of my websites to see if something is broken in comment forms. Yay.
Oh, and I totally agree with this comment by mindctrl.
Edit 1: Also trying to “hack” this and move “comment” to a “fields” array will not work ;o)
Quick solution to fix nth-child issues
So if you have some CSS rules like :first-child, nth-child, :last-child to control how you inputs behave, and this change of moving textarea to top messed up some stuff, you can simply wrap all those fields in container. This should hopefully fix the nth-child and first-child. For that use comment_form_before_fields and comment_form_after_fields hooks like that: