Library Docs

Product Documentation

Here you'll find all the documentation for our themes and add-ons offered through our Library. The first step is to install your plugin or theme, so refer to these steps below.

Installing Themes

  • Login to your WordPress administration area, and go to Themes-->Appearence.

  • At the top of the page, select the "Install Themes" tab.

  • Once you are here, select "Upload," then "Choose File" to locate yourtheme.zip on your computer, and install.

note All Aesop Themes include the ability to install Aesop Story Engine from the WordPress.org repo automatically, after theme activation.


Installing Plugins

  • Login to your WordPress administration area, and go to Plugins-->Add New.

  • At the top of the page, select the "Upload" tab.

  • Once you are here, select "Upload," then "Choose File" to locate yourplugin.zip on your computer, and install.

Theme | Genji

Genji was our first commercial theme, and it's design is built to serve a simple purpose. There isn't a "story cover" feature in this theme, instead, features a scaled back version that automatically resizes itself. Genji was built to get started with Aesop quickly and easily, but without the barrier of creating beautiful covers and stories.

All themes include an "owners-manual." This is included within your theme download, and contains additional information specific to your theme. Please refer to your products owners-manual for detailed instructions.

Options Overview

Site Logo
Upload an optional logo to be displayed in place of the site title..
Background
Controls the background color of the site.
Text
This controls the overall text colors.
Link
This controls the overall color of the themes links.
Footer Text
Change the sites footer text. Some HTML is O.K..

tip If you'd like to replicate the demo content, import this XML file into Tools--Import within WordPress admin.

noteDevelopers, refer to the owners-manual in the theme download for documentation on how to set up a child theme, as well as how to utilize the included dev tools.

Theme | Jorgen

Jorgen is a completely replicate of our Playground Demo site, and was built as a theme after numerous requests. The demo theme was built to showcase what Aesop can do when coupled with a storytelling theme, and Jorgen expands on this by adding a few more Story Cover options, comments, and complete color control.

All themes include an "owners-manual." This is included within your theme download, and contains additional information specific to your theme. Please refer to your products owners-manual for detailed instructions.

Options Overview

Background
Controls the background color of the site.
Text
This controls the overall text colors.
Link
This controls the overall color of the themes links.
Width
Change the width of the text content within the story.
Enable Front Page Header
Creates a top bar that shows site title, and includes menu toggle to open menu.

Front Page Header

In Jorgen 1.0.4 you can now enable a header bar that will appear at the top of the blog listings page. This bar holds the site title, as well as a menu toggle that, when clicked, will reveal an off-canvas WordPress menu. This is the same menu that shows on single pages, and, single pages also have the menu icon to toggle the menu as well.

If Aesop Social add-on is activated, social links will be placed inside of this added header.

Story Cover

The story cover uses the Featured Image option located in WordPress admin when writing each post. If the image is perhaps too light, or dark, you can add a "mask" and adjust it's opacity, as well as change the color of the text using the custom Story Cover controls. With the Story Cover feature, you can also set a "block style" cover, which slightly resembles a book cover with big, responsive type.

Start by first setting a cover image using the Featured Image area, then from there, adjust the cover using the controls. Descriptions of these controls are as follows. The unique thing about Jorgen, is that each story can have an independant design. The options below, cover these individual story design options. These options only affect the story that you change them on.

Cover Setup
Cover Text Color
Controls the color of the text on the story color.
Story Background Color
This controls the overall background color of the story.
Story Text Color
This controls the overall color of the story text.
Story Cover Mask Color
Sometimes your cover image can be too light or dark, so you can apply a "mask" and set the color here. Black, is a great place to start if you're not sure.
Story Cover Mask Opacity
After applying the mask, specify the opacity, or how "see through" it is. 0.2 is a great place to start if you're not sure.
Cover Layout
Style
Jorgen ships with two different cover type styles. You can have it as a "minimal" setup or a "block" style setup. If you choose "block" style, then you can use the options below. Otherwise the options below have no effect. Again, these are specific to each individual story.
Cover Lines 1 - 5
If you are using Block cover style, Jorgen will attempt to split the title on its own. However, you can override this with the lines 1-5. Use any, or all lines.
Maximum Font Size
If you don't have a lot of text, the font size will likely be ginormous. Put in a maximum, like 400.
Maximum Title Width
What't the maximum overall width size of the block style text? Default is 70% of the width of the screen.

tip If you'd like to replicate the demo content, import this XML file into Tools--Import within WordPress admin.

noteDevelopers, refer to the owners-manual in the theme download for documentation on how to set up a child theme, as well as how to utilize the included dev tools, and included filters.

Theme | Andersen

All themes include an "owners-manual." This is included within your theme download, and contains additional information specific to your theme. Please refer to your products owners-manual for detailed instructions.

Options Overview

Background
Controls the background color of the site.
Text
This controls the overall text colors.
Link
This controls the overall color of the themes links.
Footer Text
Change the sites footer text. Some HTML is O.K..

noteDevelopers, refer to the owners-manual in the theme download for documentation on how to set up a child theme, as well as how to utilize the included dev tools.


Theme | Kerouac

All themes include an "owners-manual." This is included within your theme download, and contains additional information specific to your theme. Please refer to your products owners-manual for detailed instructions.

Options Overview

Site Logo
Upload an optional logo to be displayed in place of the site title..
Background
Controls the background color of the site.
Text
This controls the overall text colors.
Link
This controls the overall color of the themes links.
Accent Color One
Controls the blue accent color.
Accent Color Two
Controls the red accent color.
Accent Color Three
Controls the orange accent color.
Footer Text
Change the sites footer text. Some HTML is O.K..

tip If you'd like to replicate the demo content, download and unzip this XML file, and import file into Tools--Import within WordPress admin.

noteDevelopers, refer to the owners-manual in the theme download for documentation on how to set up a child theme, as well as how to utilize the included dev tools.


Plugin | Social

The Aesop Social plugin will take care of adding Facebook Open Graph meta tags, Twitter meta cards, and will also save your social link profiles, in addition Google Authorship, and Google Analytics integrations. You can take these settings with you from Aesop theme to Aesop theme.

All settings are entered with the Theme Customizer. While logged in, head to Appearence-->Customize, and click the Aesop Social tab.

Social Options

Enable Twitter Cards - Checking this box will integrate Twitter Meta Card data within your site. The "description" is pulled from your post or pages excerpt, and if no description if found, it will fall back to your sites description.

Twitter Image Fallback - Here you can provide a fallback image for the Twitter Meta Card Image property. By default it will take your post or pages featured image, but if one is not present, it will fallback to the you upload here.

Enable Facebook Open Graph - This works just like the Twitter Meta Card info above, and enables rich sharing within your site.

Facebook Image Fallback - Here you can provide a fallback image for the Facebook Open Graph Image property. By default it will take your post or pages featured image, but if one is not present, it will fallback to the you upload here.

Google Analytics - Enter your Google Analytics UA-XXXX-XXX code to enable Google Analytics site tracking.

Facebook App ID - By providing a Facebook App ID you can enrich the quality of snippets shared from your site.

Twitter Username - Provide your Twitter handle. Some themes and especially Twitter Meta cards will use this.

Facebook Profile or Page URL - Provide your Facebook page or profile URL, as some Aesop themes will utilize this.

Google+ Profile URL - This is helpful for validing your website when setting up a Google+ Profile.

Displaying Icons

Because we take a "universal" approach to building themes and add-ons, Aesop Social can be used within any of our themes to display social icons. It's up to the theme to determine where to display theme. With Aesop Social, your settings remain in one place, so you can take them with you to the next Aesop theme.

If you're a developer, there are a few hooks and filters available for you to utilize.

do_action('ase_addon_social_links');

Show the icons in any theme by placing the snippet above wherever you'd like the icons to appear. This is typically done within a theme template file. Note, this is NOT necessary for themes built by Aesopinteractive L.L.C.

aesop_social_message

This filter allows you to change the default "Find us" message.

aesop_social_link_list

This action allows you to add more links to the end of the list. Here's an example.

add_action("aesop_social_link_list","myaddlinks");
function myaddlinks(){
  return "<a href="">New Link</a>";
}

noteThe new hooks and filters are only available in Aesop Social 1.0.2 and up.

Plugin | Lazy Loader

The Aesop Lazy Loader add-on will convieniently optimize the loading of the images within your site. It's important to note that this plugin doesn't have any options, and just works "automatically" with all Aesop Story Engine components.

If you'd like to add the lazy loading affect to other images, just add the class .aesop-lazy-img.

Plugin | Character Carousel

Character Carousel is a great way to show multiple characters in a story without any code at all. You can create and manage unlimited carousels, all within WordPress.

To get started, head into your WordPress admin area, and click on the Carousels tab on the left. Here you can create a carousel, so go ahead and do so. The name isn't used, and is only for your reference. This carousel uses the Character Component within Aesop Story Engine, so it uses all those options found within it. You can upload an image as an avatar, specify a name, and bio.

There are only two options available, and that is to automatically start the carousel when the page loads, in addition to specifying how many characters are shown at once.

After setting up your first carousel, copy and paste the included shortcode on a page or post where you want the carousel to be shown.

Carousel Options
Timing
Set this to something like 1000 to have the carousel automatically rotate every 1 second.
Visible Items
Enter a number such as 4 or 7. This will determine how many items will be shown at once.
Enable Pager
Enable or disable the pager that appears below the carousel.

Plugin | Story Front

The Aesop Story Front add-on, will allow you to choose a specific story as your sites landing page. In other words, you can choose a story to appear on the front of your site, so when someone visits your site, they see your chosen story.

Setup is a snap, and is covered in just a few steps below.

warningThis add-on is currently only compatible with Jorgen.

  • Create a page in WordPress. The name doesn't matter in this application, unless you are not setting the story as the front of your site.

  • Open the Customizer panel under Appearence-->Customize, and locate the "Aesop Story Front" tab. Using the dropdown, select the story that you want to appear.

  • Now, using the next dropdown, select the page that you created in Step 1. This page will display the story you chose above.

  • While still in the Theme Customizer, and under "Static Front Page", choose the page that you created in step one.

Visit the front of your site, and it shoudl now display the story that you have chosen, with the page you setup set as the front page of your site.

Story Cover

The story cover feature in Jorgen is fully compatible. After you've setup your story and page, you'll change the story cover options on that same page.

Template Override (advanced)

You can modify the template being used to display the single story. Simply copy the file asf.php from the plugin, and paste it into a child theme created for Jorgen. ASF will now use your template instead of the plugins template.

noteFor styling purposes within a theme, the selected story front page will have a class of .aesop-story-front applied to the body.

warningThis add-on is currently only compatible with Jorgen.

Plugin | Story Highlights

Add a "cliff notes" style summary to individual stories with an easy to use admin interface.

  • Create a post within WordPress.

  • Using the Story Highlights meta panel, add individual highlights with the "Add New" button.

  • Highlights will be displayed in the appropriate place that the theme decides.

Aesop Story Highlights is compatible with all Aesop themes. All themes will display the highlights in a different fashion, so refer to each themes demo for demo of this, or reach out with a pre-sales question.

Shortcode

Optionally display highlights wherever you want them to be displayed.

[aesop_story_highlights]

Filters

aesop_story_highlights_title

Filters the name of the module. Default is Story Highlights. Heres an example on how to change the title.

add_filter('aesop_story_highlights_title','mychangetitle');
function mychangetitle(){
  return 'New title';
}

Override Shortcode

The main shortcode function can be overridden by copy and pasting into a child themes functions.php file.