Write Stories Instead Of Code? Five Steps to Storytelling with Canvas

If this year has shown us anything at all, it’s shown us that storytelling is more than just an emerging trend. I mean honestly, how could something so timeless be a trend to begin with? At any rate, more and more companies are embracing storytelling as a part of their marketing regime.

Any why not? It’s visually appealing, interactive, and let’s face it, with the average users attention span…ummm…what was I talking about? Oh, attention span! Hah! That was it. We have to keep people interested, and entertained. Big companies are figuring this out pretty quickly, and longform articles are already proving to have an effective ROI.

So how can we do this with WooThemes and WordPress? It’s pretty easy actually, with Aesop Story Engine a suite of open source tools that allow any theme to embrace interactive storytelling. In this short tutorial, we’ll show you how you can get Aesop Story Engine implemented into Canvas with just a bit of elbow grease.

Step 1 : Install and activate Aesop Story Engine

This is the easy part! Search for Aesop in the plugins and install and activate Aesop Story Engine. If you’d like it to be available on every sub-site of a multisite install, then just network activate it. Activating the plugin will add an “Add Component” button to the post screen right above the editor, next to the “Add Media” button. Clicking this opens up a modal revealing the components and their settings. Adding and updating is all done with point and click. Super simple!

Let’s start by adding a Parallax Component to the post, and publishing. After viewing the site, this is what we get.

Hrm, it’s not full width. How come? Well nearly all WordPress themes will set a width on the “container” of the site. This is just standard practice, so everything inside of that won’t go “out of bounds.” Well with Aesop Story Engine components, they like to live full-width. So how can we achieve that in Canvas? With a sprinkle of CSS!

Step 2: Break the Container

It’s time to break stuff! We need to break the container that confines things to a certain width. Luckily with WordPress we can do this selectively, like only on our poss. We’re doing this because, when we break the width, all the animals run loose with no fences. So we need to selectively confine what we want, and let everything else run free.

Here’s the CSS for that. Note: keep in mind that this is specific to Canvas. Other WordPress themes will likely use different id’s and class names. The quickest way to add this is to install Simple Custom CSS and just copy pasta this stuff in place, or of course build a child theme if that tickles your fancy.

.aesop-on-canvas.single-post #wrapper,
.aesop-on-canvas.single-post .col-full,
.aesop-on-canvas.single-post #main article .scroll-nav__section {
max-width:100%;
padding-left:0;
padding-right:0;
}

.aesop-content,
.aesop-on-canvas.single-post #header.col-full,
.aesop-on-canvas.single-post #navigation.col-full,
.aesop-on-canvas.single-post #post-author,
.aesop-on-canvas.single-post #footer.col-full,
.aesop-on-canvas.single-post #footer-widgets,
.aesop-on-canvas.single-post article header,
.aesop-on-canvas.single-post article .post-meta,
.aesop-on-canvas.single-post article .post-utility,
.aesop-on-canvas.single-post .post-entries,
.aesop-on-canvas.single-post .entry > *:not(.aesop-component),
.aesop-on-canvas.single-post .scroll-nav__section > *:not(.aesop-component){
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}

So again, what we’re doing is breaking the container width then resetting it back onto only the paragraph item elements and things like lists. And only on posts. This means that everything besides the content will be full width. We call this approach “Content First,” where we are creating an infrastructure around our content instead of confining it. There is only one caveat to this; if a 3rd party plugin adds something to a post, it may be full width as well. The best thing to do in this case is to create a universal CSS class that you can just apply at will to confine things.

Save the changes, activate the snippet, and refresh the page. If all goes as planned, your parallax component will now be full width!!

And subsequently, all Aesop Components will now be full width. So you’re pretty much set!! Well, almost. We have two things left to do, and that’s getting prepared for the Chapter and Timeline component integrations, and adding Extended Style support.

Step 3: Chapter and Timeline Integration

The Chapter component breaks a post up into chapters which are auto-scrolled between using a slide out chapter navigation menu. This happens by scanning the post for chapter components. This works well most of the time, but since we can’t predict what markup themes use, we need to filter the class that the Chapter component searches for using the available Aesop Story Engine filters.

The fastest way to do add this piece of code is to install a plugin called Code Snippets. This holds pieces of code that you can paste functions into. Or, again, you can create a child theme just as well if you’d like to take it even further.

Download, install, and activate Code Snippets. Create a snippet and paste the following code in place.

add_filter(‘aesop_chapter_scroll_container’, ‘aesop_woo_chapter_scroll_container’);
function aesop_woo_chapter_scroll_container($class){
$class = ‘.entry’;
return $class;
}
add_filter(‘aesop_timeline_scroll_container’, ‘aesop_woo_timeline_scroll_container’);
function aesop_woo_timeline_scroll_container($class){
$class = ‘.entry’;
return $class;
}

These filters changes the classes to a .entry which Canvas uses for its post container. This works for the Timeline component as well as it’s nearly the same component, but geared for different purposes. Your snippet should only have the above code in it. If it does, activate the snippet, then let’s create a post. If not, then fix it!

Now let’s test it. Get a lot of text, like something from Fillerati. Add a few chapter components. It’s easy, click “Add Component”, and select Chapter. Scroll down and add a background image, and a title. Then insert. Create a couple more of these by adding new ones, or cloning what is there. Publish the post when done.

When you view your post you should now have a slide out menu, and when you click each heading it will scroll to that point tin the story. How awesome is that!! You could absolutely use the components in Aesop to build a one page site.

OK so last step, a simple add_theme_support snippet to enable Extended CSS.

Step 4: Add Extended CSS Support

Back in the day when Aesop was first released, the plan was to rely 100% on themes to style things the way they wanted. We quickly learned that there were more “users” than “developers” so over the course of the last 16 releases we’ve been steadily making it more and more compatible out of the box while maintaining backwards compatibility. The result is a simple add_theme_support snippet, which adds additional CSS based on what you specify. The whole snippet we’re going to paste in place as we want full styles for all components.

You can paste this into the same snippet as the one you previously created.

add_action(‘after_setup_theme’, ‘aesop_woo_extended_styles’);
function aesop_woo_extended_styles(){
add_theme_support(“aesop-component-styles”, array(“parallax”, “image”, “quote”, “gallery”, “content”, “video”, “audio”, “collection”, “chapter”, “document”, “character”, “map”, “timeline” ) );
}

That’s it! All the integrations are complete, and you are set to start making story magic.

Step 5: Write a Story

Your Canvas theme is now fully compatible with Aesop Story Engine and all of it’s components. Now it’s your turn to make something amazing. And please do share it with us when you’re finished!! We love seeing what others are doing with the tool that we spend so much time on perfecting and maintaining.

For your convenience, we’ve turned the above steps into a plugin that you can activate in WordPress. Right now this is only compatible with Canvas, but we’re happy to expand this to accommodate more WooThemes as requested.

Download the plugin here.

Happy Storytelling!
– Team Aesop