#wcbos: Plugins Are Blueprints

Marc Lavallee (@lavallee) and Wes Lindamood (@lindamood) are half of the NPR Project Argo team. Both were relatively new to WordPress when they started; today they’ll be talking about the zen of using plugins.

“Each plugin speaks with it’s own voice,” says Wes. Sometimes they can produced cluttered and confused experiences for your users. The framework they’ve chosen as it relates to plugins is use, patch or build.

  • “Use” means they install the plugin, activate it, and it’s live. They may make minimal modifications with CSS, but it’s generally fine to go out of the box.
  • “Patch” means they may make minor modifications to the codebase, through hooks or actually changing core, and then try to push the improvements they made back upstream.
  • “Build” means they take ideas and inspiration from other options in the WordPress plugin directory, and roll their own plugin.

Example: Navis Slideshow

The Argo team decided to build a photo slideshow plugin that leveraged WordPress’ built in gallery functionality, and looked and worked as a standard slideshow.

Their functional starting point was the Slides for WordPress plugin. Wes downloaded and activated the plugin, and made basic presentation tweaks with CSS and Javascript. Unfortunately, there were other behavioral changes they wanted too. They thought about patching but then realized it would too much work. So they went around to rolling their own plugin.

Two improvements worth mentioning are conditionally loading images and Javascript. For the first, the problem to solve is reporters that like 60+ image photo galleries. If you load all of these images on page load, it increases your bandwidth costs and load time for end users. The solution is to reference the image URLs in a storage div, and then only load them when the user is getting close to viewing them. For the second, there’s a global variable on every page load for marking whether a WordPress gallery was included in the post. If so, the Javascript gets added to the footer.

Improvements included reducing the footprint of the plugin from 39k/895 lines to 8k/244 lines.

Example: Jiffy Posts

To make their content more engaging, Argo wanted it to make it easy for their reporters to embed rich media. Initially, this looked like Embedly or oEmbed but they didn’t want to cede control of what was embedded to the content provider.

Solution: A custom post type called Jiffy Posts. Reporters could create a new post with a title, short comment, link to the referenced media, and can include source attribution. Doing it this way, instead of having reporters embed rich media in the post, ensures there’s presentation consistency from post to post and content type to content type.

Ultimate takeaway: The decisions and opinions of plugin authors can directly impact the user experience of your website. Think about this more holistically, beyond just reviewing whether the code is clean.

The slides from the presentation are available on Slideshare and download as a PDF.

BCNI Philly: Advanced WordPress development

Andrew Nacin and Marc Lavallee led a 2 pm session on advanced WordPress development. It was mostly a free-form conversation about the use of WordPress in newsrooms. Continue reading “BCNI Philly: Advanced WordPress development”

Status

Window seat on Amtrak 651 Keystone Service to Philadelphia for my third BarCamp NewsInnovation Philly tomorrow. Stoked to hang out with Andrew, Andrew, Marc, Sean, Greg, and everyone else. Michelle arrives tomorrow night after her Yelp event. We’re staying at the Penn View Hotel, and then will enjoy a tourist day on Sunday.

Marc Lavallee and Max Cutler

Marc Lavallee and Max Cutler

Marc Lavallee and Max Cutler earlier today identifying different sources of news organization data. As a part of the Hacks/Hackers post-ONA hackathon at NPR, we rekindled NewsAnalyzr. The core idea is to build a flexible tool for analyzing the news and those who make it. A necessary foundational element is a structured database of news organizations with pertinent metadata like URL, print circulation numbers, or number of employees. Once you have this, you can, say, easily create an API to give you the title of a news organization based on URL or scrape the homepages all top 200 newspapers on a 15 minute interval during election night.

You should follow our progress on GitHub and I’ll write a more detailed post we have something useful to show of the project.