A DIY Guide to Taking Your WordPress Storytelling to New Heights

A DIY Guide to Taking Your WordPress Storytelling to New Heights

We often talk about the amazing content produced by websites such as the New York Times, Pitchfork and The Global Mail that takes storytelling to new heights.

We are slowly seeing the emergence of WordPress plugins such as Aesop’s Story Engine and Storyform that can help authors elevate their stories beyond a standard post but naturally these solutions have their limitations.

If you truly want to create uniquely engaging content then you are going to have to do-it-yourself. The good news is that if you take a pragmatic approach, plan and use the right tools then it’s well within your grasp.

Post feature image showing 3 iPad screens overlayed with a WordPress logo
Snowfalling Daft Punks are definitely possible with WordPress

Replicating That Daft Punk Story

To illustrate just how to create amazing content in WordPress, let’s look at how we might replicate one of the best examples, that Daft Punk story from Pitchfork.

Plenty happening on that page, from fullscreen video backgrounds, to animated images, to sliding panels, to a fair amount of parallax-type hiding of backgrounds. And all controlled, of course, by scrolling.

All looks a little complicated but is absolutely feasible and well within the reach of any WordPress user with a bit of Javascript nous so long as you accept that you don’t have to achieve the final product within the WordPress Admin interface.

That’s so critical, I’m going to say it again: you don’t have to achieve the final product within the WordPress Admin interface.

No, really, I mean it. You will drive yourself mad if you try. You simply need to accept that the best approach for custom content is to:

  1. Enter the content and assets in as simple a form as possible
  2. Apply a basic layout using a page builder
  3. Tweak the layout using Javascript
  4. Customize the style using CSS
  5. Apply the fancy effects using Javascript

Steps 1 and 2 are performed in the edit screen of the WordPress admin interface just as you would for any post; steps 3, 4 and 5 are contained within a custom template that is assigned to the content (just like a page template).

Yes, that does mean that you are going to create a unique custom template for each story but this will be far quicker and more flexible than trying to create some generic solution that either won’t meet your needs or will need extending every time you come up with something new.

Keep in mind also that we are talking about content that will generally be published far less frequently than regular content, so we can take a more bespoke approach.

Before we get to the specific steps of creating our awesome content we need to get our WordPress install ready.

Create A Story Custom Post Type

Whilst it’s not entirely necessary to create a custom post type (CPT) for our content, it makes a lot of sense as not only can we separate out our stories from our regular posts in the Admin interface but can easily identify them on the front-end for any custom listings, automatically create archive listings and take advantage of the Template Hierarchy to provide default templates.

When you create your Story CPT, I would suggest enabling support for:

  • Title
  • Author
  • Featured Image
  • Excerpt
  • Custom Fields
  • Revisions

There are a good many CPT plugins out there to help you or you can create your own using Daniel’s excellent guide. Whichever pathway you choose, create a Story (Stories) CPT. You’ll also probably want to add some custom fields, such as Credits, which will be easier with a plugin such as CustomPress or Pods.

Enable Layouts With SiteOrigin’s Page Builder Plugin

We need to perform some basic laying out of the story, a job for a page builder plugin. My page builder of choice is Page Builder from SiteOrigin. Why?:

  1. Layout engine uses grid approach based on rows and columns which is easy to understand and simple to use.
  2. Dragging of rows, columns and widgets provides plenty of flexibility
  3. Uses widgets! Do I need to say more? Alright, using widgets (any widget) provides a massive range of options when it comes to adding features to your story.
  4. Generates consistent, predictable HTML code – invaluable when it comes to adding the advanced features to your story such as sliding and pinning.
  5. Can be deactivated without losing all the content.

Once you’ve installed Page Builder make sure you go to Settings > SiteOrigin Page Builder and check Stories in Post Types. You might also want to disable other post types such as Posts and Pages if you don’t want to use Page Builder for normal content.

Expand Your Widget Collection

Speaking of widgets (why I like Page Builder, remember?), you’ll want to expand your widget collection to allow more features for your stories.

It’s beyond the scope of this post to give you a definitive list, and it will depend on your own circumstances, but as a minimum you should add:

Of course, if you are handy with a code-editor then you might want to think about developing your own custom widgets to meet your own storytelling requirements, a title-page widget, for example, that allows a background image or video to be specified.

The Downside Of Widgets: Titles

When building out a story you will definitely need to give your widgets titles so you can see exactly what content you’ve got where. Whilst the Enhanced Text Widget provides an option to hide the widget title, most widgets don’t so their titles will be included in the HTML output. Something you may not want to happen.

You could globally switch off widget titles (a story is highly unlikely to have sidebars) or you could install the Remove Widget Titles plugin from Stephen Cronin and simply retain flexibility and simply add an ! to the beginning of those titles that you don’t want to output.

Allow Custom Template Selection For Stories

The final item in our Amazing Content Toolkit is the Template List Metabox plugin from 010 Pixel, which adds the template selection metabox that you find on the Pages edit screen to a post type of your choosing.

Obviously, for this exercise, your choosing is Stories, so once you’ve activated the plugin you’ll need to go to Plugins > Template List Metabox (strange location, what’s wrong with Settings?) and check Stories.

Now, when you Stories > Add New and click on the Page Builder tab, you should be looking at something like this:

Screenshot of the custom post type Story edit page
We are ready to start entering our content!

Now we’re ready to start building our story.

If You Fail To Plan…

You know the rest and, whilst groan-inducing, this overused Benjamin Franklin quote is actually apt for this process.

The post-production bods who put together the Daft Punk story didn’t just sit down and start messing around with the content. They planned. They designed. They drew storyboards.

And so should you.

Before you even put finger to keyboard, you should know exactly what scenes your story will include and what animations or effects will take place and when. This will not only save you time but will save you considerable frustration.

You absolutely must have a completed layout before you start to apply the styling and animation. Inserting a new row, for example, will change all the subsequent rows’ ids potentially creating plenty of rework.

But first things first. Let’s get the content in and laid out.

Get The Content Into WordPress

Might seem obvious but we need to get the text and supporting media into WordPress. At this stage we are not worried about the “special effects”, we just need to get all the material stored in WordPress with some basic layout.

Using your plan as a guide, start building the content using a Page Builder row for each scene. Don’t worry about scenes that are related (sharing a common background for example), we’ll address that later. For now, just get the basic layout done:

Screenshot of the first few frames of our story in the story edit screen
Laying out your story is quick and easy with Site Orgin’s Page Builder plugin

As you can see, it’s a basic grid layout of the first few scenes of the Daft Punk article along with general attributes such as the excerpt and the Credits.

Create A Custom Story Template

We’ve created our basic layout but obviously we now need to weave some magic in order to give our story some visual punch. We’ll do all this with a custom template.

If you’ve spent any time with WordPress Pages then you’ll likely already be familiar with the idea of being able to select a specific template for a page. Using a specific template provides us the ultimate in flexibility and means that we can concentrate on just this story.

You can find out more about Page Templates on the WordPress Codex.

First, we need to create the basic structure. We don’t need to include the standard header and footer as our layout is not going to match the main site, so we can keep things pretty simple.

This just outputs the title, credits and excerpt in a header and the content, all wrapped in an article tag. Nothing very exciting.

You’ll also notice that I’ve included a link to the jQuery library. One of the decisions you’ll need to make is how much to integrate your custom template with WordPress. Do you want enqueue scripts, for example?

For the sake of simplicity, I hardcoded references to all the 3rd-party libraries as well as embedding both custom CSS and custom script in the template itself. That will not please the purists but when it comes to testing and adding effects there’s a good reason why I’ve taken this approach.

You need the HTML.

Without easy access to the HTML, it’s really difficult to add styling and effects to your story. I found it much easier to work with a static HTML file, testing the styling and scripting and then transferring them to the template. Reuse is not the primary goal here.

To get the working HTML file, I saved the basic template to the active theme’s main directory and then selected it in the Page Templates metabox list on the story’s edit screen. Viewing the story and then viewing the source and allowed me to copy the HTML to static file.

To save you the trouble of trying to build your own and because there’s no guarantee that your HTML output will be the same as mine, I’ve included the full HTML output of an example template in the download enabling you to play around with the solution. This is basically the Page Builder output wrapped in the template.

NOTE: This is copyright material, it’s owned by Pitchfork so only play around with the HTML and the assets on your local machine. No uploading to a publicly available site, please.

What’s important to remember is that everything from this point on is client-side. WordPress has nothing more to do with this content: the whizz-bangs are all provided by a combination of CSS and javascript.

This is critical to the success of the project. Don’t try and force the square-pegged WordPress into a round hole. Use it to create the basic layout for your story and then hand-craft the CSS and javascript to make it come alive.

Hints And Tips For Adding Whizz-Bangs

Everything from now on is outside of WordPress: it’s all about client-side manipulation and interaction.

For that reason, plus my front-end developing expertise is even less than my WordPress expertise, I’m not going to go into great length about how to achieve the various effects but will give you some hints and tips to help you as as you look at the sample HTML.

Remember, the sample HTML is actual output from the WordPress set-up described above.

Respecting The Grid Layout

As you will see from the HTML, Page Builder actually builds grids very logically, with each row a div with the class of .panel-grid and each column a div with the class .panel-grid-cell.

To maintain the grid, the .panel-grid-cell is set to display:table and the .panel-grid-cell to display:table-cell. Defaults can used for width (e.g. setting the width of a .panel-grid-cell to 50%) and specifically overridden where necessary.

Full-Screen Title Page With Background Video

The first “screen” of the Daft Punk article contains just the title, sat on top of a background video.

To make the title full height, I use javascript (setting the height of the title to the height of the viewport) rather than CSS as this seems to better maintain the integrity of the DOM.

To make the video fullscreen, I’ve used the javascript and CSS from an earlier article I wrote that expands the dimensions of the video to fit the viewport. As the video’s ratio is unlikely to be the same as the viewport’s, the video is centered.

I’ve hardcoded the necessary HTML into the template, along with the wrapper CSS.

You’ll notice that there’s a check on the video’s display CSS attribute before the video resizing function is called. This is because video doesn’t play automatically on iPads and so I’m actually replacing the video on iPads with a static image.

Background Across Multiple Scenes

In the Daft Punk article, several scenes share the same gradient background. I wanted to maintain the one-row-one-frame relationship so in order to allow the one background across multiple frames (or rows), I used the wrapAll jQuery function to wrap the scenes in a parent div and then apply the background to that div.

I used the same technique to group the images for scene 1.

Obviously, this only works if the child elements are immediate siblings.

Adding Scroll-Controlled Effects With ScrollMagic

Screenshot of ScrollMagic demo page
“Use the scrollbar like a playback scrub control.”

When I initially started building this solution, I used Skrollr. I love its simplicity and with the skrollr-stylesheets extension it is possible to create effects using just CSS.

However, I ran into real problems with fixed position elements that kept scrolling (i.e. they were no longer fixed) and couldn’t find a workaround. So, I turned to ScrollMagic.

ScrollMagic is a jQuery plugin that sits on top of the Greensock Animation Platform. It looks a little daunting at first as you’ve got 2 libraries to learn but the examples, particularly ScrollMagic’s, make it easy to get the effect you want.

ScrollMagic works on the idea of adding scenes to a controller. Each scene contains an offset (when the scene begins), a duration (how long the scene lasts, in pixels) and an action.

The action describes what is happening to which elements, defined by jQuery selectors.


Two screenshots showing a pinned image and a scrolling image
Images are “pinned” to the bottom of the screen (left) but scroll with bottom of the scene (right)

The first scene in the Daft Punk story has an image that scrolls up and then “pins” itself to the bottom of the page.

To achieve this in ScrollMagic is a case of creating the scene and specifying the setPin action on the relevant element. When the scene begins, the element stops at its current location; when the scene ends the element starts moving again.

Fading The Images

The pinning described above is actually applied to a container of multiple images which have been overlayed on top of each other by using absolute positioning.

Tweens are applied to each image which changes their opacity to 0 (i.e. they become transparent) allowing the next image to become visible.

Sliding Scenes

Screenshot of scene sliding in from the right
Horizontal scrolling of scenes is easy with ScrollMagic

Sliding scenes from one edge of the viewport to the other is achieved using the TimeLineMax object on a fixed positioned element.

The TimeLineMax sets-up a Tween that will change a CSS attribute from one value to another over a specified duration. For example, if an element has it’s left attribute set to -100% and the Tween specifies 100% and the duration is 1000 then each time the viewport is scrolled by 5px (1000 divided by 200), the element’s left attribute will be increased by 1%.

Shifting The Background

3 screenshots of scenes from an iPad with the same background moved for a different view
Repositioning the same background adds variety without multiple file downloads

One neat trick, especially with the parallax scrolling, is to move the background image (or video) around to give the impression of a changing background. With a big enough image, you can make the background look distinctly different without the need to download multiple images or videos.

With ScrollMagic this can be easily achieved by toggling a class on the background to move it left or right. In the case of this example the background is manipulated as follows:

  • initially centered so that both band members are visible
  • shifted left after the title page has scrolled out so that the “blue” band member is visible when the scene 4 slide occurs
  • shifted right for scene 6 so that the “gold” band member is visible for the final text block

Scrolling on Tablets With A Scroll Wrapper

Scrolling on tablets is a cause of considerable pain, especially Apple devices that are not running iOS 8, due to their not firing the onscroll event until after the scroll completes (user removes finger and scroll momentum ends).

ScrollMagic has two workarounds, one simple, one advanced. I’ve implemented the simple workaround that wraps all the scrolling content in a container, identified in the initialization call, which ScrollMagic uses to maintain a far more accurate scroll position. The downside of the simple, and which is addressed in the advanced workaround, is a loss of scroll momentum.

iPad First Solution Building

Screenshots of two scenes from the story
The iPad makes the ideal baseline for your immersive storytelling

When creating the ScrollMagic scenes you need to have a base to start with. Whether you’re using absolute offsets or element offsets, chances are that you’ll need to add a constant in there somewhere which will need to change according to the height of the viewport.

Make that base an iPad in portrait mode (notionally 768×1024 but actually a viewport of 927 pixels high). Once you’ve got it all working on that device (or in the iOS Simulator) then you can add viewport height detection and redo your calculations, as necessary, on the difference between the current viewport height and your base viewport height.

Unique Content Needs A Unique Approach

No doubt some of you were expecting a cape-wearing plugin that would enable Daft Punk style stories to be generated straight out of WordPress. But such an approach is virtually impossible. It’s not feasible to be able to offer such a combination of flexibility and usability.

To maintain flexibility you need to create a specific solution. Of course, you will find that as your library expands then you’ll be able to repurpose previous solutions but ultimately it’s going to be a unique solution.

Don’t get hung up on this, there’s nothing wrong with this approach. Resist the urge to build a framework because you’ll either end up homogenizing all future solutions or spending all your time adding features to the framework.

Creating, storing and managing the content in WordPress is eminently sensible – it is a content management system, after all. But if you want your stories to be unique, if you want them to reach new heights, then sometimes you have to fly solo.

Download sample files (includes HTML and WordPress custom page template).