Create a Staff Directory Listing in Drupal 7


Drupal 7 has a new core module called “Fields”, which replaces the CCK module in Drupal 6. To show you how it works, we are going to create a custom content type for Employees, and add some extra fields to it so you can create a directory of people.

You can use content types and fields to create product pages, business listings, or virtually any type of content that has specific information that needs to be included with each entry.

We’ll show you how to add a new field, and existing field and a teaser to a new content type that you create.

Step #1: Plan the directory

To get ready for this, create a list of fields you would like to have for each employee, for example: name, phone, department, title, headshot, bio – or whatever you think you need. Have an idea of what type of data needs to be used in each field.

  • Name: first and last name
  • Headshot: small portrait photo
  • Phone: Short text field with at least 13 spaces that shows only numbers
  • Ext: Short text field showing only 4 characters numbers only
  • Department: short text field
  • Title: short text field with job title
  • Teaser: first paragraph of bio to show on listing
  • Bio: Unlimited size text box

Step #2: Create a new content type


We are going to assume you are already installed Drupal 7 and are logged in with user privileges. Let’s start by creating a new content type called “Employees”.

  • Go to Structure > Content types and click Add content type:

  • Enter a Name and Description:


  • Now let’s define the five default settings at the bottom of the screen. Scroll down and then set the parameters for each of the settings and options sections. Click each title to open the controls.

  • Clicked Save and add fields you will see the screen below.

You will get a confirmation message and the two default fields, Title and Body will already be configured. We are going to be using the Body field for the Bio, so we won’t need to create a field fo that. You could rename it if it’s confusing. Click edit to rename it.


There are tabs at the top of the page for completing all the tasks you need. When we get finished adding fields, we’ll go to the next tab to manage the display, and continue until everything is set. Drupal will walk you through the process.

Step #5: Add fields


You should have a list of fields you want to add. The fields to add are:

  • Name: first and last name
  • Headshot: small portrait photo
  • Phone: Short text field with at least 10 spaces
  • Ext: Phone extensions with only 4 digits
  • Department: short text field
  • Title: short text field with job title
  • Teaser: first paragraph of bio to show on listing
  • Bio: Unlimited size text box with teaser

Since we’re creating a list of employee contact and profile information we’re going to add a mix of existing fields and new fields. Let’s start with the name filed by entering text and making choices.

  • Label: This is the name of the field that people will see on the site. It should be plain text.
  • Field name: This is the name that identifies this type of information in the data base. This should be unique name, letters and number only.
  • Type of data to store: Names are just short text fields so choose “Text” from the drop down menu.

Click Save and will be moved to the next step.

Choose the field settings:


Text fields can have size limitations on them. By default, Drupal will allow 255 characters to be entered in a text field. Names are never that long though. You may want to change this to anywhere from 35 to 50 characters. For the phone field you may want to limit it to 10 characters. Make your changes and save the field settings.

Let’s show you how to add an image field for the headshot:


There are some field types that are already defined by Drupal, and they are added in a slightly different way. So this time, type “Headshot” into Add existing field. Then choose the image field from the drop down menu.

The widgets box at the end will automatically turn to Image. The widget is the code used by Drupal to create form element on the content entry page. Each type of content has it’s own widget, in this case “Image” is the only choice. Certain modules may add their own widgets and there may be more choices here.

Click Save when you are done. Saving brings up the settings screen.


Here you can set the default image size, the allowed file extensions and most of the details that control image display. Be sure to go through here and manage all the settings.

Now go ahead and add the rest of the fields:


Adding the rest of the fields is simply a matter of repeating the steps for each of these basic types: New Field, Existing Field, Teaser.

We aren’t going to add a field for the Bio, we’re going to use the existing Body field and the Teaser is a feature of that field, so we just need to modify that one, not create it. You could add addiional unlimited text fields if you need them, though.

If you’ve added modules, for other functions they may add new field types and widgets of their own. So you may have more choices than you see in this tutorial which was done with a very basic installation.

Step #5: Manage display


We want to list more than one employee on a page, so we don’t want their entire biography and listing showing up in the main listing page. We just want to have an intro or teaser of the first few paragraphs show up. This procedure is a little different than creating a field. We are going to modify an existing field.

So go to the Manage Display tab at the top of the page. If you aren’t already on that page go to Structure » Content types » Employees.


  • Under the FORMAT column, you’ll see a dropdown on the Body field row.
  • Choose Summary or Trimmed from the dropdown.
  • Adjust the trim length of the teaser.


After you’ve chosen Summary or trimmed you will see the default trim length, and a gear icon at the end of the row. To adjust the number of characters for the intro, click the gear icon.

You can also adjust the items included in the teaser. Notice the Teaser button in the upper right. After you have chosen your trim length and saved it, then go to the Teaser button.


Update, and then scroll to the bottom of the page and look at the Custom Display Settings. Click on the title to expand it if it’s not expanded. Make sure the custom format is applied and save.

  • Make sure there is a check mark next to Teaser. Save this and then return to the “Teaser” button at the top of the page.
  • Return to the Teaser button and add the desired fields to your teaser.


You will see all the fields you have created so far listed here, and they will be marked by default. Choose a value from the dropdown menu in the FORMAT column, and you will be adding this field to the the teaser. So I want to add the headshot and the name to the introductory paragraph in the listing.

If you have a phone number field, a department, and title field that you created, they would be here and you could add them.

You probably want to add all your fields before returning to the Teaser button to un-hide the fields.

Turn the gears and adjust the settings.


Now that you have the items added you will see a gear icon at the end of the row. Click this for settings adjustments on your teaser items.



Here is what the short listing will look like. All your information is displayed, and, because we used a Teaser, there is a Read more link that will lead your visitors to the complete employee profile.


0 0 votes
Blog Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Michael Alcantara

How do you make a teaser page so you can see and arrange the listings?


Hi Michael,

Sorry we missed your comment. If you ever need support in the future, [url=]…[/url] is the place to go.

Kind regards,



This awesome. Thanks a lot. How do you link/reference this with user profile. Assume the staff has a user profile and want to link that profile to this new custom profile..


Hi and welcome, Isaac!

That’s a good question! We would love to get into a discussion with you on this. If you are a student at [url=][/url], please log into the support forum ([url=]…[/url] and post the question in there, so that one of our support techs can look into it for you. If you’re not a student, I hope you’ll consider becoming one, so that we can give you the attention you deserve. You can find out more about our online class at [url=][/url]

Kind regards,



Is there a way to import content from an axcell spreadsheet into drupal 7, and where you map the excell fields to the fields created in the drupal employees?




This is a wonder tutorial. But i m non-professional buddy and creating educational site in drupal where i want to create directory for some search category.

how i will manage the search page? i have learn to build the form submission, but how i make a look for this page, where search result will come for this specific directory…

please help me…



Thanks so much, simple and clear.

Chad Kieffer

An alternate method is to add additional fields to user profiles and building a view based on those fields. Doing so eliminates the need to create a new content type. The advantage of doing this is that staff could manage their own information. The key is adding a field to distinguish site users from staff.

Tom Himanen

Hi! Thanks for this tutorial which looks just great. 🙂

Before trying this solution out I would like to ask if it’s possible to:

1. export the desired columns, and

2. sort the data somehow?

Thank you in advance!

Pragnesh patel

Ostraining is not only good but it is best learning solution


Is this possible to make different content type and use those as table and then use SQL to develop views having data from various content types (tables)?

James Wells

Perhaps I missed something, but couldn’t you use the default “Title” field for the “Name”?

Would love your thoughts, please comment.x