# Flowt for WordPress ![Flowt for WordPress](http://brandontom.com/wp-content/uploads/2014/03/flowt-logomark-banner.png) ## Introduction Flowt is helps you build online, interactive presentations right from WordPress. Flowt is powered by Flowtime.js. To see Flowt in action, [click here](http://brandontom.com/blog/flowt_presentation/an-introduction-to-flowt/) To follow all the latest news about Flowt, visit the Facebook page: ## Requirements * WordPress 3.9 ## What's New in 1.04.01 - All scripts have been updated to be compatible with WordPress 3.9 - Flowt can now import OpenOffice Presentations (`.odp`). - The user interface has got a new look-and-feel. - Added a `Treat Lists as Fragments` option in the `Flowt` section. If activated, all list items will automatically behave like a `ft-fragment step`. ## Installation ### Step 1: Downloading the latest version of Flowt You can get the latest stable version of WordPress plugin directory: Or from the github repository: ### Step 2: Install Login to your WordPress admin menu and open the `Plugins` menu (for network installations, you will need to open you `Network Admin` menu first). Click the `Add New` link and select `Upload`. Click `Browse...` and in the dialog menu, locate the .zip archive you saved and select `Open`. Click `Install Now` to install the plugin. ### Step 3: Activate After WordPress is finished installing the plugin, hit the `Activate` link that appears on the installation page. ## Configuring Flowt ### Presentation Options Flowt allows you to set up parameters for each individual presentation you create. Here is a listing of those options and a brief explanation of their function. For indepth coverage of each feature, please refer to the Flowtime.js documentation (see Appendix). #### Autoplay Options ##### Autoplay Determines whether the presentation navigates through pages automatically. (Default: `off`) ##### Autoplay Delay If `Autoplay` is turned on, this option determines how fast (in milliseconds) the presentation will navigate through pages. (Default: `10000`) ##### Auto-start If `Autoplay` is turned on, this option determines whether begins as soon as the presentation loads. (Default: `off`) ##### Skip Fragments If `Autoplay` is turned on, this determines whether the presentation navigates through fragments, or skips them. (Default: `off`) #### Navigation Option These options specify the way in which users can interact with the presentation ##### Directional Keys (keyboard) If turned `on` the user can use the directional keys on the keyboard to navigate through the presentation. (Default: `on`) ##### Scroll Wheel (mouse) If turned `on` the user can use the scroll wheel on the mouse to navigate through the presentation. (Default: `on`) ##### Swiping (touch screen) If turned `on` the user can use swiping to navigate through the presentation. (Default: `on`) ##### History If turned `on` the user can use the brower's history to navigate through the presentation. (Default: `off`) ##### Looping Presentation If turned `on` the presentation will cycle back to the start when navigating forward from the last slide. (Default: `on`) ##### Fragments on Back If turned `on` the user will have to navigate through each fragment when navigating backwards. (Default: `on`) ##### Show Progress If turned on, the user will be presented with a small navigation structure in the bottom left corner of the presentation. (Default: `off`) #### Flowt Options ##### Use Flowt Styles If turned `on` it provides, the presentation uses Flowt's custom stylesheet which overrides some of Flowtime.js's presentation settings, to make it work better with some of WordPress's built in features. (Default: `on`) ##### Enable Custom Themes If turned `on` the user can provide a custom stylesheet for the presentation to load (see *Uploading a Custom Themes*). #### Custom Presentation Theme If `Enable Custom Themes` is turned `on`, then you can supply your own stylesheet to use with the presentation. ##### Uploading Your Own Stylesheet (Note: to upload your own stylesheet, you should be familiar with transferring files to your web host). Your presentation can use a custom stylesheet that you provide. The steps are: * Upload your CSS file to the directory indicated under that reads label `Upload your custom themes to:`. Once you've uploaded the CSS file, Flowt will automatically detect it. * To use it, turn `Enable Custom Themes` to `on` * select the CSS file from the dropdown menu. #### Treat Lists as Fragments If turned `on`, all lists will behave like fragments. (Default: `on`) ### Using a Custom Template The default template for presentations is a pretty sparse. It's designed to be starting point for custom templates. To create your own template file, create a file named `single-flowt_presentation.php` and save it to your theme's directory. Flowt will automatically recognize this template and use it instead. As of 1.03 you can also now use WordPress's built in `single-{post-name}.php` template naming convention. ## Constructing a Presentation This section presents an overview of the Flowtime.js Presentation format. However, it should be noted that a far more concise outline of this process is available at [Flowtime.js's official repository](http://www.github.com/marcrolago/flowtime.js). For more the most up-to-date and accurate information regarding this matter, please see this documentation, specifically the section entitled *How to Build the Markup*. The most basic Flowtime.js presentation requires at least one Flowtime container (`.flowtime`), a section (`.ft-section`) and one page (`.ft-page`).
(content)
### Using the Outliner The Outliner is tool that is helpful for generating the structure of presentation. Here is a diagram of Outliner's controls ![Outliner's Controls](http://brandontom.com/wp-content/uploads/2014/03/flowt-outliner-controls.png) (Note: Currently, the outliner only works with in the Visual Editor mode.) ### Starting Off The Outliner begins with one section and one page already present. ### Adding a new section To add a new section, click the `+` icon at ### Removing a section If you wish to remove a section, click the `x` icon at the top of the section you wish to remove (Note: all pages within this section will also be removed. This action cannot be undone.) ### Moving a section left Click the left arrow at the top of a section to move a section over one to the left. ### Moving a section right Click the right arrow at the top of the section to move a section over one of the right. ### Add a page to a section To add a page to a section, click the `+` icon at the bottom of the section you want to add the page to. The new page will appear at the very bottom of the section's pages. ### Removing a page from a section To remove a page from a section, click the `x` icon inside the page you wish to remove. ### Moving a page up in order To move a page up in the section order, click the up arrow inside the page you wish to move. ### Moving a page down in order To move a page down in the section order, click the down arrow inside the page you wish to move. ### Editing a page title To edit the title of a page, click on the title you wish to edit and change the text. ### Appending the outline to the presentation Pressing the `Append Outline` button will take the outline you have just created and attach it to the end of the content present inside the Visual Editor. Once the outline is appended to the visual editor, the Outliner will reset its content. ### Overwriting an existing presentation outline Pressing the `Overwrite Outline` button will take the outline you have created and **overwrite** any existing content inside the Visual Editor. Once the outline is sent to the visual editor, the Outliner will reset its content. ### Resetting Outliner If you would like to reset the Outliner, press the `Reset Outliner` button. (Warning: this cannot be undone.) Although this presentation would be perfectly valid, it would be very dull. To spruce up your presentation, Flowtime.js supplies several built-in content types: Fragments, Stacks and Parallax. These three content types need to appear within the page element. Here's how to create them. ## Reading Material ### Flowtime.js * [Github Repository and Documentation](http://www.github.com/marcolago/flowtime.js/) * [Official Demonstration](http://flowtime-js.marcolago.com) ## Changelog ### 1.03 - Theme and Template developers can now specify a Flowtime.js Event callback via the `FlowtListener`. (full API described [here](https://github.com/magicink/flowt/wiki/3.1---FlowtListener-API)) - Theme and Template developers can now use WordPress's `single-{post-name}.php` template naming conventions. ### 1.02 - Added support for sub-pages (new TinyMCE button) - Added a widget which generates a list of the latest presentations. - Added a title to the single template. - Added responsive meta tags to the default template ### 1.01 - Added better support for WordPress's built in styles - Added a Fragment Shy Button ## License This file is part of Flowt for WordPress. Flowt for WordPress is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Flowt for WordPress is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with Flowt for WordPress. If not, see .