WP Team Display documentation
- I. WP TEAM DISPLAY INSTALL
- II. WP TEAM DISPLAY COMMON USE
- III. WP TEAM DISPLAY EDITION
- IV. WP TEAM DISPLAY ON FRONTEND
WP Team Display is a performance plugin used to manage flow chart without creating a boring HTML table presentation.
I. WP TEAM DISPLAY INSTALL
In order to install our plugin you should use standard WordPress installer or unzip and put all the folder in /wp-content/plugin.
Then click on activate plugin, to see WP Media Folder menu appear on the WordPress left 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.
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. You can go to Left menu > Settings > WP Team Display to manage the charts as well.
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.
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).
On the left side of your interface, the existing flow chart will be listed.
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.
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
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.
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.
Then, you’ll be able to crop and save the image.
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.
On the admin part just add some of those information, the name is mandatory, and click on “add a person” to save it.
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.
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.
Person are “transferable” through flow charts!. To edit or remove information of an existing person, click on the pencil/trash icons over the photo.
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!
Then, your WP Team display flow chart is materialized in your editor.
On the top of the right panel, you can find the shortcode you can use to insert your chart in your posts. For example: [teamchart id='1' title='sample chart']
4.2 Block in Gutenberg
Gutenberg is the default editor in WordPress now, so you can use shortcode or use WP Team Display block to show your chart.
First, click on the WP Team Display button in the Widgets category. Then choose the chart to insert by pressing Add New Chart button. That's all.
4.3 Themes overview
Flat and Circle theme