WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Make a Staff Directory in WordPress (with Employee Profiles)

How to Make a Staff Directory in WordPress (with Employee Profiles)

Last updated on April 17th, 2019 by Editorial Staff
253 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Make a Staff Directory in WordPress (with Employee Profiles)

Do you want to create a staff directory on your WordPress site? An employee directory allows you to introduce customers to your team members and win trust by showing the human side of your business.

One downside of running an online business is that your customers don’t get to know you or your team members personally. A team directory helps bridge that gap.

In this article, we’ll show you how to easily add a staff directory in WordPress with individual employee profiles.

How to Make a Staff Member List in WordPress

Creating a Staff Directory in WordPress (Step by Step)

First thing you need to do is install and activate Staff List plugin. It is a free WordPress team directory plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Next, you need to go to the Staff List » Admin page from your dashboard menu and click the ‘Quick Start’ tab. You will be asked to enter a name for your staff template and click the ‘Create Records’ button. For example, you can name it ‘New Staff Template.’

Create New Staff Template

Once done, the plugin will create a staff template and add 3 staff members automatically.

Next, go to Staff List » Staff Templates from your WordPress menu to preview your new staff template. You need to click on the ‘Edit’ link to configure the template.

Edit Staff Template

You will see the Template Options including staff page layout, single page layout, field order, shortcodes, etc.

Template Options - Staff List WordPress Plugin

You can review the template options to make changes or simply leave the default options.

Below that, you can see the ‘Input Fields’ section to customize your staff profile.

Staff List Field Options WordPress

As you can see in the screenshot above, there are 6 input fields created by default.

  1. Name
  2. Position
  3. Department
  4. Phone
  5. Email Link Text
  6. Staff Profile

You can change the label, display options, and style for each field from the Field Options.

Add Staff Members to Make a Team Directory

Now that you have customized your staff page template, you can add and customize your staff member profiles. Go to Staff List » Staff members, and you will see the 3 staff members already added by the plugin.

You can customize the default staff member profiles by changing the profile information. Click the ‘Edit’ link to get started.

Edit Staff Member Profiles

From here you can customize the Staff Member Data for team member listing page, individual profile page, and upload photos. The ‘Staff Page’ option shows you 6 input fields as shown in the staff page template above. The information you enter here will appear on your staff directory page.

Edit Staff Member List Page Data

Next, you can customize the ‘Single Page’ content. Like the Staff Page, it also has 6 input fields by default. However, it has a text field to write the individual employee profile bio.

Edit Staff Member Single Page

The information you enter here will appear on your individual employee profile page.

Next, you can add your team member images for the staff page and single page. You can quickly add your member’s profile photo by clicking on the ‘Select Image’ button.

Add Images to Staff Member Data

Lastly, you can see the ‘Options’ tab which includes Single Page SEO options. You can add a URL slug and page title for your team member profile page.

SEO Options Staff Member Data

If you leave the “Pretty” Permalink option blank, then your staff profile page will have a URL like this: http://example.com/profile/?smid=528.

You can make it a pretty link by entering your staff member’s name with a dash in between. For example, you can use laura-taylor which would make your staff profile page URL: http://example.com/profile/laura-taylor.

Don’t forget to click on the ‘Update’ button to save your changes.

Repeat the same process to customize all team member profiles.

If you need to add more team members, you can click the ‘Add New’ button on the top.

Add New Staff Member

First, add your staff member’s name. Then, choose your staff template from the right sidebar and click ‘Save Draft’ to load the input fields.

Choose Template for New Staff Member in WordPress

Next, you can see the same 6 input fields to create a team member profile. Add the necessary information as before.

Add New Staff Member Data

Once done, don’t forget to publish your staff member profile.

Publish Your Staff Member List in WordPress

Now that you have added all your staff member profiles, you are ready to publish your staff member list on your website.

First, you need to find and copy your staff page template’s shortcode. Go to Staff List » Staff Templates and click ‘Edit’ option below your staff page template. Then, the Template Options page will open.

Click on the ‘Shortcodes’ tab and copy the Staff Page Shortcode.

Staff List Page Shortcode

After that, you need to create a new page to display your staff member list. Go to Pages » Add New from your WordPress admin panel and enter a name for your staff list page. For example, you can name it ‘Our Team.’

Create Our Team Page in WordPress

Then add the Shortcode block to your WordPress page editor area.

Add Shortcode Widget to WordPress Editor

After the shortcode widget is added, paste the shortcode you copied earlier in the tutorial.

Add Staff Page Shortcode to Team Page in WordPress

Then, you can ‘Publish’ the page.

Now you can open the page to see how your staff directory looks. Here is how it looks on the default Twenty Nineteen theme with the default staff member details.

Staff Member List Page Demo in WordPress

In the list, you can see the ‘Profile’ option which does not have a link. We will show you how to add the link in the next step.

Adding Individual Staff Member Profiles

So far we have created a simple team directory in WordPress that lists all staff members.

The next part is to create a single page for each team member to display individual employee profiles.

Let’s start by going to Staff List » Staff Templates and click ‘Edit’ option below your staff page template.

On the next page, you need to click on the ‘Single Page – Options’ tab and copy the Single Page Shortcode.

Staff Member Single Page Shortcode

Now you need to create a new page in WordPress to add this shortcode. Go to Pages » Add New from your WordPress panel to add new a new page.

Enter your page title first — for example, Member Profile. Then, add the Shortcode widget to your WordPress page editor area and paste the Single Page Shortcode you copied before.

Add Staff Member Single Page Shortcode to your WordPress Page

After that, you need to customize your page permalink. It’s important if you want the pretty links to work, then you need to make sure that you add one of these words as your page URL slug.

  • bio
  • profile
  • profil
  • perfil

Open the ‘Permalink’ option in the right sidebar and add one of these words as your page URL. For example, we will choose the ‘profile.’

Staff Meember Single Page Permalink Setting

Once done, publish the page. Now you need to copy this page permalink and add to the Single Page Options.

You can do this by going back to Staff Template Options » Single Page – Options. Once there, simply paste the permalink in the Single Page URL field.

Add Staff Member Single Page URL to your Template Options

Once done, don’t forget to update your staff template.

After that, you need to refresh your WordPress Permalink settings to make the pretty permalinks work. Go to Settings » Permalinks and simply click ‘Save Changes’ at the bottom without changing anything on this page.

WordPress Permalinks Settings

Now you can open your staff member list page to see if the profile link is added or not. If it is working, then you will see the Profile text has a link.

Profile Link on WordPress Staff Directory Page

You can click the link, and it will open your team member’s profile page.

Staff Member Profile Single Page in WordPress

We hope this article helped you create a staff directory and add employee profile pages in WordPress. You may also want to see our guide on how to create your company org chart in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

253 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

41 Comments

Leave a Reply
  1. Scott says:
    Feb 6, 2021 at 5:46 am

    Will this plugin pull in already existing WP users or do they all have to be created separately?

    Reply
    • WPBeginner Support says:
      Feb 8, 2021 at 10:25 am

      You would need to manually add all of your users.

      Reply
  2. Dex Antikua says:
    Aug 25, 2020 at 3:53 pm

    Hi,loving the tips.
    So does i mean I will create two pages ie for or team and team profile ?

    Regards.

    Reply
    • WPBeginner Support says:
      Aug 26, 2020 at 11:09 am

      Correct :)

      Reply
  3. Aditya says:
    Aug 20, 2020 at 4:09 am

    How To Arrange them in Alphabatical order

    Reply
    • WPBeginner Support says:
      Aug 20, 2020 at 10:43 am

      You would want to check the plugin’s settings for the Staff Order section for what you’re wanting.

      Reply
  4. Art Man says:
    Jun 16, 2020 at 7:15 pm

    Hi I was trying to follow your steps but when I go to add the Shortcode widget, I do not see a shortcode widget available. Can you please help with some more detail? Thank you!

    Reply
    • WPBeginner Support says:
      Jun 17, 2020 at 8:52 am

      Apologies, by shortcode widget, we meant shortcode block for content inside a page. For all the different methods to add a shortcode, you can take a look at our guide below:
      https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress

      Reply
  5. Wagner says:
    Apr 20, 2019 at 7:09 am

    Thank’s.

    Reply
    • WPBeginner Support says:
      Apr 22, 2019 at 1:24 pm

      You’re welcome :)

      Reply
  6. Stacey says:
    Oct 26, 2017 at 7:50 pm

    I have staff member pages but do not have an option to have their picture to the left of the bio on the page that lists all of the staff members. I can only add a picture to their individual page. Help!!! :)

    Reply
  7. CK says:
    Nov 25, 2014 at 12:01 pm

    Hi Great recommendation, do you know if there is a search shortcode to find details on employees. There is one listed in the admin panel But i need one on the front end.

    Reply
  8. WPBeginner Staff says:
    Jul 19, 2014 at 10:39 pm

    We tested it with WP 3.9.1 and it works fine.

    Reply
  9. ognapolean says:
    Jul 18, 2014 at 5:52 pm

    This plugin hasn’t been test with the latest version, WordPress 3.91.

    Reply
  10. Tina says:
    Jun 17, 2014 at 2:41 pm

    Hi, I have WP v. 3.9.1. and Simple Staff List v 1.15 plugin.

    I created a person in the wp-admin. Then I used

    which writes out the person. Nice, but I have a special div structure prepared for this, so it would be nice to have access to the individual parameters (name, email, phone, …), so I can place them at a correct place.

    I tried the following:

    also the original code without from the Templates, but it always results in a plain text as if I intended to write out “[staff_loop]” on my page. See the attachement. The person above the text is the code.

    Where am I making the mistake? Thanks!

    Reply
  11. aldrien says:
    May 8, 2014 at 11:59 pm

    Hi there, i used Simple Staff List plugin in wordpress
    but got error in image uploading, using Nevo theme.
    can you please help me. Thank you

    Reply
  12. dorji khandu says:
    Apr 9, 2014 at 1:41 am

    i have added a new field but when i view it on the page the data added in a new field does not show up……..Hep me….

    Reply
  13. Sebastian says:
    Mar 24, 2014 at 5:08 pm

    Pretty cool plugin :)

    Are you planning to go on with the development of it?

    Reply
  14. Chris says:
    Mar 10, 2014 at 4:02 pm

    This plugin is great but absolutely falls short at one thing: Providing a competent Individual Staff Member page. To do so requires knowledge of PHP, which for something labeled as “simple”, is rather strange.

    The discussion at this post: http://wordpress.org/support/topic/link-to-staff-member-page did not provide a full solution, and Peggyst did not provide a full solution either. It’s all vague and piecemeal.

    I can get the information about the staff person to appear, but I cannot get it to play nice with the Twenty Thirteen (default) theme. Any idea as to what I’m doing wrong and how I can fix it? I know the solution lies SOMEWHERE in the simple.php file but, like the support thread, it’s not at all clear.

    Reply
  15. Joseph says:
    Feb 5, 2014 at 1:14 pm

    How can you display a single staff page? I have checked the WordPress forum for this information but every response appear too vague (or perhaps too advanced) for me. I have not been successful with every suggestion because of lack of clarity. I understand how to create the single-page.php but finding it difficult to incorporate this plugin to it.

    Thank you for your help.

    Reply
    • WPBeginner Support says:
      Feb 5, 2014 at 8:52 pm

      You can create a simple Page in WordPress to create a staff page.

      Reply
      • Joseph says:
        Mar 6, 2014 at 11:11 am

        Thanks for your reply but this doesn’t explain the issue. As you can see on the post here at http://wordpress.org/support/topic/link-to-staff-member-page, a lot of people are having problems creating a stand-alone staff page. I have read that forum many times and still confused on what to do.

        Basically, at what point do you insert the staff loop and how do you print or output the custom post data on the page. It will be great if you can write a followup post on this as many people seem to be struggling with this same issue.

        Thanks for your work.

        Reply
        • WPBeginner Support says:
          Mar 6, 2014 at 3:07 pm

          Joseph, the support thread you are referring to is a discussion about creating a support staff list page, where each individual staff member has their own page. On the same thread, Peggyst has posted the solution.

  16. Jerzy says:
    Nov 19, 2013 at 1:50 pm

    What’s the best (and easiest) way to add rows? I’d like to make the staff members go across horizontally instead of vertically in one column.

    I’ve checked the forums, but everything they’ve been adding is a bit too advanced for my taste. I’m a WP/CSS/htmml newb.

    any help would be greatly appreciated.

    Thanks in advance.

    Reply
    • WPBeginner Support says:
      Nov 19, 2013 at 10:46 pm

      You can do that with CSS. First use this template for your staff loop

      [staff_loop]
      <div class="staff-member-container">
      	<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
      	<div class="staff-member-info-wrap">
      		[staff-name-formatted]
      		[staff-position-formatted]
      		[staff-bio-formatted]
      		[staff-email-link]
      	</div>
      </div>
      [/staff_loop]
      <div style="clear:both;"></div>
      

      Then you can use CSS to set width, maximum height, float to left, etc. We haven’t tested it exactly but should work.

      Reply
      • Tom says:
        Feb 22, 2014 at 2:25 pm

        This template for the horizontal staff display is missing a s closing “>” at the end of line 2. Correcting this adds-in the photo some people are having trouble with.

        Reply
        • WPBeginner Support says:
          Feb 25, 2014 at 4:42 pm

          Thanks, fixed it.

        • Antonio Calabrò says:
          Oct 11, 2016 at 12:45 pm

          Using the loop template suggested, you can layout your staff list in two columns with the following CSS:

          /* div wrapped around each staff member */
          div.staff-member {
          width: 40%;
          }
          /* “Even” staff member */
          div.staff-member.even {
          float: right;
          clear: both;
          }
          /* “Odd” staff member */
          div.staff-member.odd {
          float: left;
          }

          Have fun!

  17. ravindrasaran says:
    Oct 20, 2013 at 10:37 pm

    I’have facing Same Problem DAWID.
    I can’t add photo into people of the company.

    Reply
    • WPBeginner Support says:
      Oct 21, 2013 at 12:30 pm

      The problem may occur due to a number of reasons. You should open a support thread on the plugin’s page in WordPress plugin directory.

      Reply
  18. sam jones says:
    Aug 28, 2013 at 12:40 pm

    whenever i put the [simple-staff-list] in the page nohting happens in the list it doesnt show up at ll i can no idea wht im doing wrong.

    Reply
    • WPBeginner Support says:
      Sep 10, 2013 at 9:02 pm

      for testing purposes try switching to a default wordpress theme. If this does not solve your problem try deactivating all plugins except simple staff list. If this resolves your problem, then there is a plugin causing the conflict.

      Reply
  19. Rich Kite says:
    Jul 22, 2013 at 6:40 am

    This is really great, but I want to use this tool for a contributors page instead of “Staff”. I get emailed articles of which I post, and I would like to create a page to add in a short list of bios of all my authors whom of which have no access to my page. Any ideas? Would almost be like a form I need to fill in for each new author I guess?

    Reply
    • Editorial Staff says:
      Jul 25, 2013 at 7:56 am

      Yes, you would have to do this for each author unless you want to deal with code by pulling each author profile/description automatically.

      Reply
  20. stjamesb says:
    Apr 3, 2013 at 8:47 pm

    How do get the picture and the bio in 2 columns like the example? Thanks

    Reply
  21. Samedi Amba says:
    Mar 17, 2013 at 10:56 am

    Just a follow up on a comment I’d written previously. How can I add more fields to the already existing ones?

    Reply
    • Editorial Staff says:
      Mar 17, 2013 at 11:41 pm

      You would have to dig through the code to find the filter. Asking in the support forum to the author would be the fastest thing if you don’t like digging through the code.

      Reply
  22. Samedi Amba says:
    Mar 17, 2013 at 9:05 am

    Timely! Just what I needed for a project this week. Be blessed :-) and keep all the help coming :-)

    Reply
  23. Upendra Shrestha says:
    Mar 17, 2013 at 4:32 am

    Thanks for this info. It was really helpful. And the plugin is really good.

    Reply
  24. patty jones says:
    Mar 14, 2013 at 10:04 am

    This is what I have been doing by hand, looks like I need to check this one out. Thanks for the tip!

    Reply
  25. Dawid says:
    Mar 14, 2013 at 8:37 am

    Thanks! I was searching for this plugin. It will help a lot. Problem I’m facing is that I can’t add photo into people of the company. I tried to reinstall plugin, to add new people, edit old one, tried few different photos and nothing. All the time “white line”. What to do? :)

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WP Mail SMTP logo
WP Mail SMTP
Fix WordPress email delivery issues. #1 SMTP plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
LiveChat logo
LiveChat Inc Coupon
Get a 30 day free trial and 30% OFF LiveChat, one of the best live chat service providers for WordPress users.
LearnDash
LearnDash Coupon
Get the lowest price on the best learning management system (LMS) plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.