Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create a Simple Staff List in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Create a Simple Staff List in WordPress

It is in human nature that we want to know who is the person/team behind the project. It helps us personalize the business and often end up with increase in sales. This is why most businesses have an about page with a list of people behind the project. In the past we have shown how to display an author list with avatars in WordPress, but that method requires a lot of code which is not ideal for beginners. If you are a beginner, and you want to build a staff directory in WordPress without dealing with any code, then you are at the right place. In this article, we will show you how to create a simple staff list in WordPress.

First thing you need to do is install and activate Simple Staff List plugin. Upon activation it adds a Staff Members menu item in your WordPress admin sidebar. Clicking on it will take you to the list of staff members. Since you have just installed the plugin, you will have to add each staff member. Click on Add New to add a new staff member to the list. You can add an image of the staff member, position, phone number, email, and biographical information.

Adding a new staff member

Once you have added all the staff members, you can easily display it on any page or post on your site by using the shortcode below:

[simple-staff-list]

Simple staff list in action

Simple staff list allows you to edit the layout and style for the staff list. Go to Staff Members » Templates, there you will find a list of template tags that you can use inside [staff_loop] wrapper.

[staff_loop]
	<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>
[/staff_loop]

You can add your own CSS styles or modify the default style and templates. Apart from that you can also set the display order for your staff list under Staff Members » Order.

Arrange staff list order

For medium/large organizations, there is a feature that allows you to create groups of staff members. For example you can create a group for founders, investors, advisors, etc. To display a list of staff members from a particular group use this shortcode [simple-staff-list group="founders"].

Add groups to staff lists

Adding a staff members page under the about section of your website helps with personalization and consumer trust. People like to know who are they working with. We hope that this article helps you showcase your talented staff members and add a personal touch to your corporate site. Let us know how you showcase staff members on your website by leaving a comment below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • http://www.wpbeginner.com/ WPBeginner Staff

    We tested it with WP 3.9.1 and it works fine.

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

  • Sebastian

    Pretty cool plugin :)

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

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

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

    • http://www.wpbeginner.com/ WPBeginner Support

      You can create a simple Page in WordPress to create a staff page.

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

        • http://www.wpbeginner.com/ 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.

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

    • http://www.wpbeginner.com/ 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.

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

        • http://www.wpbeginner.com/ WPBeginner Support

          Thanks, fixed it.

  • ravindrasaran

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

    • http://www.wpbeginner.com/ 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.

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

    • http://www.wpbeginner.com/ 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.

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

    • http://www.wpbeginner.com 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.

  • stjamesb

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

  • Samedi Amba

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

    • http://www.wpbeginner.com 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.

  • Samedi Amba

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

  • Upendra Shrestha

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

  • patty jones

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

  • 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? :)