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.

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