We just finished an exciting part of this redesign where we got to throw away a bunch of gross markup in the video archives page and replace it with new, smart, clean, auto generated markup. But we have more work to do on these archives pages. Because the archives are going to be auto-generated into groups, we need navigation (really pagination) to get to older groups of screencasts.

In the past, since we were manually writing all the markup, we could make that pagination a static part of the page. I don't mind that in general, but that's simply not possible anymore. When we publish a new screencast now, it's going to push one screencast off the end of the first page and onto the second page. So saying something like "#115 - #95" in static code will only be accurate for a very short amount of time.

First we get the styling correct by using some black bar navigation classes that we've used elsewhere (like on individual snippets pages).

Then we get started making the pagination actually work. In WordPress, you can add onto the URL something like "/page/2" and it will still render the same page it was rendering before, only it will give you access to a global variable called $paged that will be set to "2". We could use that number in our query to adjust which videos we're showing. But instead of doing it that way, WordPress has an even smarter way to deal with it and that's adding 'paged' => $paged to the query. That accounts for some funky math that happens when we try and handle offset by ourselves.

We adjust the URL's in our static navigation to reflect these new pagination style links. The problem now is that the numbers in the links are no longer accurate. We first try something simple like "5, 4, 3, 2, 1". But that feels kinda lame and boring, as well as just confusing since those numbers won't match the actual pagination numbers.

We unearth some weird ordering of videos that is a little concerning. We adjust the query in how it orders them, but still some issues are there. Ultimately we decide we'll have to order them by date, and some adjustments to the published dates of the screencasts will have to be made after the site goes live. Gruntwork, but good for the long term.

Ultimately (off video, I believe) we end up using Greek style pagination (Alpha, Beta, Gamma) which works in it's arbitrariness (kind of like our arbitrary three bears naming of media queries). As in, "Zeta" sounds later and it's darker gray, so the metaphor for "older" is complete.

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.