The videos archive page is the part of the site where people can browse all the free videos available to watch. It's for browsing, must like the homepage for the snippets or the homepage for the demos.

These pages are their own template, which we can very quickly and easily whip up into shape like we've done many times before. We put our own wrapper around things and use our grid structure to give it a 2/3 1/3 layout.

What is very exciting for me here is that we get a chance to rip out some old gross markup and replace it with more intellegent and automatically generated markup. In the past, I hand-wrote each entry into the video archives as a definition list. For starters, that's probably not the right semantic markup for a list of videos, especially when each entry starts a new list.

Instead, we rip out all that old markup and instead run a carefully crafted query to snag all the data we need from WordPress. We run a loop over that query and output new markup that is cleaner (just divs with classes). This is going to save us time in the future, not needing to hand-maintain these archive pages.

While we're writing this new markup, we're peppering it with WordPress functions that fill in the bits that we need to be dynamic. The titles are the_title(). The links are the_permalink(). The thumbnails are custom fields. Easy cheezy.

The divs use class names from our grid system so that all the floating and sizing and stuff automatically works. Aren't we efficient? Some CSS needs to be custom though, and we write that were we need to. For instance, adjusting the padding for modules specifically in this section (it was too much, we reduced it). This kind of thing is easy to do via class names available to us since we intelligently used body_class() way back when we were working on the head.

Comments

  1. CompMike
    Permalink to comment#

    Theses videos are great. You should release your grid on github, it seems excellent.

  2. Max
    Permalink to comment#

    The Grid is perfect.

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.