When you visit a website and want to learn more about the people or the team working behind the business, you probably look in the “About Us” page, right?

Similarly, if you have a business website, you may also want to consider displaying information about your partners, your team, or your staff members to your site visitors.

A list of the people in your team will help to personalize your business and can lead to greater trust, more credibility and more prospects being willing to contact you or buy from your site.

In this tutorial, we show you how to build a simple directory of staff members or partners in WordPress without using code.

Adding A WordPress Staff Directory: Step-By-Step Tutorial

For this tutorial, we will install, activate and configure a WordPress plugin called Simple Staff List

WordPress Plugin - Simple Staff List

The Simple Staff List plugin is a free WordPress plugin that lets you build a simple staff directory for your website.

The first step is to install and activate the plugin.

Go to your plugins section and search for “staff”. This should bring up the Simple Staff Plugin in your search results area. Click on Install Now

WordPress Plugin - Simple Staff List

After the plugin has been installed and activated, a “Staff Members” menu will be added to your main WP admin menu bar …

WordPress Plugin - Simple Staff List

Depending on the size of your organization and how you want to structure your directory, you could just start adding new staff members at this point, or create different “groups” (i.e. categories) for placing your staff or group members into.

Staff Members – Groups

Let’s start by setting up your directory categories. In your WP dashboard menu, select Staff Members > Groups

WordPress Plugin - Simple Staff List

This brings up the Groups screen …

WordPress Plugin - Simple Staff List

Note: Setting up Directory Groups is very similar to working with WordPress Categories…

WordPress Plugin - Simple Staff List

Add a new group by entering the following information:

  1. Group Name – Enter your group category name here
  2. Slug – Enter the URL-friendly version of your group category name. Note: make sure all letters are in lower case and use hyphens instead of spaces
  3. Parent – Use this drop-down menu if you plan to set up a directory hierarchy
  4. Description – Enter a group description in this field (optional)
  5. Click the Add New Group button when finished to create your new Group name …

WordPress Plugin - Simple Staff List

If you are a medium to large organization, the ability to create groups of staff members can be very useful. For example, you can create a group for partners, founders, investors, developers, etc.

Create as many groups and nested group categories as you want by adding new Groups and using the Parent drop-down menu to build a directory hierarchy …

WordPress Plugin - Simple Staff List

Remember to click the Add New Group button after entering each new item …

WordPress Plugin - Simple Staff List

To change Groups for a specific entry, hover your mouse button over a category title and select Edit from the menu …

WordPress Plugin - Simple Staff List

Your selected item will display in the Edit Group screen. Select a new group category from the Parent drop-down menu …

WordPress Plugin - Simple Staff List

Click the Update button to save your changes …

WordPress Plugin - Simple Staff List

To change the Group name or slug, hover your mouse over the group name and choose the Quick Edit menu feature. Click on Update Group to save your changes …

WordPress Plugin - Simple Staff List

Continue the process of adding group names in this section until you have created your directory structure …

WordPress Plugin - Simple Staff List

Staff Members – Add New

Now that you have set up your directory structure, you can begin adding names to your directory.

In your WP admin menu select Staff Members > Add New

WordPress Plugin - Simple Staff List

This brings up the Add New Staff Member screen …

WordPress Plugin - Simple Staff List

This screen provides you with an easy-to-use interface that allows you to edit the following fields for each staff member:

Name Section (1)

  • Name: Enter your staff member’s name
  • Permalink: You can edit the permalink URL associated with your staff member

Staff Photo Section (2)

Staff Member Info Section (3)

  • Position: Enter your staff member’s position
  • Email: Enter your staff member’s email address
  • Phone Number: Enter your staff member’s phone number
  • Facebook URL: Enter a Facebook URL here (use the full URL, e.g. http://www.facebook.com/username)
  • Twitter URL: Enter a Twitter username here (only enter the username, not the full twitter URL)

Staff Member Bio Section (4)

  • Staff Member Bio: Enter a profile description for your staff member here. Since this uses the WordPress Text Editor you can use HTML and add formatting to the content entered in this section.

Groups Section (5)

  • Groups: You can assign your staff member to a specific group using the sidebar feature (see previous section of this tutorial to learn how to set up your Groups).

WordPress Plugin - Simple Staff List

Enter your new staff member’s details …

WordPress Plugin - Simple Staff List

Once you have finished entering your staff member’s details, assign your entry to a directory group in the Groups box located in your sidebar …

WordPress Plugin - Simple Staff List

Note: If you have not set up your directory groups before adding new staff members to your directory, you can add a new group in this screen by clicking on Groups > + Add New Group

WordPress Plugin - Simple Staff List

A field for entering your new group name will display, with a drop-down menu for assigning your new entry to a parent group (see Groups section of this tutorial for details). Enter your new directory category and click on the Add New Group button …

WordPress Plugin - Simple Staff List

Your new directory category will be added. Make sure the check box is ticked to assign your new staff member to the group …

WordPress Plugin - Simple Staff List

Note: You cannot edit groups when adding or editing a staff member’s details. To edit a group entry, go to the Groups section of the plugin’s settings (see “Groups” section above for details).

After entering your new staff member’s details, click the Publish button to add your new member to your staff directory …

WordPress Plugin - Simple Staff List

Repeat the above process to continue adding new members to your staff directory.

Staff Members – All Staff Members

Once you have added staff members to your directory, you can view and edit their details by selecting Staff Members > All Staff Members on your WP admin menu …

WordPress Plugin - Simple Staff List

This brings up a list of all your staff members, as well as fields containing some of the information you have added for each entry …

WordPress Plugin - Simple Staff List

If you need to edit any of your staff member’s details, just hover your mouse over their name, and a menu will appear.

Click on Edit if you need to make changes to the Staff Bio, or Quick Edit to change details such as their name, slug, group, and publish status. You can also delete a member from your directory by clicking on Trash, or view the entry on your site by clicking View

WordPress Plugin - Simple Staff List

If you have many staff entries added to this section, your list can become quite long. Use the Search Staff Members search box to locate a member …

WordPress Plugin - Simple Staff List

The plugin also allows you to specify which fields can display in this section. To show or hide fields on your screen, click on Screen Options

WordPress Plugin - Simple Staff List

Placing a tick in the item’s check box displays the field and unchecking a box hides the field. You can also specify how many staff members are listed per page. Click Apply when finished to save your settings …

WordPress Plugin - Simple Staff List

Staff Members – Order

The plugin also features a drag-and-drop interface that allows you to set the order that your staff members display on your directory pages.

Select Staff Members > Order on your WP admin menu ….

WordPress Plugin - Simple Staff List

To rearrange the order of your listings, click on the icon shown in the screenshot below and drag the item to its desired location …

WordPress Plugin - Simple Staff List

Your staff list will be automatically reordered …

WordPress Plugin - Simple Staff List

After adding new members’ details, the next step is to display the directory on your site.

Displaying Your Directory On Your Site

To display your staff directory on your site, simply add the shortcode shown below to a new or existing page or post …

WordPress Plugin - Simple Staff List

The screenshot below shows an example of the shortcode inserted into a new page …

WordPress Plugin - Simple Staff List

Notes:

  • You can insert the shortcode anywhere you want in a new or existing post or page
  • You can add any content you want before and/or after your directory shortcode.
  • See the “Usages” section below for additional shortcodes that you can use to customize your directory.

Once you have finished adding the directory shortcode to your page, simply publish or update your page or post, then click on View page to view your directory …

WordPress Plugin - Simple Staff List

Your page will display a directory with your staff members’ details …

WordPress Plugin - Simple Staff List

Simple Staff List – Additional Notes

Simple staff list allows you to edit the layout and style for your staff list using template tags and/or CSS (Cascading Style Sheets).

Templates Menu

To customize the layout and style of your directory, select Staff Members > Templates from your WP admin menu …

WordPress Plugin - Simple Staff List

This brings up the Templates screen …

WordPress Plugin - Simple Staff List

To customize your directory listings, insert any of the allowable template tags shown on this page inside the [staff_loop] [/staff_loop] code.

For example, here is the default template used for displaying listings …

WordPress Plugin - Simple Staff List

The above code will display the example listing shown in the screenshot below …

WordPress Plugin - Simple Staff List

Notice that there is no Facebook or Twitter address showing in the above listing. To display these fields, we need to add the [staff-facebook] and [staff-twitter] template tags to the template, as shown in the screenshot below …

WordPress Plugin - Simple Staff List

The listing will now display as shown in the example screenshot below …

WordPress Plugin - Simple Staff List

warning

Note: If you don’t want to mess with code or are not sure how to edit the template as shown above, please ask someone with knowledge and experience to help you.

Similarly, you can add your own CSS styles if you have experience and knowledge of using CSS. If not, ask someone to help you, or outsource the work to someone who can do this for you.

Usage Menu

As well as allowing you to customize your listing templates, the Simple Staff List plugin allows you to display listings differently using modified shortcodes.

In your WP admin menu, select Staff Members > Usage Menu

WordPress Plugin - Simple Staff List

This brings up the Usage screen …

WordPress Plugin - Simple Staff List

This screen lists the shortcode variations you can use. A useful variation, for example, is to display a list of members belonging only to a specific group (use this shortcode: [simple-staff-list group=”partners”]. Or, you can display listings in ascending or descending order.

Congratulations! Now you know how to add a simple directory of staff members to your WordPress site so you can showcase the people in your business, team, or organization.

Enter Your Details Below:

Success! Please check your email for download details.