Documentation

Install

Installing Team Showcase Plugin is as simple as installing any other WordPress Plugin:

  1. Upload the ‘logos-showcase’ folder to your WordPress plugin directory ( /ext/ )
  2. Activate the plugin via your WordPress admin panel
  3. A new options tab with the name ‘Team‘ is created in WordPress admin where you can configure and create your maps!

OR

  1. In your WordPress Administration go to: Plugins > Add New > Upload
    and upload the .zip folder of the plugin.
  2. Active the plugin.

Plugin Overview

The main purpose of the plugin is to display team/staff members. You can display a set of pictures and information in different layouts. Altought it was built thinking of a team/people structure, it can be used to display other kinds of informations that require an image and additional information.

You can choose between different layouts and display only a restricted number of entries using filters in the shortcode to display just the entries you need.

You can display the entries in 4 different main ways

  • A Grid
    The members will display in a responsive grid with the number of columns you set and with the information to the right, left or below the image, depending on your settings.
  • A Grid with Information on hover
    The members will display also in a responsive grid, but the information will display when you hover the image.
  • A Table
    A simple responsive table layout to display the members in a simple way.
  • With a Thumbnails pager layout
    The thumbnails of the members pictures will display smaller and on click the bigger picture and information will display in a designated area. Very similar to a gallery functionality where you can navigate the content clicking on the small thumbnails.

You can customize and enhance the layout, with several layout options and pre-built styles.

  • Number of Columns
    In the grid layouts you can choose how many columns you want to display. The Columns will be responsive and adapt in different screen sizes.
  • Image Shapes and effects
    You will be able to choose if you want the images to display with squared corners, rounded corners or even circular shaped! In addition you can give them extra styles, like grayscale, image borders and shadow styles.
  • Text Align
    Simple text alignment options: center, right of left.
  • Composition
    In the layouts where this option applies, you’ll be able to choose if the image will be above, to the right or to the left of the content.
  • Theme Presets!
    In addition to the options above, you can choose a preset combination of options.

Read a more detailed descriptions of the features.

Settings

The link for the Settings page is found on the plugin’s menu, under ‘Settings’.

settings

They are as follow:

  • Image Sizes (In Pixels. Integer number should be entered)
    Main Image Size – This will be the size of the Images. When they are uploaded they will follow this settings. If you change this settings after the image is uploaded they will show scaled.
    Thumbnails Pager – This will be the size of the thumbnail images in the ‘Thumbnails Pager’ layout. Smaller value will prevail, if image doesn’t match the size.
    Table Image Size – This will be the size of the thumbnail images in the ‘Table’ layout. Smaller value will prevail, if image doesn’t match the size.
    Social Icons – Size and shape for the social icons images
  • Email Settings
    mailto:active  – When active, emails will display as a link in the mailto:email format.
  • Single Page Settings
    Active – If active, single pages for each entry will be available.
    Layout – Choose the layout type for the single page.
    Show Latest Posts –  When active, if there is a user associated with with the entry, it will display his latest posts, if available.
    Display – Set of options to display in the single page. (Social Icons, Small Icons, Photo/Image, Free HTML, Job Title, Email, Telephone, Location)Attention: since the single page is not part of your THEME it might not work as expected. The layout might not work correctly due to your theme rules.A common problem is that the single page will display as a post page template and not as a single page template. To make the single page of the Team Showcase entry display as a normal page, access your website via FTP, access your theme folder and look for the file page.php. Make a copy of this file and rename it to single-tshowcase.php and the single page for the team entry should now display as a normal page.Other problems such the Card or columns layout not working can’t be solved easaly. If you’re having trouble with this layouts we advise you not to use any layout for the page.
  • Feature Names – These will be the labels for your features 
    Singular Name (default is ‘Member’);         .
    Plural Name (default is ‘Members’);
    Category (default is ‘Groups’);
    Slug (default is ‘team’) – This is used for the friendly urls permalinks. It can be a few lowercase words separated by dashes, If you change this option, you might have to update/save the ‘permalink’ settings again.

 

How to add and edit entries

addnew

When adding or editing a new entry, there are 7 main steps:

  1. Insert/edit the name/title for this entry. MANDATORY
  2. Insert/edit the content for this entry. This will display only on single pages.
  3. Set/Change the featured image. This will be the image that will display. The process is the same as setting a featured image on a page or post. MANDATORY
  4. Choose a category or add a new one.
  5. Insert/Edit the additional information such as Free HTML, Job Title, Email, Telephone, Location and Personal Website.
  6. Insert/Edit the links to the social networks (Must use complete URL)
  7. SAVE/UPDATE/PUBLISH the entry.

How to display the Entries

Shortcode & PHP Function

To display the logos in a page or post, you should use a shortcode.

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

You can use the Shortcode Generator to easily build a shortcode that you can copy and paste it where you need it.

You can also use the shortcode generator to generate a php function that you can use in your theme files.

shortcodegenerator

The options are the following:

What entries do you want to display
In this  set of options you can filter the entries you want to display. The options are:

  • Groups – Filter the category you want to display, or display all
  • Order By – Order by option.
  • Number of entries to display – Leave blank or 0 to display all. Integer Number required.
  • IDs to display – If you want to display only specific entries, fill in this form with the IDs of the entries you want, comma seperated. Example: 7,11,23. To find out the ID of your entry, when editing that entry, check the URL and the ID will be one next to post=.

What information do you want to display
In this options you can choose what to display. It’s recommended that Name and Image are active always.

  • Name/Title
  • Photo/Image
  • Small Icons (Will display small icons before the information)
  • Social Icons
  • Job Title
  • Location
  • Email
  • Free HTML
  • Telephone
  • Personal
  • Website
  • Single Page Link: Only considered if Single Page is Active on Settings

How you want it to look like

  • Load a Layout Preset: Choosing a preset will automaticaly select predefined values for the visuals. You can then adjust the options to your needs.
  • Layout: choose between 4 – Grid, Grid with Information on Hover, Table and Thumbnails Pager.
  • Columns – Number of columns to display. Depends on the layout choosen.
  • Theme – Extra CSS theme for the layout chosen.
  • Composition – Where the Image and Text will display.
  • Image Shape – Choose between 3: Square, Rounded Corners or circles.
  • Image Effect – Extra CSS effects for the images.
  • Text-Align – Alignment of the Text
  • Image Size Override: Leave blank to use default values.In case you want to override the default image size settings, use this field to put the width and height values in the following format: width,height ex. 100,100. Width value will prevail if images don’t have exactly this size.

The preview
The preview will show you the items and layout you choose. However, after you apply the shortcode on your pages, the visuals can possibly change. This is because some CSS of your theme might affect the content of the team showcase layouts. Normal problems are image CSS and text CSS.

After you set the options you want, on the right side the shortcode or PHP function will be ready to copy and you can paste them in the appropriate place.

shortcode-example

Searching for Entries

There are 3 ways you can search for Member entries. You can use the general default wordpress search form, or use a Team Showcase specific search form. The additional information fields will only be included in the search when using the URL option to set a link to a page where a team showcase shortcode was used.

Example search form:

  • Default WordPress Search Form
    For the member entries of the Team Showcase show up in the results page for the default search form, you should have the ‘Exclude From General Search’ option in setting not checked. This way when you search for a text string, if it exists in the title or content of the member entry, it will display together with the other results in the search results page, together with results of posts and pages.
  • Team Showcase specific Search Form Widget
    The plugin will create a new Widget for you to use. You can find the ‘Team Search Form’ widget in the Appearence > Widget administration page. You can drag that widget into one of the available sidebars and fill out the options. This will display a search form that will only search in the Team Showcase entries. The options are the following:
    Title: This will be the title of the widget;
    Show Groups: If activated, it will display a drop down with the categories/groups created;
    URL: Link of the page where you applied a Team Showcase shortcode. This way the results page will have the layout set in that page. If empty it will default to the search results template page of current Theme.
  • Team Showcase Search Form SHORTCODE
    You can create the same search form as the widget with a shortcode. You can place this shortcode on a page or post. The sintax is the following:
    [show-team-search filter=”” url=””]
    filters parameter accepts ‘true’ or ‘false’. If true, the dropdown with the available categories/groups will display.
    URL parameter is the link of the page where you applied a Team Showcase shortcode. This way the results page will have the layout set in that page. If empty it will default to the search results template page of current Theme.

 

Customizing the Plugin and Visuals [For the Advanced User]

Changing the CSS files to change the visual of the different layouts is not advised, as it will affect possible future updates, you may loose your changes after an update.

However, if you want to change them, here are some tips.

Visuals/CSS

All the CSS files are inside the folder of the plugin called CSS. They are named after the layouts/themes available in the displaying options.

All the layouts include the file global.css where there are the main rules for the layout. We advise you to enter your own custom classes and rules here. In this file there are already some empty class rules that you can edit to customize the visuals of the information.
They are the following:

.tshowcase-box-title {}
.tshowcase-box-social {}
.tshowcase-box-details {}
.tshowcase-single-position {}
.tshowcase-single-email{}
.tshowcase-single-telephone{}
.tshowcase-single-location{}
.tshowcase-single-shortbio{}
.tshowcase-single-website{}

 Advanced Options

The plugin includes a file called advanced-options.php where a set of options are defined. If you are an advanced user you can edit this file to make some changes to the plugin so it better suits your needs. The things you can change are the following:

  • Order of the Content
    There are 2 arrays $ts_content_order and $ts_social_order that have the order of the content. If you want to change the order of the information or the social icons, you can change the order of the entries in these arrays. Read further information in the file before the array.
  • Small Icons
    The plugin uses the icons from Font Awesome. You can change the icons code for each label in this array. Make sure to check out Font Awesome for more information on the available icons.
  • Labels
    If you want to change the default labels for the Additional Information fields you can do it by changing the array $ts_labels. You should keep the key and meta_name and change only the label and description entries.
  • Layout themes
    If you want to add your own custom theme to a layout, you can add a new entry to the array $ts_theme_names.

FAQ

  1. Is this plugin Responsive?
    Yes, the the layouts are responsive.
  2. Can this be used only to manage team members?
    No, you can do this to whatever you want. If you have a problem that needs a plugin that displays images with extra information in different layouts, this plugin might help you.
  3. Can I add extra fields in the Additional Information box?
    No, you can’t. However the ‘Free HTML’ fields lets you add any HTML content, so you can use this field to extend your content. Also, if you’re an advanced user, you can change the labels of the other fields if needed.
  4. Can I hard-code one of the layouts to my WordPress Theme?
    Yes, you just need to use the PHP Function provided in the Shortcode Generator option.
  5. Can I change the visuals of the layouts?
    Yes, but at your own risk. The CSS files are in the CSS folder and the files are named after the theme/layout names.
  6. I want to include this plugin in my commercial wordpress template and sell it, can I do this?
    You should contact me first so we can discuss this possibility.
  7. The single page is not working! What can I do?
    If when you open a single page it returns a ‘Page Not Found’ error, it’s possible that the permalinks are not working well. Go on Settings > Permalinks and save the settings again, even without any changes. This will make the permalinks option update.