The Pew Research Center & WordPress

How I Spent the Last 5 Years Playing with WordPress and Building PewResearch.org

Follow Along

v.gd/pewwp

What will this talk cover?

  • Background on Pew Research Center
  • Redesigns
  • Cool Stuff We've Built

About Me

  • Help organize WordPress DC
  • Formerly at USNews.com
  • Lead Developer at PewResearch.org

About the Pew Research Center

Mission

The Pew Research Center is a nonpartisan fact tank that informs the public about the issues, attitudes and trends shaping America and the world.

 

As a neutral source of data and analysis, Pew Research does not take policy positions.

pewresearch.org/about/mission-and-history/

History

Project Founding
People-Press.org 1993
Journalism.org 1997
PewInternet.org 1999
PewForum.org 2001
PewHispanic.org 2001
PewGlobal.org 2001
PewResearch.org 2004
PewSocialTrends.org 2005

Founding of the Center

In 2004, the Pew Research Center was founded to house all of the separate projects and share resources.

My First Day…

(HR Paperwork)

My Second Day

  • How are the sites built?
  • What was the goal of the websites?
  • What were the biggest pain points of the websites?

What technology was powering the websites?

  • 5 were running a home-grown CMS (PHP/MySQL)
  • 1 was running on Sitecore (.NET)
  • 1 was running on an old version of Drupal (PHP/MySQL)
  • 1 was beginning a migration to Ektron (.NET)

What were we publishing?

  • Reports - An executive summary with a link to a PDF
  • Media Mentions - Links to noteable external articles
  • Datasets - Zip archives of survey data
  • Occasional Special Features
  • Archives

Technical capabilities of CMS users?

My Goal

To eliminate technical barriers so researchers could spend more time researching and less time fiddling with the website.

The Microsoft Access Incident

Blank Spreadsheet

We needed a proper CMS

Which one to choose?

  • Enterprise Solution?
  • Open Source?
  • Home grown/roll our own?

The more you pay, the crappier the CMS

Prices vs CMS Crappiness

Crazy idea!

What if we used WordPress?

Spoiler Alert!

We chose WordPress.

  • Friendly interface
  • Ease of use
  • Flexibility
  • Large Community
  • It clicked with me!

Redesigning Pew Global

Redesign First,
CMS Migration Second

Pew Social Trends

People Press

Pew Hispanic

Pew Research

A new standard

  • Updated look
  • Responsive
  • Web fonts via TypeKit
  • Clear content hierarchy
  • White space!

Hired a 2nd Developer, Adam Nekola

Refactoring Needed

  • From single mammoth stylesheet to CSS chunks
  • Centralize common theme files
  • Made new features interoperable across sites
  • Update older sites, use new look for new site migrations

Pew Religion

Journalism

Pew Internet

We Did It!

Scaling

Building a “big boy” website

How can we…

  • Handle thousands of visitors a day?
  • Keep server response times low?
  • Make caching transparent?

Run everything through a CDN

Diagram of CDN servers between browsers and an origin server

Advantages of a CDN

  • HTML/CSS/JavaScript/Images are cached on servers closer to the visitor
  • If our servers go down, the content is still accessible
  • CDN has API to flush URLs when they change

Stats

  • 80GB - 115GB of traffic per day
  • < 500ms average response time
  • In one hour, peaked 87,661 visits
  • In one minute, peaked 1,669 visits

Taxonomies

Topics Drive Automated Related Reports Feature

Screenshot of Related Reports feature

Multi-section Reports

Reordering Child Posts

Animated GIF showing how the multi-section tool works.

automatic Table of Contents

Table of Contents

Report Materials

Supplemental Materials for a Report

Started out doing this with custom fields

Report Materials Custom Fields

then editors needed more flexibility

Extra Content Field

Empty boxes get abused

We came up with something better

Drag and Drop Report Materials

Quizzes

Science & Technology Knowlege Quiz

Pew Research Center's Science Knowledge Quiz

Adding Questions to a Quiz

Quiz Questions Admin

Adding Answers to a Quiz Question

Quiz Questions Answer admin

We save the results of every quiz taken

For internal analytics, not for research.

Quiz Response Stats

Graphs and tables of quiz statistics

Quiz Question Breakdown

Charts and graphs showing which questions people got right and wrong

Journalism’s Daily Briefing Tool

Old Daily Briefings

Rethinking How Daily Briefings Work

Leverage Taxonomies for Organization

Edit News Item Screen

Making Data Entry Easier

News Item Bookmarklet
Daily Briefing Bookmarklet in Action

Associating News Items to a Daily Briefing

Add New News Items

Making an Email Version

Daily Briefing Email Feature

Old Way of Producing Daily Briefings

  • Take a whole day of someone's time
  • No archive
  • Limited by the CMS

New Way of Producing Daily Briefings

  • Takes 30 minutes
  • Multiple archives
  • CMS enhances the process

Landing Pages

First, we did this…

Old Pew Research Landing Page

Which evolved…

Another Old Pew Research Landing Page

We needed a landing page for our LGBT series of reports.

  • Content from across the Pew Research Center
  • Frequently changing as new content is published
  • Editorially-controlled ordering

Widgets to the rescue?

  • This would require additional sidebars
  • Managing the widgets would mean navigating to different sections of the admin (confusing)

What if we wanted other landing pages?

We would end up with sidebars out the wazoo!

We Needed Something Better!

So we built it…

and we call it

WP Gizmos

WP Gizmos are like per-post/page/whatever widgets.

WP Gizmos

  • Drag and drop reordering
  • Different types can be mixed and matched
  • Add as many as you want
  • Stay on the same page you're editing
  • Flexible!

Gizmo Metabox

Editing a Gizmo

Available on GitHub

github.com/kingkool68/WP-Gizmos

Infinite Scroll

We have two types of pages…

  • Pages to read
  • Pages to help you find something to read

Archives are pages aimed to help you find something to read.

At the bottom of archive pages you see this…

Pew Research Pagination

Wouldn't it be better to see more posts?

  • Using JavaScript we can fetch the next page of posts in the background
  • No need to duplicate archive logic in PHP and JavaScript
  • The back button works!

Available on Github

gist.github.com/kingkool68/9277919

Media Library Enhancement

Plugins

We have 87 Plugins

Which plugins aren't activated?

Which site has a plugin active?

Custom Feeds

Same content, different formats.

HTML

http://www.pewsocialtrends.org/2014/06/05/growing-number-of-dads-home-with-the-kids/

Prism XML

/prism/

http://www.pewsocialtrends.org/2014/06/05/growing-number-of-dads-home-with-the-kids/prism/

JSON

/json/

http://www.pewsocialtrends.org/2014/06/05/growing-number-of-dads-home-with-the-kids/json/

Plain Text

/plain/

http://www.pewsocialtrends.org/2014/06/05/growing-number-of-dads-home-with-the-kids/plain/

Markdown

/markdown/

http://www.pewsocialtrends.org/2014/06/05/growing-number-of-dads-home-with-the-kids/markdown/

CSV

/csv/

http://www.pewresearch.org/category/publications/pages/3/csv/

In Conclusion

WordPress is a flexible platform

It is capable of doing nearly anything you can think of.

Without WordPress, the Pew Research Center wouldn’t be where we’re at today.

Now Go Build Something Awesome!

Thank You!

Tweet me! @kingkool68

Questions?