Styling and Altering the WordPress Comment Form

The comment form has got to be the worst thing about WordPress. Well, it’s quite powerful, I’m sure of that, but that comes at the expense of flexibility.

Most of WordPress you can bend to your will with a CSS, HTML and a little PHP – but to get into the files that dictate the function and form of the Comment… form… you need to be a lot more proficient.

Generally speaking. There are workarounds, which I’m going to take you through in showing you how I tamed the form on AliDark.com, running a customised fork of the default Twenty Twelve theme.

I recently removed all styling from this site. It currently displays with an absolute minimum – so much is still browser default. So my starting point is the default WordPress comment form that appears with the php function comments_template, which relies on the default output of comment_form and wp_list_comments.

That gives you a pretty ugmo HTML form. The first thing I wanted to do was save space and overhead by removing the labels and replacing them with placeholder text inside the input fields.

The labels were hidden easily enough, I did this using display:none. But to get placeholder text happening required adding custom code in functions php. I used this using the first answer on this StackExchange question.

Hiding things willy-nilly isn’t good practice – but as the HTML for the form isn’t directly editable, it’s a decent solution here.

The form was already looking quite a bit better. I styled the inputs by removing all borders and applying a light background. Box-shadow is so 2012 :).

I decided that the three inputs for name, email and website didn’t need to take up a whole vertical line of the page each, so I gave them individual widths using their individual parent paragraphs as selectors. This was done using a max-width: 800px media query, which isn’t best practice in using media queries in a progressively enhancing environment, but supporting older browsers isn’t a priority on my own site. So on desktop the fields take up a third of the width each, above the full-width comment text area, while on mobile they are full width.

Screen Shot 2013-06-22 at 10.23.10 PM

Speaking of mobile, webkit does some crappy generic styling of buttons if you don’t tell it not to, which makes it hard for you to apply your own backgrounds and borders etc and have it look nice. To eliminate this in the head, add -webkit-appearance: none; to the button’s CSS.

Here’s the CSS as applies to my WordPress comment form, for your reference. Some of these refer to the comment list, but if you’re starting without styles at all, it should also be useful. The position:absolute nonsense on the gravers is to prevent text from wrapping under the images and hence clean up the layout.

#respond {
margin: 5% 0;
}

#comments {
     display: inline-block;
     clear: both;
     width: 100%;
     font-size: 0.8em;
}
ol.commentlist {
     padding: 0;
     margin: 5% 0;
     list-style-type: none;
}
ul.children {
     list-style-type: none;
     padding-left: 5%;
}

article.comment {
     margin: 5% 0;
     padding-left: 80px;
}
.children article.comment {
     padding-left: 60px;
}

.comment footer { font-size: 0.8em; }

.comment p {
     margin: 0.25em 0;
     line-height: 1.2;
     color: #000;
     font-family: chaparral-pro, serif;
}

img.avatar {
     float: left;
     position: absolute;
     margin-left: -80px;
}
.children article.comment img.avatar {
     margin-left: -60px;
}

.form-allowed-tags {
     display: none;
}
#commentform label {
     display: none;
}
p.comment-subscription-form {
     clear: both;
}

.comment-subscription-form label {
     display: inline-block !important;
}
input#subscribe_comments {
     padding: 0!important;
     margin: 0!important;
     margin-right: 0.5em!important;
     float: none !important;
}
#commentform p {margin: 0; }
#commentform input, #commentform textarea {
     width: 95%;
     padding: 2.5%;
     background: #f7f7f7;
     border: none;
     margin: 2% 0;
     font-size: 1em;
     border-bottom: 2px dashed #d7d7d7;
     font-family: chaparral-pro, serif;
}

#commentform input#submit, .button {
     color: #fff;
     border: none !important;
     background: #3dd6b7;
     -webkit-appearance: none;
}
#commentform input#submit:hover, .button:hover {
     background: #81edd7;
}
#commentform input#submit:active, .button:active {
     background: #2baa90;
}

@media ( min-width: 700px ) {
     #commentform input {
          width: 25%;
          float: left;
     }
     .comment-form-author input, .comment-form-email input {
          margin-right: 5% !important;
     }
}

@media ( max-width: 700px ) {
     #commentform input#submit {
          width: 100%!important;
     }
}

 

 

Posted on June 22, 2013 Modified March 8, 2018