Published on by Devin Reams
Working in conjunction with AMC Networks, we lead the platform architecture and development for an entire television channel to manage their content: shows, characters, seasons, episodes, blog posts, photo galleries, videos, quotes, schedule data, movie features and more. The system is elegantly implemented as a WordPress theme using Carrington Core and Carrington Build to allow easy maintainability and future expansion.
Show/movie platform architecture
After sitting down together and reviewing the various types of content the site would contain, we mapped that to a clean architecture within WordPress. Using custom post types and custom taxonomies we created a system that allowed content to be related both hierarchically (episodes within a season) and across content types (show all content relating to a specific character).
Migration from Morello CMS to WordPress
Using our WPScraper tool, we were able to reduce the manual effort needed to migrate the existing content (shows, character biographies, episode recaps) to the WordPress-powered site. In addition, the existing source URLs were captured and used to with a redirect mechanism to ensure that site visitors are directed to the proper places on the site – even when following outdated links from other sites on the web.
Automatically expose related content
With a powerful site architecture in place, we created the ability to automatically expose related content across the site with no extra effort. If you’re watching a video about Mad Men from Season 3, Episode 2, then we have a ‘smart’ widget in the sidebar that can show more videos from that episode (or season, or show). Similarly, If you view a character’s profile page, we can automatically show all videos that character has appeared in. This is all achieved using custom taxonomies in WordPress and means no manual effort needed by the content editors.
Video integration
Using the Brightcove API to access videos, we create native content within WordPress for easy relation to other content. For example, we can map custom fields in Brightcove those to fields (title, description), meta data (last updated), and taxonomies (characters, show, season) in WordPress.
The import routine allows the video editors to manage the content in an external system (Brightcove) while allowing these video objects to become first-class citizens within WordPress.
Flexible HTML 5 theme development
We knew we needed an HTML structure that was rich enough to allow AMC to dramatically change the look and feel of the site between shows. We chose to use HTML5, the emerging standard for the discerning web publisher. The HTML structure of the site is rich with semantic hooks, classnames and IDs, allowing for major flexibility when it comes to executing complex designs in CSS. Using HTML5 is also forward-thinking: Apple, Google Microsoft and more are throwing their weight behind this new standard.
Custom show management dashboard
The clean architecture and data design makes it easy for WordPress to programmatically understand and display the content relationships. To make it equally easy for humans to manage this, we created a custom dashboard for editors to access and create new characters within shows, episodes within seasons, and even create brand new shows without having to understand the underlying technical relationships.
Efficient, contextual asset loading
All the custom per-show styles meant a lot of front-end code and a need for a good way to organize and deliver it. All assets are grouped into packages (folders) based on the show, topic or section they belong to and all packages and files follow simple naming conventions. This makes the code easy to understand and organize. Since all of our packages are organized by convention, we were able to make loading the assets an automatic process.
For many sites, customization by simply targeting CSS to a body class is sometimes not enough. Since there are so many show styles, we needed the ability to easily load asset packages based on their context (e.g.: only load Man Men styles and JavaScript on Mad Men pages). Using our modular naming conventions, we were able to create a system that loaded files conditionally with the same naming convention used for package names and body classes.
Events around scheduled movies
AMC has lots of great movies to highlight together, these are done regularly in stunts like “AMC Fearfest” and “Mob Week” where similar movies are scheduled together. Using imported schedule data, we made it so editors could easily build these feature pages by simply picking the movies and airtimes they want to feature and dropping in a custom “Schedule” Build Module.
SEO-friendly menus and updates
The mega-dropdowns in the header that are used to navigate the site are highly usable, however, all that content at the top of every page can be tricky for search engines. We created a Javascript plugin that allowed the menus to be placed at the bottom of the page source and moved into place when needed. Links anchor to the menus from the header, making these menus accessible to screen readers or users with styles/scripts turned off.
The WordPress Menu system works great for many circumstances, but when you have dozens of menus the UI can be a little bit limiting. We customized the WordPress Menu management screen using a plugin to create a drop-down list of available menus instead of tabs. This enabled the content managers to work more efficiently with the menus for each show.
Information architecture and visual design completed by AMC Networks. Social media features, custom search developed by AMC Networks in conjunction with Crowd Favorite.
