I built this site one Sunday afternoon. It’s a ongoing passion project that relates pretty closely to my work-week job of being a digital project manager. There, I develop strategies, oversee projects, monitor budgets, tasks and timelines to ensure good things happen for our company and our clients.
So, about this site – I started with the idea that it’s a system. Websites are (from those in the web dev industry) often seen as systems. They might be systems of design, or systems for delivering services, or a system of parts interconnected to make a whole. With that view in mind, I set about building this site with a willingness to construct parts that would eventually be connected like pieces of a puzzle to make a whole.
What are the parts of this site? To-date, they include the:
- Navigation bar (which in this case also includes the top-level search)
- Header (different for interior pages than the home page)
- Home page (really is a series of parts itself)
- Interior page (body contents)
Those are the major page parts, but it also includes the following points of consideration as well:
- Functions.php (this is a file that runs backend processes that help tell the site how to behave)
- A [Living] Style Guide (a living style guide is something I’d like to have more regularly as part of websites I build)
- Of course, site content – including copy, images, behaviors, and other tid-bits that give it personality and life.
- Extras — Tag and category management; plus the potential for custom post types and the use of custom fields.
Starting with the navigation, I decided to use a semi-custom built solution. It includes a responsive navigation that (name) helped me build [She offers a great tutorial on navs (among other things); mine came from it.]
Additionally, I’ve been fond of the ‘hide-away’ navigation (which hides upon scrolling down, but becomes visible when scrolling up). That too, is something I’ve sourced and tinkered with, but really owe to (name). [He offers a nice write-up on the functionality.]
Combining these two elements I’ve been able to create a solution I’m really pleased with.
Once I got the navigation to a place that I felt pretty good about, I turned focus to the Header. This element was to be standards across interior pages. What I wanted to achieve was a full-width space that would use an SVG background pattern.
For this, I am using Hero Patterns.
I rewired a bit of the php in the template I’m using (which is a terrific starter called BlankSlate). While it ships with a standard WordPress approach to the use of site branding and name – I wanted to engineer a situation that would bring the page and post titles into the header.