Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Do you want to make a staff directory on your WordPress website?

Over the years, we’ve helped countless users build websites, and one feature that is consistently valuable is a staff directory. Whether you run a local business or a consulting firm, an employee directory allows potential clients and customers to see the faces behind your brand.

In this article, we will show you how to create a staff directory on your WordPress website.

How to Make a Staff Directory in WordPress

Why Create a Staff Directory on Your WordPress Site?

Many WordPress business websites can benefit from adding an employee directory. It’s a great way to connect with your audience and build trust.

For instance, a local shop can showcase its friendly staff, making customers feel welcome. Consulting firms could highlight their team’s qualifications, convincing potential clients that they have the right skills for the job.

Even educational websites could find a staff directory useful. Think about a university website including a directory of professors with their contact information and areas of expertise. This can be a big help for students trying to find the right faculty member.

With that in mind, let’s take a look at 2 beginner-friendly ways to add a staff directory to your WordPress website. You can use the quick links below to skip to your preferred method:

Method 1: Create a Simple Staff List With SeedProd (For Small Teams)

This method is perfect if you only have up to 20 staff members and want to create a custom staff page to showcase them.

Here, we will be using SeedProd, the best WordPress plugin to design custom pages and themes. It offers much more flexibility, features, and add-ons than the default WordPress editor.

SeedProd also includes a dedicated ‘Team Member’ block, allowing you to build a visually appealing staff directory.

For more information about SeedProd’s features and pricing, check out our comprehensive SeedProd review.

Step 1: Install and Activate SeedProd

Before we begin, you’ll need to install and activate the SeedProd plugin. We will be using the Pro version in this tutorial, which unlocks additional templates and blocks, including ‘Team Member’, for our staff directory.

If you are new to installing plugins, you can read our guide on how to install WordPress plugins.

Once activated, navigate to SeedProd » Settings on your WordPress admin and enter your license key from your SeedProd account. After entering the key, click on ‘Verify key’ to activate the Pro features.

Adding the SeedProd license key to your WordPress website

Step 2: Choose a Landing Page Template

Now, let’s create a new landing page specifically for your staff directory. Head over to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

Add new landing page

SeedProd offers various pre-designed templates organized by campaign types like ‘coming soon’ or ‘404 pages.’ You can filter templates based on these categories using the tabs at the top of the screen.

Simply hover your mouse over a template to preview it and click on the magnifying glass icon for a closer look. Once you find a template you like, click the checkmark icon to select it.

Using the Wealth sales page template in SeedProd

For this example, we will use the ‘Wealth Sales Page’ template and transform it into a staff member list.

Next, give your landing page a descriptive name. SeedProd will automatically generate a URL based on this title, but you can customize it to your preference.

Typing in the SeedProd's page details

When you are happy with the page name and chosen template, simply click on ‘Save and Start Editing the Page’ to begin building your staff directory.

Step 3: Design Your Custom Page

SeedProd will now launch the drag-and-drop page builder interface. You’ll see a live preview of your front-end template on the right side and block settings on the left. Here’s where you can customize the page design according to your needs.

You can check out our guide on how to create landing pages with WordPress for a more detailed explanation of the page builder.

In this tutorial, we have changed some of the text to make the page look more like a staff directory. We have also removed some of the blocks to make room for the staff profiles.

What the SeedProd page builder interface looks like

Step 4: Add and Customize the Team Member Block

To add the staff list section, use the search bar in the block section on the left and select the ‘Column’ block. This will allow you to display multiple staff members in one place. After you find it, just drag and drop that block wherever looks best.

Choosing the SeedProd column block

Now, pick a column layout.

This will depend on how many staff members you want to showcase.

Choosing a SeedProd column layout

Next, look for the ‘Team Member’ block.

Simply drag and drop this block into each of the columns.

Dragging a block into a column in SeedProd

Perhaps one column won’t be enough to display all of your team members. If that’s the case, then you can simply copy and paste it.

To do that, just hover over the column block until the blue color appears around all of the blocks. Then, click the ‘Duplicate Row’ button in the toolbar.

Duplicating a row in SeedProd

SeedProd will automatically display your duplicated row below the original one.

Now, you can start adding information for each staff member.

Let’s start by adding an image. To do this, click on a Team Member block and select ‘Use Your Own Image’ in the block settings sidebar.

Adding an image to the team member block in SeedProd

The Media Library will now open.

Go ahead and choose an image. Then, click ‘Select.’

Adding an image from the media library to SeedProd

Once done, you can customize more image settings.

For example, you can insert image alt text, customize the width, and/or change the image position from top to left or right.

Inserting the image's alt text in SeedProd

If you scroll down, you can change the default name, the title’s heading tag (like from H1 to paragraph), and name alignment.

With SeedProd, you can also adjust how the name appears depending on whether the staff directory page is viewed on mobile, desktop, or tablet.

Inserting the team member's name in SeedProd

Next is designation and description.

The designation lets you insert the staff’s job title.

On the other hand, the description is where you can insert any important information about the employee. In addition to what the person does, you may also want to provide their contact information (like email address or business phone number).

Like the name, you can adjust the layout of this designation and description based on where the staff directory page is being viewed from.

Adding the team member's designation and description in SeedProd

Moving down, you will find settings to customize the Team Member block’s design.

For instance, you can change the rounded borders of the image and enable a separator between the image and the person’s description.

Adding a separator between the image and team member details in SeedProd

If needed, you can add the employee’s social media information. By default, SeedProd adds social icons for Facebook and Twitter, but you can also insert others that are relevant to your business, like LinkedIn.

To do that, just click ‘+ Add New Item.’

Adding more social icons in SeedProd

Then, you will see a list of settings to customize the social icon.

Here, click the image symbol to change the social icon.

Choosing an image for the social icon in SeedProd

The Icon Library will now open.

Go ahead and search for your desired social media platform and click the ‘+’ button to use it.

Selecting the LinkedIn logo in SeedProd

Now, scroll a bit down to add the social media title and the person’s social link.

You can also change the icon’s colors.

Customizing the social icon settings in SeedProd

At this stage, you can go down the settings sidebar.

This is where you can change all of the social icons sizing, alignment, colors, and shape.

Customizing the social icon designs in SeedProd

If you want to customize the Team Member block further, switch to the ‘Advanced’ tab.

This is where you will find more settings to change the block’s design. For example, you can customize the padding and margins, add a shadow effect, enable CSS animations, and more.

Switching to the Advanced tab in SeedProd

All you need to do next is repeat the same steps with the rest of your staff profiles.

Note: To make sure your team member list looks good, we recommend making all of your profile images the same size or ratio. You can check out our step-by-step guide on how to do basic image editing in WordPress for guidance.

When you are satisfied with the final look and feel of your staff directory page, simply click on the ‘Save’ button to save your progress.

Finally, to make your staff directory page live on your website, click on the ‘Publish’ button.

Saving and publishing a landing page in SeedProd

That’s it! Your staff directory is now up and running using SeedProd.

Here is what ours looks like on our demo website:

An example of a staff directory page made with SeedProd

Method 2: Use Business Directory Plugin (For Large Teams)

If you have a small team, then method 1 might be enough. But for larger teams, seeing dozens of profiles on a single page can become overwhelming for visitors.

This is where a dedicated staff directory plugin comes in handy. We will be using the free version of Business Directory Plugin.

This plugin lets you create a dedicated team member directory on your WordPress website, complete with a search bar, filters, and individual profile pages for each staff member. You can also use it to create other types of directory websites.

That being said, you can also upgrade to the premium Business Directory Plugin. It will give you access to pro features like payment gateways for paid directories, premium themes, ratings/reviews, and more.

For more information, check out our review of Business Directory Plugin.

Step 1: Install and Set Up the Business Directory Plugin

First, you need to install and activate the Business Directory plugin. You can read our guide on how to install a WordPress plugin for more information.

Once activated, head over to Directory » Directory Content and then ‘Form Fields.’ Here, you’ll see the pre-made fields you will use to insert your staff information later on, like descriptions, websites, phone numbers, and addresses.

These fields are a good starting point, but you can customize them further. Let’s click ‘Add New Form Field’ to create new fields.

Adding a form field in Business Directory plugin

Let’s start with the Field Association. By default, the staff list plugin will leave it as Post Metadata, which means the field will appear as a custom field below the main editing area in the block editor. We will leave this option as it is.

You can also change the field type from text to radio buttons, social media links, checkboxes, and more depending on the information you want to collect.

Choosing a field type in Business Directory plugin

Next, provide a clear label for each field (like ‘LinkedIn Profile’). You can also add an optional description to guide users through the process of filling it out.

For fields requiring specific data formats, you can set a field validator to ensure accurate information is entered.

There are several options to choose from, like email addresses, URLs, and phone numbers.

Changing the field validator in Business Category plugin

Below, you can make certain fields mandatory by checking the ‘Required’ box. This can be useful for essential information.

In the ‘Field Display Options,’ you can control where the field is displayed. For example, you can choose if it applies to all directory categories or just specific ones, whether only admins can edit them, or if the field value should be hidden on the front end.

The field display options settings in Business Category plugin

Once you’ve finished customizing the field settings, go ahead and scroll all the way down.

Then, click ‘Add Field’ to save your changes.

Adding a field in Business Category plugin

Feel free to repeat this step until you have created the fields you need for your employee directory listing.

Back on the Form Fields menu, you can remove any pre-made fields that don’t apply to your staff directory.

Simply hover over the unwanted field and click ‘Delete.’

Deleting a form field in Business Category plugin

Next, head over to the ‘Categories’ tab. You’ll see a default category named ‘General.’

For our staff directory, let’s rename this to something more descriptive, like ‘Employee.’ This will categorize all your employee directory listings.

To do this, click ‘Quick Edit.’

Quick editing a category in Business Directory plugin

Then, change the name from General to Employee.

Don’t forget to modify the slug as well and click ‘Update Category.’

Updating a category in Business Category plugin

If your company has multiple departments and you want to organize your listings further, you can create different categories by clicking ‘Add New Category.’

A popup will then appear. Here, just fill out the category name and parent category (if applicable). After that, click ‘Add New Category.’

Adding a new category in Business Category plugin

Now, switch to the ‘Plans’ tab. Since we are focusing on showcasing your team and not creating a paid business directory, you should delete any unnecessary default paid plan options.

Just hover over a plan and click ‘Delete.’

Deleting a plan in Business Directory plugin

As for the Free Listing, we will just leave it as it is as we cannot delete it.

Step 2: Create Your Employee Directory Page

At some point, you might see a notification that says: “Business Directory Plugin requires a page with the [businessdirectory] shortcode to function properly. You can create this page by yourself or let Business Directory do this for you automatically.”

We recommend clicking ‘Create required pages for me’ for a quick and easy setup. This directory page will automatically adjust its design to your current WordPress theme.

Adding required pages in Business Category plugin

By default, the plugin will create a page named ‘Business Directory,’ which isn’t accurate for what we are creating.

To change this page, navigate to Pages in the WordPress dashboard and find the directory page. Then, hover over it and click ‘Edit.’

Editing the default Business Directory page

In the block editor, simply rename the page to something like ‘Employee Directory’ or anything that better reflects its purpose.

You can also add additional blocks to enhance the directory page’s visual appeal. But make sure to leave the [businessdirectory] shortcode as it is.

Creating an employee directory page with Business Directory plugin

Finally, click ‘Update’ to save your changes.

Step 3: Create Your Staff Member Directory

Now that everything is set up, let’s create the individual staff member listings. Go to Directory » Directory Content and open the ‘Listings’ tab. Click ‘Add New Listing’ to begin.

Adding a new listing in Business Directory plugin

You’ll arrive at the block editor with custom fields from the Business Directory plugin. In the Title section, enter the staff member’s name or nickname.

In the dedicated section below, you can add a detailed description of their role and expertise. This description can be longer as it will only be displayed on their individual profile page, not in the directory.

Writing an employee directory listing with Business Directory plugin

Scroll down to ‘Directory Listing Fields / Images’ and use the custom fields you created or modified earlier to fill out the staff member’s information.

This could include contact details or social media links.

Business Directory plugin's custom fields in the block editor

Now, switch to the ‘Images’ tab.

Here, you can upload an image for the staff member profile from your media library or computer.

Uploading an image for the staff directory listing

Once that is done, let’s navigate to the ‘Listing’ tab in the settings sidebar. In the ‘Directory Categories’ section, check the box next to ‘Employee’ or the category you created earlier.

You can also add additional tags if needed.

Adding categories and tags to the employee directory

In the ‘Excerpt’ section, you can write a short yet informative description. This will appear on the main staff member directory page where all of the profiles are listed.

We also recommend disabling comments in the ‘Discussion’ section.

This is to avoid unnecessary clutter on the page, as the plugin has already added a contact form on the page by default.

Inserting the staff listing's excerpt and disabling comments

In the Listing Information section, choose the ‘Free Listing’ plan and click ‘OK.’

You won’t be able to publish the listing unless you assign it a plan first.

Choosing the free plan listing on Business Directory

Once you are happy with everything, click ‘Publish’ to make the staff member profile live.

Simply repeat these steps to create profiles for all your team members.

Step 4: Customize the Employee Listings Page

When you preview the Employee Directory page, you’ll see a search form for filtering through employee listings.

Below is a clear and organized list of your team members.

Example of staff directory page made with Business Directory plugin

If you open a staff profile page, then you will see your employee information and a contact form for the visitor to reach out to them.

Here’s what it looks like:

Individual staff profile page made with Business Directory plugin

If you are not satisfied with how these pages look and want to customize them, then go to Directory » Settings in the WordPress dashboard. Then, click ‘Listings.’

Here, you can change the number of listings displayed per page, modify the search form settings, disable the comment and/or contact forms, tweak the buttons, and so on.

Don’t forget to click ‘Save Changes’ when you are done.

Business Directory's listing settings

You can also navigate to the ‘Appearance’ menu.

This is where you can change the button style and primary color of the directory page. You can also install Font Awesome Icons or upgrade to a pro plan to customize the listing layout.

Business Directory plugin's appearance settings

If you switch to the ‘Images’ tab, then you can change how the staff profile images look.

For example, you can turn on a lightbox effect, disable thumbnail images on the main listing page, and change the thumbnail image sizes. Again, remember to click ‘Save Changes.’

Business Directory's image settings

For more information about creating directories with WordPress, just check out these articles:

Bonus Tip: Use WPForms to Collect Your Employee Information

Whether you manage a small or large team, gathering all the necessary staff information for your directory can be a challenge. Manually getting hold of details through emails or spreadsheets can be time-consuming.

To streamline this process, we recommend using WPForms, a powerful yet user-friendly WordPress form builder plugin. It comes with a pre-built Employee Directory Form template for you to get started quickly.

WPForms Employee Directory Form Template

The template already includes many relevant fields, such as name, email address, phone number, department, role, and so on. You can also use the handy contact form builder to add more fields relevant to your needs.

You can choose from a variety of field types, from radio buttons and image uploads to CAPTCHA to prevent spammy form submissions.

Editing the Employee Directory Form template in WPForms

To learn more about WPForms, you can read our full WPForms review.

We hope this article helped you learn how to make a staff directory in WordPress. You may also want to check our guide on how to create a company organization chart in WordPress or our list of the must-have WordPress plugins to grow your online 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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

42 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Scott

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

    • WPBeginner Support

      You would need to manually add all of your users.

      Admin

  3. Dex Antikua

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

    Regards.

    • WPBeginner Support

      Correct :)

      Admin

  4. Aditya

    How To Arrange them in Alphabatical order

    • WPBeginner Support

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

      Admin

  5. Art Man

    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!

  6. Wagner

    Thank’s.

    • WPBeginner Support

      You’re welcome :)

      Admin

  7. Stacey

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

  8. CK

    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.

  9. ognapolean

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

  10. Tina

    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!

  11. aldrien

    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

  12. dorji khandu

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

  13. Sebastian

    Pretty cool plugin :)

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

  14. Chris

    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.

  15. Joseph

    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.

      • Joseph

        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.

        • WPBeginner Support

          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

    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.

    • WPBeginner Support

      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

      • Tom

        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.

        • Antonio Calabrò

          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

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

    • WPBeginner Support

      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.

      Admin

  18. sam jones

    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.

    • WPBeginner Support

      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

  19. Rich Kite

    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?

    • Editorial Staff

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

      Admin

  20. stjamesb

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

  21. Samedi Amba

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

    • Editorial Staff

      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

  22. Samedi Amba

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

  23. Upendra Shrestha

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

  24. patty jones

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

  25. Dawid

    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.