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(); ?>
</time>

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.

Comments

  1. c.dilger
    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

    • 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. Christian
    Permalink to comment#

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

  3. zakkain@gmail.com
    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. 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

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:

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

We have a pretty good* newsletter.