#146: Custom Header for The Lodge

(Updated on )

In the last screencast we snagged that photo from iStockPhoto of the snowy cabin and forest. We dropped it in the background, behind the main content area and sidebar of our Photoshop document and it fit nicely up there, in kind of the style of the headers of the other areas of the site. Between screencasts, I wrote up some copy for the page as well. I would have liked to screencast that, but writing copy is one of those things that just takes a long time and is even more finicky than design tweaking is. We do talk about it a bit though.

In Photoshop, I “hid” the text “The Lodge” behind the trees with a little zoomed in image masking. I didn’t do a super detailed job of it, but you don’t really have to when you are zoomed in and the image will be scaled down on the web as well.

We make a unique page template just for this page (page-lodge.php). Using the PHP comment convention /* Template Name: The Lodge */ then that template shows up in our Page Template dropdown page when creating a new Page in WordPress. This gives us all the control we need. We can edit the HTML in this template, and if we need unique CSS for this page, we can use conditional logic and link it up in the header.php file. In retrospect, it makes more sense to use the functions.php file to link up unique CSS to keep the “view” (header.php) cleaner, but that’s something for next time.

The background graphic for this header would be called a “Hero Graphic” – that is, a large (literally and size-wise) graphic that is important to the look/feel/content of the page. Since we’re trying to be responsible with performance (we want the site to load fast), we really shouldn’t be serving this gigantic graphic to tiny screens. This is much easier in CSS than it is in HTML. We use our “reverso” media queries (min-width instead of max-width) to say “when the screen is this wide or wider, use this graphic … when it’s even wider, use this graphic” and so on. That way by default only the smallest image is used, but that is overridden when a wider browser requests the page. A bit of mobile-first thinking there.

By the end we have a nice canvas (if you will) to work on for all The Lodge pages.