This document contains information that will help you understand the interaction with My Presentation WordPress plugin. With this plugin you can achieve different presentations for WordPress themes

For the examples presented in the document, it will be used My Way Premium theme. The way of interaction with this plugin is absolutely identical for any WordPress theme.

To install the plugin, you need to have the sources of plugin: my-presentation.zip by myThem.es team. More details about this package can be found here.

This package can be purchased from here. After the purchase you have to unzip the package. After unzipping the package we have the following items: documentation, my-presentation.zip and readme.txt.

  • documentation - here is the documentation in HTML format.
  • my-presentation.zip - this is the plugin package to be installed on WordPress platform.

Next, we need to install the package itself. To install the plugin, you need to access the admin area (http://example.com/wp-admin/) and access the Plugins section as in the image below.

Follow the steps as in the images below:

  1. Select the my-presentation.zip archive.
  2. Click on the Install Now button.

After you install and activate the plugin provided, in the admin side you'll have a new kind of custom posts that you can access at the section: Presentations(2) and the plugin settings you can access from the section: My Presentations(3). Example in the image below:

This plugin is only for WordPress platform and it allows us to create presentations for web pages made with platform's help.

Here is the general idea of the plugin. As structure: we have a page, a post, a custom post or an url. For these resources we can attach a presentation.

  1. Tooltip Title
  2. Content
  3. Button Pause
  4. Button Stop
  5. Button Next
  6. Step Counter
  7. Arrow position ( Top Left)

The presentation is visible only when you access the resource to wchich is attached. By accessing the resource it will load the web page generated by WordPress platform and it will load the first tooltip from the first presentation attached. If the visitor clicks on the button Next it will go to the next tooltip. Surfing with the Next button it will cycle through all the tooltips of all the presentations getting to the last tooltip from last presentation.

In case the visitor clicks on Pause, the tooltip will disappear and will emerge at the next loading (refresh/reload). It will emerge exactly at the step where it stopped. The browser stores the step where it stopped.

To use storage is need to enable option Use Storage from General Settings like in the image below ( field is marked with number three ).

My Presentation WordPress Plugin - General Settings

If option Use Storage is disabled then each time reloading the page, it will begin with the first step (showing first tooltip). If you click on the button Close the tooltips will disappear and will not emerge at the reload/refresh.

The options of the plugin My Presentations is divided into 4 subsections: General Settings, Layout Builder, myThem.es Links and Documentation. Example below:

This section contains general settings for the tooltips that will be added to the custom posts Presentations. eg image below:

My Presentation WordPress Plugin - General Settings Details
  1. Default Layout for Tooltips - the default skin for tooltips, in case if it is not set to one customized
  2. Default Tooltip Width (px) - the default width for all tooltips. The measurement unit for width is the pixel.
  3. Use Storage - is used to store presentation's steps.
  4. Keyboard Navigation - here you can customize your navigation keys

Here you have the possibility to build new templates for tooltips that will be used in presentations. The new templates are built based on four predefined templates: Basic White, Basic Dark, Flat White and Flat Dark.

My Presentation WordPress Plugin - General Settings Details
  1. Access Layout Builder
  2. The list of existing layouts
  3. Add a new layout

As you see in the image below, a template is composed of several elements.

My Presentation WordPress Plugin - Layout Details
  1. Layout Title
  2. Template - here are four default templates in which you may built a new template
  3. Color - the color for the button
  4. Contrast - for the templates Basic Black and Basic White is also used the Contrast property. The property change the contrast of buttons from footer of tooltips. Basic type templates have exterior and interior border. Exterior border is exactly for Basic Dark template. This property allows us to choose a suitable contrast between these two borders and the background colour of the button.
  5. Pause Button - Enable / Disable pause button
  6. Previous Button - Enable / Disable previous button
  7. Layout Preview - Allows to see the changes realtime made to this template.

Contains helpful links like: Official Facebook Page, Official Twitter, Forums and RSS Feed. Below the links is a contact form that allows you to contact us directly. In the picture below is presented the section "myThem.es Links".

My Presentation WordPress Plugin - myThem.es Links, support, facebook, twitter, rss and contact form

In this subsection we include html documentation. Now you can discover new features and read details about this plugin directly from your plugin settings.

Since it is a custom post we have the same possibilities as for regular posts (edit, delete, etc..). Eg:

My Presentation WordPress Plugin - Custom Posts Presentation

To find out the possibilities of custom posts Presentations add a new presentation. Eg:

My Presentation WordPress Plugin - Add New Presentation

A presentation is divided into 3 sections:

My Presentation WordPress Plugin - Add Test Presentation
  • Attach Presentation to Resources - here you specify to what resources will be the presentation attached. It contains the following settings:
    • Resource Type - the resource type to which to attach the current presentation ( the plugin can autodetect all custom posts )
    • Resource ID / URL - contains a list of available resources (for custom posts there is additional value All that allow to attache a presentation to all Articles of this custom post type)

    Resource Type: Post (post type: Post, Page, and custom posts name)

    My Presentation WordPress Plugin - Resources Type post and Posts

    Resource Type: ID (Post ID)

    My Presentation WordPress Plugin - Resources Type ID

    Resource Type: URL

    My Presentation WordPress Plugin - Resources Type URL
  • Settings - allows you to change plugin's settings for current presentation:
    • General
      • Autorun - enables automatic display of the tooltips from presentation.
      • Overwrite Storage Settings - allow overwrite plugin general setting Use Storage (only for this presentation).
      My Presentation WordPress Plugin - Presentation Settings, General Side My Presentation WordPress Plugin - Presentation Settings, General Side
    • Custom - Layout & Width for tooltips from current presentation.
      • Custom Layout - sets a custom layout for the current presentation.
      • Custom Width - sets a custom width for all tooltips in the presentation.
      My Presentation WordPress Plugin - Presentation Settings, Custom Side My Presentation WordPress Plugin - Presentation Settings, Custom Side
    • JavaScript - additional JavaScript code.
      • On Load Page JavaScript Code - adding a javascript code what will be run on page load.
      • On Start ( presentation ) JavaScript Code - adding a javascript code what will be run at presentation start.
      My Presentation WordPress Plugin - Presentation General Settings, Default Settings
  • Presentation Manager - Manager for tooltips My Presentation WordPress Plugin - 3 Tooltips
    1. List of tooltips
    2. Button to add a new tooltip

Let's add 3 tooltips. To add a tooltip to the presentation make a click on the button Add New Tooltip and save data using the Publish. Eg:

My Presentation WordPress Plugin - Add 3 Tooltips

It is needed to be mentioned that tooltips are sortable and have the Drag & Drop property and you have the ability to change the order. Eg:

My Presentation WordPress Plugin - Sortable Tooltip

You also have the possibility to delete a tooltip from the list or to edit the properties. Eg:

My Presentation WordPress Plugin - Details about Tooltip header and actions
  1. The area from which tooltips can be sorted.
  2. Play/Pause - if it's active play then the tooltips display is continuous one after another. If it's active Pause then the display is made until this tooltip (inclusively). In this list you can create tooltip groups. Tooltip groups are not displayed in the Autorun presentation. (except the first group).
  3. Tooltip Title
  4. Tooltip Type : Modal / Tooltip
  5. Button that allows us to display/hide details about the content.
  6. Button that allows us to delete tooltip from the list.

Below we'll talk about groups and how they work. Below is an example with list of tooltips separated into three groups.

My Presentation WordPress Plugin - Tooltips, sets and sets properties

Tooltips dividing is not required. Groups dividing will be done only in case you want to present the elements that are not included in the general presentation.

The order of the groups is exactly like in the image. The first group is marked with nr.1. By default only the first group will be displayed in the presentation. The rest you can display using additional methods.

Groups defining is made by activating the stop button on the last tooltip . By default the last tooltip from the list is inactive and has the stop button activated (it is not possible to activate play).

As it was mentioned, groups displaying can be done using additional methods. They are methods that will allow javascript display, hide and closure of tooltips (more detail about the additional methods will be in another chapter). If you display the first tooltip of a group you will be able to navigate through all the tooltips in that group. The method for displaying it you can find in the tooltip Manager. For each tooltip, the display method contains the expandable content. Example below.

My Presentation WordPress Plugin - Tooltips, sets and sets properties

To display the first tooltip of the second group is enough to include the code

<a href="javascript:mythemes_plg_presentation.show( 1385125032091 );">Show Tooltips from second Group</a> <a href="javascript:mythemes_plg_presentation.show( 1385125032091 , true );">Show Tooltips from second Group Ignore Storage</a>

or

<button onclick="mythemes_plg_presentation.show( 1385125032091 );">Show Tooltips from second Group</button> <button onclick="mythemes_plg_presentation.show( 1385125032091 , true );">Show Tooltips from second Group Ignore Storage</button>

or

<input type="button" onclick="mythemes_plg_presentation.show( 1385125032091 );" value="Show Tooltips from second Group"/> <input type="button" onclick="mythemes_plg_presentation.show( 1385125032091 , true );" value="Show Tooltips from second Group Ignore Storage"/>

After that you will be able to navigate through all the tooltips of this group.

As noticed in the picture above each tooltip has a hidden content where are several properties for the tooltip. Example in the image below.

My Presentation WordPress Plugin - Tooltip preview
  1. Tooltip Title - under the title we have tooltip ID. It is used with additional methods.
  2. Content - here you can add a text, html and shortcodes.
  3. Type - here you specify the tooltip's type which may be regular or modal. "Arrow Position" is only for usual tooltips. Modal tooltips are placed directly in the middle of the window. For this reason, for Modal tooltips, is not useed the "Arrow Position" property.
  4. Position - in this group are included the next properties:
    • jQuery Selector - it allows you to attach the tooltip to a DOM element in the HTML document. The tooltip's upper left corner will be exactly in the same place of the dom element.
    • Top - This property can take negative or positive values. If the value is positive then tooptip's left corner will move downward with the specified value (in pixels) towards the upper left corner of DOM element in the HTML document to which it is attached. If the value is negative, movement will move upwards.
    • Left - This property can take negative or positive values. If the value is positive then tooptip's left corner will move to right with the specified value (in pixels) towards the upper left corner of DOM element in the HTML document to which it is attached. If the value is negative movement will move to left.

In the image below is an example of modal tooltip:

My Presentation WordPress Plugin - Tooltip modal preview

Tooltip position: jQuery Selector, Top and Left properties. Eg:

My Presentation WordPress Plugin - Tooltip Top Menu 1

In the image below are presented properties for the tooltip above.

My Presentation WordPress Plugin - Tooltip Top Menu 2

In the advanced settings section you can change the template and the width of tooltip. Also, you have the opportunity to add javascript code that will run (execute) before displaying the tooltip and after it's being hidden. In the image below is an example with the default advanced settings.

My Presentation WordPress Plugin - Tooltip Top Menu 2

In the image below is an example with modified advanced settings where it is modified the template and width of the tooltip. If these options are used by default then the tooltip will retrieve the template and the width of the general settings of presentation. If that presentation will have the default settings then the tooltip will inherit the data of the general settings of the plugin (plugin options).

My Presentation WordPress Plugin - Tooltip Top Menu 2

There are some methods that increase the possibilities of My Presentation plugin. JavaScript mythemes_plg_presentation contains these methods. Namely, it's all about following methods: start, show, close, getTooltip, is_current(), exists_current, current and resetStorage.

This method can be used in several ways:

  1. mythemes_plg_presentation.start() - has the opportunity to display the first unviewed tooltip from the first group.
  2. mythemes_plg_presentation.start( 1385125032091 ) - has the opportunity to display tooltip with ID: 1385125032091, in case that it has not been viewed. If the tooltip was viewed then the next unviewed tooltip will be displayed.
  3. mythemes_plg_presentation.start( null , true ) - has the opportunity to display the first tooltip from the first group. (it is not checked whether or not it was already viewed).
  4. mythemes_plg_presentation.start( 1385125032091 , true ) - has the opportunity to display tooltip with ID: 1385125032091 (it is not checked whether or not it was already viewed).

This method can be used in several ways:

  1. mythemes_plg_presentation.show( 1385125032091 ) - has the opportunity to display tooltip with ID: 1385125032091, in case that it has not been viewed. If the tooltip was viewed then the next unviewed tooltip will be displayed.
  2. mythemes_plg_presentation.show( 1385125032091 , true ) - has the opportunity to display tooltip with ID: 1385125032091 (it is not checked whether or not it was viewed ).

The difference between the start() method and the show() method is that on the execution of start() method it also run the JavaScript code from the option On Start JavaScript Code.

This method allows us to hide the active tooltips.

This method can be used in several ways:

  1. mythemes_plg_presentation.close( ) - will hide the current tooltip.
  2. mythemes_plg_presentation.close( true ) - will hide the current tooltip and set that it was viewed.
  3. mythemes_plg_presentation.close( true, true ) - will hide the current tooltip, and set as viewed the tooltip and the group.

This method returns the jQuery instance of the tooltip with the ID: id.

This method allows to check if a given jQuery instance is an instance of the current tooltip.

This method allows us to see if there is any active tooltip.

This method returns the jQuery instance of the current tooltip.

This method will reset all tooltips of the presentation and will be marked as unviewed.