How To Add A Simple Staff List Or Partner Directory To Your WordPress Website

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 for a website without using code.

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

For this tutorial, we will install, activate and configure a WordPress plugin called 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. If you need help installing plugins, see this tutorial.

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 …

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

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 …

This brings up the Groups screen …

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

Add a new group by entering the following information:

Group Name – Enter your group category name here
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
Parent – Use this drop-down menu if you plan to set up a directory hierarchy
Description – Enter a group description in this field (optional)
Click the Add New Group button when finished to create your new Group name …

WordPress Website

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 …

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

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

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

Click the Update button to save your changes …

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 …

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

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 …

This brings up the Add New Staff Member screen …

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)

Photo: Add a photo of your staff member (If you need help inserting images see this tutorial: Using the WordPress Media Library)

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

Enter your new staff member’s details …

WordPress Website

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 …

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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

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

Your staff list will be automatically reordered …

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 …

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

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 …

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

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 …

This brings up the Templates screen …

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 …

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

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 …

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

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 …

This brings up the Usage screen …

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.

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.