Overview

Over the course of three big project builds, I created a custom, long-form journalistic theme framework easily managed by content creators.

Lara Schenck's development work for weather.com has been crucial in the successful completion of several high-profile editorial projects - all accomplished under tight deadlines. Lara has remained calm, kept lines of communication open and delivered excellent designs and user-friendly backends every time. A pleasure to work with.
Edecio Martinez, Senior Editor at The Weather Company

My work with The Weather Channel began when I was connected to Edecio Martinez, a Senior Editor at the time, for help with a WordPress project. His team at Weather was responsible for creating and publishing journalistic content documenting trending topics such as a newly released documentary or written pieces to do with present-day weather happenings.

After helping the team put out a few WordPress fires right before launching, I was brought on to build a few sites from the ground up. These resulted in the creation of an adaptable theme framework currently in use at features.weather.com.

Climate 25

Lessons learned with page builders.

Post thumbnail
The landing page for Climate 25.

I was asked to build Climate 25 by customizing a premium theme. This particular theme relied heavily on a page builder, Visual Composer. Unfortunately, the design requirements were such that they required significant adjustments to the theme, which, in this case, hindered the process more than helped it.

Everything turned out very well but, in the end, Climate 25 was a lesson for me in the cumbersome nature of premium themes, and the value in keeping markup and styles to code rather than options.

Launch "Climate 25"

Katrina 10

A website for articles and photography commemorating Hurricane Katrina's 10 year anniversary.

Post thumbnail
Built in 5 days, Katrina 10 is the definition of a successful rush project.

Launch "Katrina 10"

Weather had initially hired an inexpensive contractor to create the website for the Katrina 10 anniversary website using a premium WordPress theme. Unfortunately, five days before the site was scheduled to launch, the team realized the contractor was not going to complete the project. Edecio called me up and I made myself available for this incredibly rushed undertaking.

Rather than opting to use a premium WordPress theme to speed up development, I decided to take this opportunity to build the site from the ground up. I’ve learned my lesson several times that using third party themes do not speed up development if your client has very particular design aspirations and content needs, and given the rushed nature of this project I was given free reign to make my own development choices.

Post thumbnail

I ended up building the first iteration of the Content Blocks framework that has turned out to work so well for Weather’s future long-form publishing needs. Making great use of the Flexible Content field in Advanced Custom Fields Pro, I devised a system wherein editors can rearrange content and select specific “blocks” that provide a tightly controlled output of clean and modular code to ensure performance and display. This structure allows editors to focus on content rather than battling with HTML and polluting the data with extraneous markup.

The Source Film

A journalistic counterpart to The Source Film, a documentary short exposing injustices in the coffee trade.

Post thumbnail
Post thumbnail

Editors can adjust things like types of animation, text and image alignment, and the size of components right within WordPress. Something like animation, in particular, would usually involve work from a developer or at least some HTML knowledge. However, with Advanced Custom Fields Pro and the wonderful Twig templating provided by Timber, this is not hard to do by printing class names in the template based on values from ACF.

For example, this opening div contains ternary operators that determine which classes to add to the tag based on options determined in the ACF field.

<div class="{{elem.type_of_element == 'image' ? 'teaser lazyload' }} {{elem.type_of_element}} {{elem.position}} {{elem.size}}{{elem.animation ? ' wow ' ~ elem.animation}}"{{elem.animation ? ' data-wow-delay=".5s"'}}>

The classes are then hooked up to either CSS or JS that adds the associated functionality. In this case, I used the WOW.js plugin to handle animations and Lazysizes for lazy loading images.

Weather.com Features

A site to archive house independent articles and series.

Post thumbnail

The “Features” website functions as a sort of portfolio, or place to archive the long form publications created by the team. From this WordPress installation, content editors can either create new “Chapters” or long form posts, or they can link to external URLs.

Post thumbnail

Using a tabbed interface, I created an options panel that allowed editors just enough flexibility to create unique “Chapters” or independent publications without needing to bring me on for minor, last minute customizations.