admin-plugins author calendar category facebook post rss search twitter

TIDY REPO

The best and most reliable WordPress plugins

Aesop Story Engine

Plugin Author: Nick "Bearded Avenger" Haskins

Jay Hoffmann

January 5, 2015

Editing, Page

Aesop Story Engine is actually more then just a plugin. It’s a way of structuring, styling, and editing longform, interactive content in WordPress. It was inspired by stories like Snow Fall by the New York Times, which combines rich media components with in-depth content to tell a story.

What’s it Do?

The Aesop Story Engine plugin adds thirteen components to the WordPress editor, which can be used to create interactive narratives. This includes full-screen images, quote blocks, chapter titles, parallax images, interactive maps, post collections, PDF documents, and more. These components can be combined within the WordPress post editor to stitch together a story. Aesop takes care of the CSS, JavaScript, and external code that is required for stories like this to work, and it’s components are structured through shortcodes.

Aesop will work with just about any theme, I tested it with a few, but it really works best when combined with a theme that is structured to accommodate Aesop content. This typically means it allows full-width posts, and has some CSS set-up already that hook into classes added by the plugin. Aesop has a few premium themes available on their site, but I also found a great starter theme which, with a few customizations, can be adapted to just about any style. It supports animations, utility classes, typography, and a bunch more. If you want to get the most out of Aesop though, you’ll want to grab a compatible theme to work with. Otherwise, you will miss some of it’s functionality. I know that this is prohibitive for some people, but if longform content is the focus of your blog, it can make the process a lot easier in the end.

How’s it Work?

After you install and activate the plugin, you can start drafting Aesop posts right in the post editor. Simply go to Posts -> Add New to create your first one.

The first thing you might notice is that a new section has been added to the bottom of your post editor. This is where you can define general settings for the post. The first section features a color picker for the background color, text color and cover (background of large blocks or images), so you can customize each. Below that you can select from a drop-down either “Minimal” or “Block” layout. The former keeps things fairly simple, while the latter will add larger text, and section things off into bigger blocks. If you did chose the Block layout, then you can also customize the “Cover Lines”, or the various titles that will be used throughout the post. “Cover Line 1” defines the title. Finally, you can choose a maximum font size and width for titles.

Aesop Story Engine plugin editor

Your components in the post editor

The next step is to start adding components. At the top of the post editor,  you will see a new button, “Add Component”, right next to the “Add Media” button. If you click on this, an overlay will pop-up with thirteen different components for you to chose from. They are relatively straightforward, and include Image, Character, Quote, Content, Chapter, Parallax, Audio, Video, Map, Timeline Stop, Document, Collection and Gallery. Selecting a component will bring up a list of options in the sidebar for you to customize the look, feel and content of each one. For instance, clicking on the “Chapter” component will let you choose whether or not you want the chapter title’s background to be a video or image, a media select button for selecting this rich media, and a text field for your Chapter Title and optional subtitle. The “Collection” component, on the other hand, lets you select which category to pull a post collection from, and how many posts and columns you want. Each components options is tailored to its content type, and some are significantly more advanced then others.

Aesop Story Engine individual component

Editing a component

When you are all finished setting up a component, click on the “Insert Component” link to add it to the post editor. In the Visual editor, these will be laid out as large black blocks. Each one of these has an “Edit” and “Delete” link, which you can use to either revise a component, or remove it altogether. You can also edit content in these blocks, if it includes text content (like the content component). On the back-end, these are all structured with shortcodes, but it’s best to edit these visually.

Some components also require a bit more legwork. For instance, on the right sidebar you will see a metabox for “Map Component Locations”. This is used to set up the map component, which uses Google Maps. You can define your starting coordinates, and zoom level of the map, then use add multiple map markers, one at a time. This can then be inserted using the map component. Similarly, there will be a new section added to the WordPress admin called Galleries. Clicking on Galleries -> New Gallery will bring you to a post editor where you can create a new WordPress gallery, and then customize how it will look. These can then be added with the Gallery component, with all of your settings intact.

Aesop Story Engine maps functionality

Setting up maps

Other then that, using Aesop is a matter of stitching together components to create long and interactive posts. It’s certainly not perfect, and it will take a little legwork initially to create a theme and style that properly takes advantage of Aesop’s features. I’ve ran into small problems here and there, but nothing that has stopped me from using it altogether. And fixes are being patched through all the time. But the plugin takes a lot of the complexity out of adding things like full-width or parallax images, interactive maps, videos, and a lot of functionality you might find yourself running into from time to time. It’s an investment, but one that I think can ultimately pay off for you.

Costs, Caveats, Etc.

The Aesop plugin is free, and very well maintained. But the team also has a list of themes and add-ons available for purchase which allow you to get a little more out of the plugins. The themes will ensure that all of your components are structured  properly, and the add-ons extend their functionality with features like lazy loading and pop-out galleries.

Keep in mind, Aesop loads in a good amount of CSS and a little bit of jQuery code to make all of it’s components work. But if it is something you were planning on doing anyway, it is probably done more efficiently in the Aesop plugin. The plugin has it’s own dedicated forums if you are looking for help, and a playground of posts if you are looking for examples of what the plugin can do.

Resources

Download Aesop Story Engine Now!

Did you like this post?

  • http://michaelbeil.com Michael Beil

    Thanks for the post Jay and team. That means a lot!

    We do have a newer version of Aesop out, v1.4, just so you know, that has a redesign of the galleries, placeholders, modal window, and maps. We thought you’d like to see all of the latest features as well.

    • Jay Hoffmann

      Just saw that, this post was written just before that update. Hoping to include it’s features in a post update in the near future.

      • http://michaelbeil.com Michael Beil

        Oh awesome Jay, that sounds like a plan.

        Have you got any live sites where you’ve written something with Aesop?

  • Benjamin Brundell

    Looks very interesting indeed — is there any way we can see the structure/shortcodes behind the impressive playground sites? http://playground.aesopstories.com/

    • http://michaelbeil.com Michael Beil

      Hey Benjamin,

      Everything that you see on the playground can be done with our theme Jorgen and our free plugin. We also have a free theme that you can download and play around with over on GitHub: https://github.com/AesopInteractive/aesop-story-theme

      You can see the shortcode structure as you create a post with Aesop components in the HTML/text tab of the post editor.

      • Benjamin Brundell

        Thanks for this, Michael!

        • http://michaelbeil.com Michael Beil

          You bet!

About this Plugin
Get the latest

Signup for our newsletter to get plugin tips, and see what's coming down the pipe.

Plugin Categories