Prerequisite knowledge
 
To follow along with this tutorial you will need:
 
  • Experience with WordPress Content Management System and knowledge of the Adobe Digital Publishing Suite is required. This article also assumes you have access to a web server and have basic HTML/CSS knowledge.
User level:
 
Intermediate
 
Required Adobe products
 
Additional required other products
 
  • WordPress 3.5.0+, PHP 5.3.3 or higher, MySQL 5.0 or higher, Apache or nginx recommended.
  • Folio Author Plugin for WordPress: FTP access to the server to install the plugin.
  • We’ve tested the plugin in the following environments: MediaTemple DV, DreamHost, Rackspace (you’ll want to make sure Apache timeout is set to something above 45 seconds)
Sample files
 
Note: If you have questions about this article, use the comments feature at the bottom of the article. Please don’t contact technical support with questions about Adobe Developer Connection articles.
 

 
What is Folio Author for WordPress?

Folio Author for WordPress is a plugin for WordPress that enables publishers to create HTML articles and folios for Adobe Digital Publishing Suite (DPS), directly from their WordPress instance. Using this plugin, publishers can streamline the creation and management of their content on DPS apps across multiple devices.
 

 
How to install Folio Author into an existing WordPress environment

Installation of Folio Author is available through GitHub http://studiomercury.github.io/folio-author-plugin-for-wordpress/, where simple steps for download and installation are also provided as they are below:
 
  • Upload ‘adobe-folio-author-wp-plugin’ to the ‘/wp-content/plugins/’ directory in your WordPress instance
  • Activate the plugin through the 'Plugins' menu in WordPress
  • You will now see an icon for Folio Author in your admin menu on the left. From the plugin menu choose `Settings` to set up your credentials and any defaults for the plugin.
Figure 1 - Folio Producer Settings

Figure 1 - Folio Producer Settings

 

 
Settings and Configuration

Navigate to settings tab under Folio Producer in the WordPress sidebar to set up Folio Author plugin.
 
There are three main sections in the settings page: API Key/Secret entry, Folio Producer Account Setup and Device List.
 
 
Adobe API Key and Secret, DPS Login and Password
If you are a DPS Enterprise–licensed publisher you can contact your Adobe representative to request a unique Folio Producer API Key and Secret. By enabling the Folio Author module to directly connect to the Folio Producer APIs, publishers can maintain a sync status with all article content published through WordPress. Publishing through the Folio Producer APIs will streamline the WordPress folio publishing workflow by uploading the article content directly to Folio Producer. You will also need to enter the login for the DPS account you wish to publish to, along with the corresponding password.
 
Note: We do not recommend using your production account for the plugin. The plugin does not let you publish a folio. We recommend creating a separate or review account to connect with the plugin. Once the folio is finalized in the review account it can be shared with the production account for publishing.
 
 
Presets
We include helpful tips on rollover to help get you acquainted with the plugin. You can turn off these tooltips by checking “disable tooltips around the plugin”
You can also enable “automatically make a TOC preview image” which generates the TOC preview image using the first image in the body content or attached featured image.
The plugin also allows you to pre-set a default template for new articles you create.
 
You can also select an HTMLResources.zip file that will be included with every folio rendition that gets uploaded.
 
 
Device List
The device list holds a preset list of devices. You can select devices to which you will want to publish here, or add new devices by entering name, slug, dimensions, and device type (mobile/tablet), then clicking “add device to list.” The Folio Author plugin allows you to publish to any device that supports Adobe Digital Publishing Suite.
 
Figure 2 - Adding renditions to an issue

Figure 2 - Adding renditions to an issue

 

 
Concept: Issues, Articles and Folio Renditions

Folio Author organizes things a bit differently than Adobe’s Online Folio Producer Tools. The biggest change is the introduction of issues. While a folio is a collection of articles, an issue is a grouping of folios. Take for example a company wanting to publish a monthly edition to iPhone, iPad and a few Android devices. An issue would be the “December 2013 Issue” of the publication and inside that issue would be folio renditions for iPhone, iPad, and other devices. Grouping folios by issue allows the grouped folio renditions to share basic metadata that DPS uses to deliver the correct rendition to the targeted device.
 
Articles also have a hierarchy as well. The first time you create an article it becomes the original article. Whenever you add that article to a rendition, it’s duplicated and added to your rendition, giving the ability to make changes specific that particular rendition. If you ever make a significant change to the original article, you can always push those changes to child articles living in their respective renditions. Below is an example of issue / article / rendition hierarchy.
 
Issue (January 2014 edition of your magazine)
 
  • iPhone 4 Rendition
    • Feature Article
  • iPhone 5 Rendition
    • Feature Article
  • iPad SD Rendition
    • Feature Article
  • iPad HD Rendition
    • Feature Article

 
Creating/Managing renditions

Under the issues tab, you can begin to create new issues.
 
  • Create new issue: Click “create new issue” to bring up the box where you can enter all metadata to be shared among all renditions of that issues: Folio Name, Folio Number, Publication Name/Magazine Title, Folio Description, Publication Date, Cover Date, and Filters.
  • Pull missing issues from cloud: If there are issues you’d created in InDesign that you’d like to view and work with using the Folio Author for WordPress plugin, click on the “pull missing issues from cloud” button to pull those in.
  • + New Rendition: To the right of the issue, you can create folio renditions by clicking the + New Rendition button. As folios/renditions are specific per device, they hold advanced metadata about device size and have separate cover images for each device. Folios/renditions can all share articles, or, if desired, each folio rendition can hold a unique set of articles for its specific device. It is best to make your first rendition the biggest device you plan to publish to. (This is because you will be adding articles this folio rendition first, then pulling articles into other folio renditions from it for other devices. Smaller devices are likely to require certain articles to be split up or otherwise modified for mobile devices.)
Figure 3 - Creating DPS articles from WordPress posts

Figure 3 - Creating DPS articles from WordPress posts

 

 
Creating / Managing articles

Under the Articles tab you can either create articles from scratch or import posts from your WordPress instance as articles. In this view, you will see a list of parent articles and also see what device renditions have been made of any given article.
 
  • Create a new article: click on this to create an entirely new article in your article list.
  • Import a Post as Article: click on this to bring in existing WordPress posts as articles.
  • Templates usage/article editing: Once inside of an article, you can begin working on your content. You can select a template for the article (see VIII for full explanation of template system) to bring in styles. You can also edit the article metadata on the right if you don’t plan to bring in a sidecar.xml to carry that metadata in.
Once you have Articles ready for your issue you can associate them to folio renditions in the Folios tab, under your Issue and your first folio rendition.
 
  • Importing articles into your rendition: Once articles are locked down they can be imported. Go into a folio rendition and click “add article” to add a rendition of the original article for this device’s folio rendition.
  • Metadata sidecar importing: Some publications use a sidecar.xml from their other workflows. If you maintain a consistent article name throughout your renditions, you can click the “Import Sidecar.xml” button to choose the file. This will fill in missing metadata and re-order the articles in your folio rendition based on the sidecar file. If you don’t import a sidecar, you can reorganize the order of your articles manually in this view of your rendition by dragging the bars up or down.
  • Editing article renditions: When adding an article into your folio rendition, an article becomes an article rendition that can be edited specifically for the folio rendition on a specific device. For instance, if you’d like to change a headline to be shorter on a mobile device, you can click on the “edit article” icon on the right side of the article bar and then edit this article rendition without affecting any other renditions of the article.
Figure 4 - Previewing an article for a specific rendition

Figure 4 - Previewing an article for a specific rendition

 

  • Duplicating from another rendition: When you’ve saved a folio rendition and are ready to create another folio rendition for another device, you don’t need to add articles manually as you did for the first. You click “duplicate from another rendition,” select the folio rendition you’d like to duplicate from, and pull those articles into your new folio rendition.

 
Pushing to the Cloud

Once everything is ready in a folio rendition, you can push to the cloud by clicking on the “push rendition to the cloud” button that appears next to the folio rendition’s metadata.
 
At any time after the folio rendition appears in the cloud, you can push individual article updates or  whole folio updates back to the cloud.

 

 
Templates

Mercury has provided basic templates for creating articles. You can take these samples and make them your own by copying the dps-templates into your theme folder.
 
Duplicate the templates-dps folder from within the plugin folder to your theme folder. From here you can edit existing templates or even add your own.
 
Default templates are based on Bootstrap but you can use any UI framework you’d like.
 
  • templates-dps/
    • article.php
    • feature.php
    • HTMLResources/
      • css/
      • fonts/
      • js/
    • toc.php
    • templateResources.php

 
Sample workflow: Creating a folio start to finish

  1. Import articles from existing posts or create new articles
  2. Fine-tune articles and apply any metadata to them (if available)
  3. Create a folio
  4. Add a single rendition
  5. Import articles into the rendition and make sure the order is correct
  6. Create a new rendition and duplicate the articles from the first rendition
  7. Do this for all renditions
  8. Fine-tune any specifics for each rendition (smaller headlines/subheads for iPhone, larger image crops for iPad, etc.)
  9. Push all folio renditions to the cloud
  10. When the folio is completed it can be shared with the production account for publishing

 
Where to go from here

Once the plugin is installed, configured, and tested, the next step would be to make it your own. The templates provided are basic examples for creating a folio. The next step would be to copy the templates-dps folder out of the plugin folder and into your theme folder. These templates can then be made your own by editing them and changing styles.
 
 
Credits
This plugin was created by Mercury in collaboration with Coffee and Code.  
 
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.