WP Team Display documentation

Introduction

WP Team Display is a performance plugin used to manage flow chart without creating a boring HTML table presentation.

WP-Team-Display

 

I. WP TEAM DISPLAY INSTALL

1.1 Install

In order to install our plugin you should use standard WordPress installer or unzip and put all the folder in /wp-content/plugin.

install-wp-media-folder

 

Then click on activate plugin, to see WP Media Folder menu appear on the WordPress left menu.

WP Media Folder  is accessible from the media menu and the media button above your editor. You also have the parameters under the "Settings" menu.

 

1.2 Update the plugin

In order to update the WP Media Folder, you can use the WordPress default updater. You can also remove and install the new version from a .zip file downloaded on www.joomunited.com. In any case you won’t lose any content because everything is database stored.

update-notification

 

Be sure to always have the latest version to avoid security and stability problem.

 

II. WP TEAM DISPLAY COMMON USE


2.1 Manage flow chart from post/page

 

The main idea of WP Team display is to set everything from your WYSIWYG editor. WP Team display works on every WordPress WYSIWYG editor, both public and admin side. For example you can use it in posts and pages.
When WP Team display is installed you have a button displayed upon your editor. 

flow-chart-button

 

If you already have a flow chart in your editor, click on it, then on this button to re-open it or use the chart symbol available on :hover your image.

chart-existing


 
2.2 Start a new flow chart


In order to create a new flow chart, from the lightbox: add a name then click on Add new chart (the big left blue button).

new-flow-chart

 

On the left side of your interface, the existing flow chart will be listed.

flow-chart-list


2.3 Select a theme


4 themes are available and they can be selected or changed whenever you want. Theme selection won’t change the edition interface on admin side, only the frontend display.

theme-list

III. WP TEAM DISPLAY EDITION

3.1 Add a person

To add the first person you have to select an image first, use the button Upload or choose picture

picture-selection

 

Images can come from the media library or you can upload new one. Then select an image and clickon the Insert image button to add this picture like any other WordPress image.

photo-selection

 

You have the opportunity to crop your image using a specific tool for example if you want to center the image on the person face. Click on the green arrow to do that.

crop-link

Then, you’ll be able to crop and save the image.

crop-interface

 

3.2 Add information

On the public part there are some information displayed like the name, the position in the company and a description. Name and position are displayed on global view, description in detailed lightbox view.

person-information-display


On the admin part just add some of those information, the name is mandatory, and click on “add a person” to save it.

person-information-edition

Note: on the flat theme you have additional fields with social networks links.

social-information

 

 

3.3 Organize the flow chart

Once you’ve added a person, he will appear on the center part of your flow chart, then you start organizing the hierarchy. You have to use drag’n drop to organize the people.

When you start dragging a person some arrow will appear to move that person. Put the photo on a new zone to move them vertically or horizontally.

flow-chart-hierarchy

 

3.4 Edit an existing person

When you’ve added a person they are registered in your database in order to be re-used. On the bottom right column you’ll see those person appear with an Add button. Select another flow chart, click on it to add again this person.

re-insert-person

Person are “transferable” through flow charts!. To edit or remove information of an existing person, click on the pencil/trash icons over the photo.

edit-person


IV. WP TEAM DISPLAY ON FRONTEND

4.1 Add a WP Team display in editor

Finally, to display a flow chart on frontend, click on the Insert chart top right button. Save your page/post and you’re done!

insert-flow-chart

Then, your WP Team display flow chart is materialized in your editor.

flow-chart-in-editor

 

4.2 Themes overview


Default theme

default-theme

 

Flat and Circle theme

flat-and-circle

 

Natura theme

nature-theme-lightbox