Exploring options for long-form journalism in WordPress

July 31, 2013

The New York Times Snowfall story was the first that caught my attention, and it wasn’t long after that that I saw Rough Ride, a story about the oil boom in North Dakota by Todd Melby, and then I saw ESPN’s The Long Strange Trip of Doc Ellis.  These long-form stories are not just beautifully written, but their web experience is storytelling re-imagined. 

With the Knight Errant staff, for the last five years, we’ve always had a dual focus on longer, more developed stories and short, quick hits that cater to our audience’s short attention span.  But our longer stories only rarely hit 800 or 1000 words, a far cry from long-form journalism.  This past winter, I wanted to change that –– I wanted someone on my staff to take months rather than days or weeks to write a story.  For the Knight Errant’s first attempt at long-form journalism, I looked to my senior staff writers, and to one in particular.  Anne Arnason had proven herself as one of my top writers, and she was looking for something to do, so I asked her if she wanted to try something that the Knight Errant had never done.  When I saw that that question excited her, I knew she was the right choice.

I started by showing her those long-form stories that inspired me, and she was awed as much as I was.  We spent several days discussing topics that would be both possible to write about and relevant and interesting to our audience.  Our school has a strong emphasis on social justice, and the topic the resonated most with us was teen homelessness in the Twin Cities.

We started by asking questions.  Who would we need to talk to make it a successful story?  What will make the story engaging?  What do we know already?  What do we need to know?  What would cause the story to fall short?  Soon, Anne had completely immersed herself in the story and was doing interviews not just at agencies around the Twin Cities that help homeless youth but also at the State Capitol where legislation about homeless teens was making its way towards a vote.  Each interview led to another and after 3-4 weeks of interviewing, Anne was left with hours upon hours of recorded interviews and reams of notes.

For Anne, the challenge was dealing with a huge volume of content and presenting it in a way that came together as a compelling story.  She found a narrative core, developed a clear structure, and after several more weeks, she had a draft ready for reading.  In order to give Anne a sense of how long this story would be for our audience, I had her print out the story and tape all the pages together.  The story stretched a third of the way across the classroom, and the lesson she quickly figured out was that she needed more than just a written story.  She needed photos and graphics and quotes spaced throughout to give the reader a break from the monotony that comes with such a long block of text. After several more weeks creating infographics, taking pictures, and refining and shortening the story, the editorial staff began the work of moving the story into WordPress and adding all the photos, captions, graphics, links, and quotes into the right places.  The editors spent about ten hours working in WordPress getting the Homeless Youth story ready for publication. 

One challenge we ran into with this story was that it was hard to get a photo –– putting photos of homeless youth on the web is not a good idea, and so the photos ended up being pictures of the adults who work with homeless youth and of the places where help is given.  We had hoped to have videos to go along with the different sections, but the end of the year came up quicker than the staff was able to produce one.

One of the challenges in pulling together all the elements for a story of this size is that the direction of the story can change after the initial interviews.  Next year, after we pick our topics for our long-form stories, the staff will do some initial exploratory interviews to get a better sense of where the stories will go, and from there, we’ll assign a team to each story — a writer, a photographer, a videographer, and an editor.  This team will try to anticipate what the finished project will be –– the story’s focus, the story’s segments, the photos, and the videos –– and they’ll set up a clear timeline for all these elements.

My job in the whole project was to help my students create a way to make this story look good on the Knight Errant website.  While the coding of the Snowfall and Doc Ellis stories is way out of my league, I made note of some of the basic elements from these stories that helped make them readable.

  • Simplified, unobtrusive header that sticks to the top of the screen.
  • No navigation menus –– users get only one navigation link that leaves the page.
  • Section navigation –– with a story this long, there needs to be an easy way to move to the different parts.
  • An immersive photo/video experience to start the story that takes up the whole screen.
  • Clean, minimal design –– full white background that allows the story, photo, graphics, and video to take center stage.
  • Simple javascript scrolling effects.
  • Prominent social media icons.

I started by building a custom post template –– that way this story would have its own template file that could be coded without impacting the look of any of the other stories on the site.  While I worked on that, my students added the story to WordPress much like they would any other story, the only difference being that this story is broken into five separate WordPress posts.  One of those is the master post assigned to the custom post template, and inside that master post the students added shortcodes to retrieve the other four sections (posts) of the story.

The custom post template is a much simpler template than the regular story page template on a typical WordPress theme –– it strips away all the coding for the header, navigation, and footer.  The immersive photo at the top of the story is simply the featured image for the master post, and the title of that first post is set to overlay the photo with a little CSS positioning.  As each section of the story is rendered from the shortcode, it’s displayed with its own large featured image, deck, and body text.  The four sections all have a parallel appearance –– this is because it’s the same loop of code creating them.  All the other photos that are on the left or right of the story are added with the WordPress “Insert into Post” tool, and the infographics are added directly to the body of the four posts with embed code from infogr.am.

I’m now in the process of turning the coding from this first attempt into a template that can easily be re-purposed for future stories.  While it won’t be nearly as imaginative as the sites that inspired this project, it will be a big leap forward from the standard WordPress story page that my students and so many other journalism students across the country have experienced.  For SNO customers on the FLEX platform, a first version of this long-form story page template will be released in an update this fall and should be available some time in October or November.  I’m excited to see what young journalists will be able to create with this new tool.