We now have a Photoshop design to work from for the homepage of the Snippets area. It’s a lot more browse-able than it was before, but keeps the rainbow spirit that it had before. Now we can jump into actually building it in our WordPress templates. Writing all the HTML and PHP and CSS and YOU KNOW THE DRILL!
Step one is moving over our custom header we had ready to go in our static design. That means changing around a little HTML to have the correct wrapper elements. It also means making sure the conditional logic in the header is in place to load the CSS specific to this area is good. This always makes me think of the 1, 2, or 3 rule that I have for CSS files and JavaScript files on any given website. CSS-Tricks is a perfect example of “2” website where we have global styles and a CSS for for each special section of the site where it has quite a bit of styling unique to it. This snippets layout is certainly unique.
To get all the output on this page that we need, we use a bunch of wp_list_pages() calls again. We talk about how this might be problematic because it’s such an intensive call and we’ve had problems with it in the past when we created the Almanac area. However, since we’ve increased our memory usage and are using caching, it’s not a big deal.
We end the screencast with everything we need output onto the page and a very basic grid set up. Now we can move onto making it look like our mockup and ultimately add the interactions.
