If we had to pick, the view for a single blog post is probably the most important template on the site. We have a static mockup of a blog post page, so we work on moving it over into WordPress.

The grid is slightly different. It uses our super easy grid structure and classes, only instead of the 1/2, 1/4, 1/4 structure on the homepage it uses a 2/3, 1/3 structure. No big deal, just different class names.

We finally take the time to figure out the correct semantic structure for the <time> element. The content inside can be anything, but the attributes on the time element have to be in a specific format. I'm all about doing this correctly to help with anything out there that might be crawling/reading the site and looking for proper machine readable information like this. Ultimately the format differs slightly and we end up with:

<time datetime="<?php the_time('Y-m-d'); ?>">
  <?php the_date(); ?>

The format for the_date() is controlled by settings in WordPress. I like leaving that stuff alone instead of forcing a format onto it. Control FTW!

Because the sidebar.php file is included in several different pages and sometimes the grid it is included on differs from page to page, we set up a simple system where we set a variable before we call the sidebar that instructs it on how wide it should be. We have to debug it a little bit, of course, because sometimes this programming stuff is vexing. Ultimately we have to reference it as a $GLOBALS['sidebarWidth'] which I'm sure is a bit janky, but not too concerning since this is such a simple site, development wise, with a team of one.


  1. User Avatar
    Permalink to comment#

    Hi Chris, great work. I’m following every single video enjoying the input from your side to improve my own workflow. But apparently the current videos is not delivered as sharp as the others before. Maybe you can check that. I just did a screenshot, too, if you need one per mail. Thanks, Christian

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Make sure the HD button in the lower right of the video is turned on. I have it set to be HD by default but once in a while it’s off.

      I’m going to bury this comment as it’s not specifically about the content of this video but please feel free to email me at chriscoyier@gmail.com if you have further questions.

  2. User Avatar
    Permalink to comment#

    Ok, perfect. Just didn’t notice that HD issue. Just bury the comment ;-).

  3. User Avatar
    Permalink to comment#

    Wow, adding that dynamic grid class-name is an awesome technique! Saves a lot of trouble compared to adding difference classes to the body and increasing specificity in the CSS.

    Definitely gonna use this.

  4. User Avatar
    Josh Eaton
    Permalink to comment#

    An alternative way of accessing your variable $sidebarWidth

    <aside class="grid-<?php global $sidebarWidth; echo $sidebarWidth; ?>">

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.