Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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, and our comparison of the best HR payroll software for small business.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

41 CommentsLeave a Reply

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

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

    Regards.

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

      Admin

  3. 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!

  4. 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!!! :)

  5. 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.

  6. 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!

  7. 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

  8. 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….

  9. 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.

  10. 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.

      • 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.

        • 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.

  11. 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.

    • 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.

      Admin

      • 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.

        • 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!

  12. 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.

    • 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.

      Admin

  13. 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?

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

    • 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.

      Admin

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

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

  17. 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? :)

Leave A 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.