The article archives page on CSS-Tricks is rather important. Rather than having paginated blog posts like most blogs have, I simply link to the archives. I figure it'll save people the trouble of click-and-scrollbrowse, click-and-scrollbrowse, click-and-scrollbrowse... Instead, they go right to a page where they can scrollbrowse a large number of articles in a more succinct format.

However, the current design doesn't encourage that browsing very well. It's simple a list of titles. That might work for some folks but it's not super enticing.

Since the archives are supposed to be easy to browse as well, pagination will be important. We've already tackled pagination before, but there is a lot of it here. This is an opportunity to test things out and bring the style elsewhere when we find something good.

We jump right into the code. We figure out the markup for these archives come from a little plugin we can wrestle control of. We also already have a CSS file we can work with. Sometimes (read: 99% of the time) it's not great to alter plugin itself. If the plugin ever were to update, it would overwrite your changes. Well, in this case, this plugin is so customized it's essentially just our own custom functionality bit and I don't even really think of it as a plugin but rather just some code that's been moved out of functions.php.

We do what we need to do to get a decently styled page that is a list of all article, paginated. Ultimately offscreen, this is tweaked a bit to include small bits of the article itself and a comment count, so it's a bit better to browse and gauge popularity.

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.