#108: Building Individual Snippets Page

We start about by looking at some of the grunt work I did behind the scenes fleshing out some things that needed to be done. Like adding in the rest of the wp_list_pages() calls to output the rest of the list of snippets for each category. And also adding in the CSS to change the color of the bar separating the categories and the lists of snippets. We also changed the hovers of the categories to lighten the colors instead of the dumb white border that we temporarily had in there. Literally, we used the lighten() function in Sass to do the work for us.

The goal in this screencast though is to style up the view for a single snippet. If I had created this area of the site more recently, snippets might be a custom post type (like single gallery screenshots are), but those didn’t exist when I started doing this. As such, they are just “Pages” and all use a custom page template. Not a big deal, really, especially now that having lots of pages isn’t a performance concern.

Individual snippets pages are going to be a lot like blog posts. The standard 2/3 1/3 grid structure and a normal sidebar. There are some differences though. There is a clear hierarchy to snippets, e.g.

Home » Code Snippets » Snippet Category » Snippet Name

This is perfect for the “black bar” sub navigation that is evolving on this site. Our Yoast SEO plugin provides breadcrumb functionality so this is easy – just a matter of calling a function.

Another difference is that we output the_modified_time() instead of the publication date. That way people know the last date a snippet was updated, which is more relevant than when it was published. It also provides me some motivation for revisiting snippets regularly.

We go on a little aside updating an old snippet just for fun.

We finish up by writing a little bit of JavaScript that will make our sub-category views work. Those views essentially look just like our Snippets homepage, only if you are at /snippets/javascript/, the JavaScript snippets will be in view by default and the JavaScript category highlighted. Believe it or not, just a few lines of sneaky URL peaking JavaScript code that should probably be a snippet onto itself.