Using Storyform with Wordpress

This guide will help you set up Storyform on your WordPress blog or site and begin using its features. To make using Storyform easier, we've built a Wordpress plugin. However, if you do not have a site and want to create a Storyform piece, check out Using Storyform. If you are using a custom CMS or would like to manually set up Storyform on another site, check out Using Storyform with a custom CMS.


Installing Storyform

Before you can begin using Storyform, you'll first need to create an account at Storyform.co. Then you'll need to install the Storyform plugin on your site.

Install from WordPress directory

We recommend installing directly from Wordpress's directory so you can be alerted to updates and easily install them directly from your admin portal.

  1. Login to your admin Wordpress portal.
  2. Go to 'Plugins' > 'Add new'.
  3. Search for 'Storyform'.
  4. Click 'Install now'.
  5. Activate the plugin.
  6. Go to the 'Storyform' > 'Settings' page in your admin portal and login to the dashboard there.
  7. Go to the desired post's edit page and find the Storyform meta box to set the appropriate Storyform templates to use.

Manual Install

You may also manually install the plugin.

  1. If you opt to not install automatically, you can download the plugin by email us for the latest link (hello at storyform.co)
  2. Upload the entire plugin folder to the plugins folder, typically the /wp-content/plugins/ directory.
  3. Activate the plugin through the 'Plugins' menu in WordPress.
  4. Go to the 'Storyform' > 'Settings' page in your admin portal and login to the dashboard there.
  5. Go to the desired post's edit page and find the Storyform meta box to set the appropriate Storyform templates to use.

Versioning

The Wordpress plugin will frequently be updated to use the latest Storyform API version. However, each post is versioned separately, so old versions will continue to use the version they were created with unless they are edited or changed, such that they will be updated to the latest version. This ensures old posts do not need to be revisited, but authors are encouraged to update.


Setting up Storyform

Now that you have Storyform installed on your site it's time to adjust a few settings.

Managing your site's scripts

In order to remain compatible with the endless number of WP themes and plugins, Storform must manage which scripts and styles are loaded within its articles.

By default, any external script or style enqueued by any plugin or theme is dequeued. Similarly, any code run by a plugin or theme that tries to modify the header, footer, or content is also prevented. This includes code for any analytics platforms, sharing plugins, or any other plugins that rely on client side code.

However, you may allow your scripts and styles to be re-enqueued / included with the following:

  1. Visit the “Storyform” > “Settings” page in your admin portal.
  2. Click on the “Show Advanced Settings” link at the bottom of the page.
  3. Click on the box for each script / style / function that you’d like to re-include.
  4. Click “Save Changes”
  5. Be sure to verify that you have not broken your Storyform articles.

If you manually inserted a script into a template file in your theme, follow these instructions to make sure they get inserted into Storyform as well. If you use a plugin or insert scripts via code (i.e. functions.php) then follow the above (Managing your site's scripts) on how to enable them in Storyform. You may then disregard the following.

  1. Copy and paste the following into your theme's functions.php file.
  2. Replace the <script> with the scripts you'd like to include.
function storyform_theme_print_inline() {
    if( Storyform::template_in_use() ){
        ?>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'XXXXXXXXXX', 'auto');
            ga('send', 'pageview');
        </script>

        <?php
    }
}
if( class_exists( 'Storyform' ) ) {
    add_action( 'wp_print_scripts', 'storyform_theme_print_inline' );
}

Note: The script only includes the code when the Storyform plugin is activated and only on Storyform posts.

Customizing your navigation

Within the Storyform plugin you’re given the opportunity to customize the navigation bar that will display on each of your posts. To edit your navbar visit the “Storyform” > “Settings” page in your admin portal. Within this page you’ll be able to:

  1. Add a custom logo (By default your site’s title will be displayed).
  2. Edit the background and foreground colors for your navigation bar.
  3. Select either a “Full Width” or “Minimized” navbar.
  4. Select whether links should display horizontally (along the top of the page) or vertically (along the side of the page).
  5. You may also include the Post title (in “Full Width” only), Facebook, Twitter, Google Plus and Fullscreen buttons.

Customize your navbar

By default WordPress allows you to create custom menus to be used throughout your site. In order to include links within your Storyform navigation bar, you’ll need to create a custom menu.

  1. Go to your “Appearance” > “Menus” page.
  2. Click “Create Menu” and add the name “Storyform.” Create a new menu
  3. Under “Theme Locations” select the option for “Storyform navigation bar (flat)” Select the Storyform navigation slot
  4. Select the links / pages you’d like to add and click the “Add to Menu” button. Add links to the menu

Creating a post

With the Wordpress plugin, authors can start using Storyform by creating a brand new Storyform post or by starting from an existing post. This means you can decide exactly which posts when you'd like to use Storyform, and disable it on posts where you'd like to maintain your existing theme.

To create a fresh new Storyform post, locate the Storyform sidebar and choose "Add new".

To activate Storyform for your existing post, locate the meta box that appears in the sidebar on the post admin editing page and click "Create Storyform with post".

Pages and Custom post types

Storyform works with pages and custom post types as well. By default, Storyform will create a new post, but if you'd like a Storyform page or custom post type, create a new page or custom post type in your normal editor and use the admin meta sidebar box to convert it to a Storyform piece. Many authors prefer to not include the author name or date on pages or custom post types, you can achieve this by simply deleting the Storyform byline and date.

Authoring a story

View the authoring a story section for more details on authoring.