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.
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.’
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.
You will see the Template Options including staff page layout, single page layout, field order, shortcodes, etc.
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.
As you can see in the screenshot above, there are 6 input fields created by default.
- Name
- Position
- Department
- Phone
- Email Link Text
- 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.
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.
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.
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.
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.
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.
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.
Next, you can see the same 6 input fields to create a team member profile. Add the necessary information as before.
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.
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.’
Then add the Shortcode block to your WordPress page editor area.
After the shortcode widget is added, paste the shortcode you copied earlier in the tutorial.
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.
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.
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.
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.’
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.
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.
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.
You can click the link, and it will open your team member’s profile page.
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.
Hi,loving the tips.
So does i mean I will create two pages ie for or team and team profile ?
Regards.
Correct
How To Arrange them in Alphabatical order
You would want to check the plugin’s settings for the Staff Order section for what you’re wanting.
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!
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
Thank’s.
You’re welcome
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!!!
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.
We tested it with WP 3.9.1 and it works fine.
This plugin hasn’t been test with the latest version, WordPress 3.91.
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!
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
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….
Pretty cool plugin
Are you planning to go on with the development of it?
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.
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.
You can create a simple Page in WordPress to create a staff page.
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.
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
Then you can use CSS to set width, maximum height, float to left, etc. We haven’t tested it exactly but should work.
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.
Thanks, fixed it.
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!
I’have facing Same Problem DAWID.
I can’t add photo into people of the company.
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.
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.
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?
Yes, you would have to do this for each author unless you want to deal with code by pulling each author profile/description automatically.
How do get the picture and the bio in 2 columns like the example? Thanks
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.
Timely! Just what I needed for a project this week. Be blessed
and keep all the help coming 
Thanks for this info. It was really helpful. And the plugin is really good.
This is what I have been doing by hand, looks like I need to check this one out. Thanks for the tip!
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?