CONTENT FIRST

The components within Aesop can be used to tell your story in a variety of different ways. This is possible because the WordPress theme itself dictates how the components themselves look and feel. Some basic styling is provided out-of-the-box that works great with most themes, but to get the most of how Aesop was designed to work, a proper theme is needed.

To achieve this, we need to dramatically change the way we’d normally approach developing a WordPress theme, for Aesop in particular. Traditionally, theme developers have, for the most part, set the width of the site to a main column. If we wanted something like an image to appear outside of said column, we’d absolutely position it, with some negative margin to offset it outside of our main column.

This is great, until you want something to stretch 100% across the screen, while at the same time keeping the width of the content the same (content width). One, or two elements is easy, especially with some basic JavaScript if the elements are dynamic in height. Just absolutely position the elements, take their heights, then offset the next item equal to the height of the element.

This isn’t a very good approach though, and isn’t sustainable long-term, because you’d constantly be updating to accommodate newly added content. The best way around the aforementioned challenges, is to start with the content first.

Eh?

What I mean by this is, setting the width of the site directly on the paragraph and heading elements within a single post, instead of a main column. I realize this is a very different approach, but design without content, is merely decoration. By designing around the content first and directly, we can break out of the normal ebb and flow put emphasis on other elements while still maintaining a cohesive reading experience.

Illustration showing how to allow full-width components by setting the width directly on paragraph and heading elements.

With this Content First technique, you can have the text and headings be limited to a specific width, while at the same time having all of the content components within the Aesop Story Engine be full-width. Now, what if the user doesn’t want the component full-width? That’s O.K., as the user can enter “content” as the width for any component, and that components content will then be limited to the what you set as the sites content width.

So to summarize this technique, you can have full-width components, and non-full width components, while at the same time having the content and text limited to a certain width. Now, I’ll admit, this method isn’t perfect. If a third-party plugin inserts social sharing buttons with the_content filter, then those would of course fall outside the “content” width. In that case, you’ll need to build in styling support for those.

Bummer? Not really. Tools like the TGM Plugin Activation makes this stuff simple, as you list required and recommended plugins for custom built Aesop theme. I highly recommend you utilize this class, as you can easily have the user install the Aesop Story Engine, along with your listed plugins, within just a few clicks.

Themes that include the TGM Plugin Activation class, makes installing Aesop Story Engine a snap.

I hope with this short bit you’ll at least grasp the basic fundamentals of developing a theme for Aesop. We’re actively working on a very large tutorial that goes into great detail with regards to building a custom theme for Aesop. You can expect this sometime in the next couple of weeks. Until then, feel free to sound off in the comments below, with any questions or concerns.

– Nick Haskins