In this screencast we're going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it.

We lay out each of the three inputs (name, email, url) using the grid system we have in place. Boy we've gotten good use out of that eh?

We already have a CSS file exclusively for comment related stuff, so that's where we'll work. The first thing we write is making the inputs in our little grid 100% wide so they fit within the column. Divs would do this naturally, but inputs behave more like inline-block and don't automatically fill their parent containers width. We also fiddle with the main textarea a bit making it 100% wide and not as tall as it was. We decide not to mess with the resizing ability of the textarea. It doesn't really break anything.

Then we get the Reply link working. The JavaScript already works just fine, because we didn't mess with the ID for the form which the JavaScript relies on. We do need to make a bunch of tweaks though, like giving the form a gray background so the design of it works.

We spend the rest of the time tweaking some things with media queries so that the form looks OK on small screens.


  1. Ahrengot
    Permalink to comment#

    Hey Chris,

    Greate series. Really enjoying it so far. How did you get the comment preview and markdown support to work within these comments? I assume those are plugins, right?

  2. JonathanBeech
    Permalink to comment#

    In Sublime Text on a mac, the control D shortcut with the cursor positioned next to a closing or opening html element allows you to create a highlighted selection of everything between that element. I find it useful for figuring out where the opening and closing parts of a div are within the code. This is something I have seen Chris wrestle with a bit and it might help speed things up just a little.

    I believe the Emmett plugin needs installing for this to happen however.

  3. bomb
    Permalink to comment#

    what this site do with the job board is cool.
    how can i implement it as comment board?
    can you explain as detail as possible?
    thank you

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.