Sleep Foundation
Role: Web Development
Tools: Wordpress, Gutenberg Blocks, PHP, Twig, ACF, Bootstrap, SASS, jQuery
Of the multiple brands managed by Onecare Media, Sleep Foundation is, as of 2023, the most successful. Sleepfoundation.org has a mix of educational articles and commercial product reviews/listicles.
Built with SEO in mind by some of the best experts in the industry, the site consistently ranks in the top 5 Google results for popular sleep related search queries.
Redesign
During 2021 and 2022, Onecare Media grew rapidly as an organization, and added multiple new brands to our portfolio. With this growth, it was necessary to set consistent standards for the design and structure of our websites and online presence.
As a member of the engineering team, I was first tasked with working on the redesign of the wordpress theme used on our #1 site: Sleepfoundation.org.
On the design side, we were making a radical shift towards a darker color scheme, so an interim theme was developed as a midway point.
Tech Stack
Note: All screenshots of the Wordpress Dashboard and code snippets used on this page are from publicly available documentation of the technologies used, not from private sleepfoundation sources
We started with the structural changes first, implementing a new tech stack optimized for clean code, a modular component structure and logical, replicable CSS standards building off Bootstrap.
Gutenberg Blocks
In 2018 Wordpress added Gutenberg Blocks which allow for the creation of reusable modular UI components, in a way that JAMstack libraries like React, Angular and Vue operate.
With the rest of our tech stack we created a library of blocks that could be used by our content editors to intuitively structure the site using the WYSIWYG editor without having to write a line of code.
(Example images from The Advanced Custom Fields Blog)
Advanced Custom Fields
A popular wordpress plugin for creating new content fields outside those included in the WP core. We used ACF to scaffold the backend content fields needed by our editors and writers to keep the site up to date in the Gutenberg WYSIWYG editor.
Twig by Symphony
A templating engine for PHP allowing for semantic code and easily extendable templates. We use twig extensively for markup and logic across the theme.
Loops and conditionals are expressed by wrapping markup in {% for %} and {% if %} tags respectively, and dynamic values (in this case coming from ACF fields) are passed via double curly braces, as shown in the example image.
My contributions
Credit
Nathan Motsinger: Visual Design
Michelle Weaver: Co-Developer
Blake Stagner: Co-Developer
Amber Alter: Co-Developer
Matt Jennings: Co-Developer