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.pdf - here is the documentation in PDF 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 or more. Attaching multiple presentations is useful if you opt to make presentations for different area of your pages (eg: header, content, footer). In this case you can make three presentations, one for each side. Thus you have the possibility to reuse them.

A presentation can be composed of one or more tooltips. A tooltip has different global and individual settings which allows us to attach it in different ways at different elements of a page.

  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 in cookies. This cookies may expire or can be deleted. The timeout period can be specified in the General Settings field in the image below marked with number three. Example in the image below:

My Presentation WordPress Plugin - General Settings

If the timeout period is zero 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 (it will emerge at the reload/refresh only if the timeout period is bigger than zero).

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. The Cookie will expire after nr. day(s) - here you can set the timeout period for cookies (in days).

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 Basick Black and Basic White is also used the Contrast property. The property has contact just with the tooltip footer button. 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. 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
    • Resource ID / URL - contains a list of available resources

    Resource Type : Post

    My Presentation WordPress Plugin - Resources Type post and Posts

    Resource Type : Page

    My Presentation WordPress Plugin - Resources Type page and Pages

    Resource Type : ID

    My Presentation WordPress Plugin - Resources Type ID

    Resource Type : URL

    My Presentation WordPress Plugin - Resources Type URL
  • General Settings - allows you to change the General Settings for current presentation:
    • Autorun - enables automatic display of the tooltips from presentation.
    • Custom Layout - sets a custom layout for the current presentation.
    • Custom Width - sets the width for all tooltips in the presentation.
    • Javascript Code - adding a javascript code that will run before displaying the presentation.

    Eg. Default Settings on presentation

    My Presentation WordPress Plugin - Presentation General Settings, Default Settings

    Eg. Custom Settings on presentation

    My Presentation WordPress Plugin - Presentation General Settings, Custom 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_tooltips.showGroup( 1385125032091 );">Show Tooltips from second Group</a>

or

<button onclick="mythemes_plg_tooltips.showGroup( 1385125032091 );">Show Tooltips from second Group</button>

or

<input type="button" onclick="mythemes_plg_tooltips.showGroup( 1385125032091 );" value="Show Tooltips from second Group"/>

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_tooltips contains these methods. Namely, it's all about following methods: start, startIgnoreCookie, showTooltip, showTooltipIgnoreCookie, showGroup, showGroupIgnoreCookie, pause, pauseTooltip, closeTooltip, closeGroup and removeCookie.

This method allows us to display the last shown tooltip in the first group with the ability to navigate through the following visualized tooltips. If no tooltip has been shown will be displayed first. If all tooltips were showned it will be displayed no tooltip.

mythemes_plg_tooltips.start();

HTML :

<a href="javascript:mythemes_plg_tooltips.start();">Show My Presentation</a>
<button type="button" onclick="mythemes_plg_tooltips.start();">Show My Presentation</button>
<input type="button" onclick="mythemes_plg_tooltips.start();" value="Show My Presentation">

This method allows us to display the first tooltip in the first group with the ability to navigate through the following tooltips by using the next button. It doesn't matter if the user previously have been viewed some tooltips from the first group.

mythemes_plg_tooltips.startIgnoreCookie();

HTML :

<a href="javascript:mythemes_plg_tooltips.startIgnoreCookie();">Show My Presentation any time</a>
<button type="button" onclick="mythemes_plg_tooltips.startIgnoreCookie();">Show My Presentation any time</button>
<input type="button" onclick="mythemes_plg_tooltips.startIgnoreCookie();" value="Show My Presentation any time">

This method allows us to display a tooltip not viewed. The tooltip will be missing Next button and will not offer the option to navigate to the next tooltip.

mythemes_plg_tooltips.showTooltip( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.showTooltip( 1385117970930 );">Show Tooltip</a>
<button type="button" onclick="mythemes_plg_tooltips.showTooltip( 1385117970930 );">Show Tooltip</button>
<input type="button" onclick="mythemes_plg_tooltips.showTooltip( 1385117970930 );" value="Show Tooltip">

This method is very similar to showTooltip( id ) method. The only difference is that tooltip’s display does not depend if it was viewed or not.

mythemes_plg_tooltips.showTooltipIgnoreCookie( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.showTooltipIgnoreCookie( 1385117970930 );">Show Tooltip and Ignore Cookie</a>
<button type="button" onclick="mythemes_plg_tooltips.showTooltipIgnoreCookie( 1385117970930 );">Show Tooltip and Ignore Cookie</button>
<input type="button" onclick="mythemes_plg_tooltips.showTooltipIgnoreCookie( 1385117970930 );" value="Show Tooltip and Ignore Cookie">

This method allows us to display a unviewed tooltip from a group. The displayed tooltip allows you to navigate to next tooltips using the Next button. Navigation is possible only to the following tooltips you have viewed and which contain the same group.

mythemes_plg_tooltips.showGroup( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.showGroup( 1385117970930 );">Show Group</a>
<button type="button" onclick="mythemes_plg_tooltips.showGroup( 1385117970930 );">Show Group</button>
<input type="button" onclick="mythemes_plg_tooltips.showGroup( 1385117970930 );" value="Show Group">

This method allows us to display a tooltip (doesn't matter if it was viewed) of a particular group. The displayed tooltip allows you to navigate to next tooltips using the Next button. Navigation is possible only to the following tooltips which contain the same group (it doesn't matter if these tooltips were viewed or not).

mythemes_plg_tooltips.showGroupIgnoreCookie( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.showGroupIgnoreCookie( 1385117970930 );">Remove Cookie & Show Group;/a>
<button type="button" onclick="mythemes_plg_tooltips.showGroupIgnoreCookie( 1385117970930 );">Remove Cookie & Show Group</button>
<input type="button" onclick="mythemes_plg_tooltips.showGroupIgnoreCookie( 1385117970930 );" value="Remove Cookie & Show Group">

This method allows us to hide all tooltips. At the next refresh of the page it will display the first tooltip you visualized in the first group (if the presentation has the autorun enabled).

mythemes_plg_tooltips.pause();

HTML :

<a href="javascript:mythemes_plg_tooltips.pause();">Hide All;/a>
<button type="button" onclick="mythemes_plg_tooltips.pause();">Hide All</button>
<input type="button" onclick="mythemes_plg_tooltips.pause();" value="Hide All">

This method is identical to the previous method. The only difference is that the method execute JavaScript code. The code can be added to the property On Hide in advanced settings.

mythemes_plg_tooltips.pauseTooltip( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.pauseTooltip( 1385117970930 );">Hide Tooltip;/a>
<button type="button" onclick="mythemes_plg_tooltips.pauseTooltip( 1385117970930 );">Hide Tooltip</button>
<input type="button" onclick="mythemes_plg_tooltips.pauseTooltip( 1385117970930 );" value="Hide Tooltip">

If you use this method then you will hide all tooltips. For tooltip with ID: id shall execute the javascript code and the tooltip will be marked as viewed. Javascript code can be added in the advanced property settings On Hide.

mythemes_plg_tooltips.closeTooltip( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.closeTooltip( 1385117970930 );">Close Tooltip;/a>
<button type="button" onclick="mythemes_plg_tooltips.closTooltip( 1385117970930 );">Close Tooltip</button>
<input type="button" onclick="mythemes_plg_tooltips.closeTooltip( 1385117970930 );" value="Close Tooltip">

If you use this method then you will hide all tooltips and the one with the ID: id and the following up to the end of the given group will be marked as viewed.

mythemes_plg_tooltips.closeGroup( id );

Parameters :

id : tooltip id ( eg. 1385117970930 )

HTML :

<a href="javascript:mythemes_plg_tooltips.closeGroup( 1385117970930 );">Close Group</a>
<button type="button" onclick="mythemes_plg_tooltips.closeGroup( 1385117970930 );">Close Group</button>
<input type="button" onclick="mythemes_plg_tooltips.closeGroup( 1385117970930 );" value="Close Group">

This method allows us to reset all tooltips. All tooltips of the presentation will be marked as unviewed.

mythemes_plg_tooltips.removeCookie();

HTML :

<a href="javascript:mythemes_plg_tooltips.removeCookie();">Delete Cookie</a>
<button type="button" onclick="mythemes_plg_tooltips.removeCookie();">Delete Cookie</button>
<input type="button" onclick="javascript:mythemes_plg_tooltips.removeCookie();" value="Delete Cookie">