Skip to: Team Showcase plugin released in the WordPress directory

Awesome plugins website

Team Showcase plugin released in the WordPress directory

Today we are proud to release the free version of the Team Showcase plugin. The plugin let’s you create and manage beautiful, interactive team showcases or staff lists from any size.

In the past 10 years we received many requests from our clients to help them creating a nice way to present their team. We tried many existing plugins but never were really satisfied with the way it worked. Most of the plugins were not following the WordPress interface logic and were bloated with options,  they would simply be too hard for our clients to learn on managing the team content themselves.  So we decided to create our own simple plugin that would work as an engine for managing team pages for any new website project we were working on in combination with a flexible skin solution that helps us to quickly modify the design in the frontend.

We have used the plugin for our client projects many times and now decided to release it in the WordPress repo for other developers to work with also we are hoping to get relevant feedback that will help us to improve the plugin to a higher level.

Two skins

In most of our projects clients are searching for solutions that are 80% the same of older projects but always have some small new tweaks. Those tweaks are mostly on the design side in combination with a need for different info to show on the page. To solve this problem without having to rebuild the plugin for every project we created a skin system. A skin is a micro theme that can be used to modify the design and to add extra meta fields for the backend.

The free plugin has two skins that let you test the engine but keep in mind that with our premium plugin you can easily install a skin from our ever expanding skin library or create a skin yourself.

We added the shortcodes in the text below to show you how nicely they show in the text.

Collapse grid

Below you see an example of the collapse grid. This is how it looks when you add the shortcode in an article like this..

  • image description
    Constance Cress
    Marketing specialist
  • image description
    Diana Lash
    Project manager
  • image description
    Jerry Pratt
    Client manager
  • image description
    Jessica Lee
    Designer
  • image description
    Katie Eaves
    Sales
  • image description
    Thomas Henderson
    Service manager

Staff list

This is an example of the staff list skin, we added three members to this team otherwise the list would be too long. Again this is the result of adding the shortcode into the text. The staff list also has an option to link to the member detail page which is disabled in this example.

  • image description
    Constance Cress
    Marketing specialist
    Constance Cress is a 31-year-old junior doctor with an unfortunate habit of bumping off the people around her.
    T: 041 - 4457478
  • image description
    Diana Lash
    Project manager
    Diana Lash has a post-graduate degree in medicine. She is allergic to grasshoppers and obsessed with over-knee socks.
    T: 041 - 44574780
  • image description
    Vicente Pecora
    Research
    Vincente Pecora is a 28-year-old scientific researcher who enjoys binge-watching boxed sets, reading and theatre.
    T: 041 - 44574784

As you can see the content for both is the same because we are loading the same member info in both the skins, so only the team presentation is different.

Member view

Next to team views we also have a member view that makes it easy to show any member in a page using in individual shortcode. Below I pasted a shortcode as an example of how it looks. By default we use the list view for the shortcode but in the premium version you can change this easily into a different design or add your own.

Candyce Johnson
Service manager
Candyce Johnson is a 27-year-old middle manager who enjoys camping, donating blood and appearing in the background on TV.
T: 041-3564544

Managing the content

Now that you’ve seen the end result we will dive into the backend interface. We tried to follow the WordPress look and feel where we can, this to make it more easy for the end-user to quickly understand how they can handle the content. Most of our clients are experienced WordPress editors so we don’t want to confuse them with different designs and interfaces.

On plugin activation a new menu section is created with three menu items:

  1.  Teams – this is where you manage the layout and behaviour of the showcase.
  2. Members – this is where you add the info for the individual members
  3.  Settings – this is where you can add site wide settings for post-types, script loading etc…

Member overview with shortcodes for individual members

Member view

The member view uses the core WordPress fields and some custom meta fields.

  1.  Title field – Name of the member
  2.  Content field – Member bio
  3.  Featured image – Profile image
Easy managing of info using the default WordPress fields

Next to the default options you will see a couple of new sections.

Select team

The select team section will help you assign the member to the team showcase. If no team shows in this list this means you have to create a team first, head over to the team section to create your first team.

Assign a member to a team using this select list.

Add member meta data

Add extra meta info easily in the meta data section, the available fields depend on the chosen team showcase.

Member shortcode

The member shortcode that can be used to show this specific member on a page or post.

Use this shortcode to show a member on a post or page

 

When you created a couple of members and all this info is filled in properly the members will show up in the team showcase. So now it’s time to show you how that part works.

Team view

The team view is where you create the team showcase, when you create a new team you have the option to add team members that you created in the member section. Also you have the option to order them by name, date, random or drag & drop.

Add team members to your team and organise them easily.

In the team view you can also choose the layout of the team by selecting it in the showcase layout section. Depending the chosen layout some extra settings fields will appear.

Select your layout from the select list

That’s all there is to it. Now you can use the preview button to quickly open a layover that shows you how the shortcode will look in the page.

preview layover that will show you the the shortcode design quickly

If all looks fine you can save the page and add the shortcode where you want to show the showcase.

That’s it, if you made it this far thanks for reading and if you want to try it out yourself head over to the WordPress repo to download the plugin. If you like the plugin please give us a nice rating and if you need more options like adding skins from our library or creating custom skins yourself you can buy our Premium version.

If you are wondering who those lovely people are that we use to showcase the demo’s, they are AI generated photos downloaded from generated.photos

Back To Top