I built a custom WordPress site for Narrative Science, in partnership with agency Maark. The site was quite complicated – there is a big team of content managers, pages needed tons of flexibility, and there are several different sets of styles to manage. I worked with a frontend developer for some portions of the site, but ultimately handled a majority of the integration.
- Web Development
There are also a couple bonus styles for different events, like their Virtual Summer Camp.
The WordPress integration was a bit complicated by the different brand requirements. There are many blocks across the site that are shared between different templates, but with slightly different requirements. I couldn’t come up with a perfectly smooth solution, but ended up using ACF to build each block as a separate, disabled field group, which I could then add to different template/post type field groups as needed. On a template-level, I mirrored this setup. Blocks are setup as separate PHP files, with the block data passed to them as a variable, and are easily reused between templates.
Animations and Interactions
Resources are a CPT, which belong to the various brands. The client has a resource block available on the backend where they can select the product, and 1-2 taxonomies for further filtering. On the frontend, users are able to filter by the appropriate taxonomy and dynamically load more resources on the same page.
One task I had was to implement performance improvements, primarily based on Google Lighthouse recommendations. The goal was to improve on the previous version of the site, so the project started with testing. I implemented basic best practices theme-side like reducing requests, optimizing load order, and so on. I also used Smush Pro for a variety of image improvements like automated resizing, CDN, compression, and next-gen formats, and W3TC for caching and minification. Ultimately this resulted in a several second improvement, no small feat for a marketing site still quite full of large images, videos, and non-negotiable 3rd party scripts.