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.

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag