Want to read more about using GravityView at universities, schools, and other educational institutions?Check out our guide.

If you’re a university, or other educational institution, you no doubt have a team of academic advisors. Why not make a directory for them like New Mexico State University’s, featured above? In this guide, we’ll walk you through making a directory for yourself.

Here is what our final application will look like:

Let’s get started!

Step 1: Create the form

First, we need to make a form for submitting a new academic advisor. To do this, go to Forms > New Form on your WordPress sidebar.

Then, title your form “Submit a New Academic Advisor.”

Now we need to add fields to our form. We need the following information about our advisors:

Name

Job Title

Email

Phone Number

Photo

Office Address

About / Biography

Let’s add a field to our form for each of these items.

For Name, we can use the Name field, which is under Advanced Fields.

For Job Title, let’s use a Single Line Text field, which you can find under Standard Fields.

Click on the field to rename it.

Tip: Want to make sure that all of the fields are filled out? Be sure to enable “Required” at the bottom of each field.

For Email, let’s use the Email field, found under Advanced Fields.

For Phone Number, we’ll use the Phone field, also under Advanced Fields.

For Photo, we’ll need to use a File Upload field and customize it.

Rename the field to “Photo”

Type jpg, gif, png, pdf into the Allowed File Extensions setting. This will restrict uploads to only these file types.

Type a number into the Maximum File Size setting. Typically, an image should not be more than 5-10MB.

For Office Address, we can use the Address, under Advanced Fields.

Once you add the field, you can customize how specific you want the address to be. For example, if your directory is for a single college campus, you can probably restrict the input to only Street Address. Alternatively, if you have multiple offices scattered around many cities or countries, you can include the City and Country options.

Finally, for About / Biography, we want to use a Paragraph Text field. You can customize the size of the text input area under the Appearance tab.

All that’s left to do is add our form to a page. But first, save your form by clicking Update! Create a new WordPress page and give it a title. Add your form by clicking the Add Form button.

Now save and preview your page.

Our form looks good! Now we need to build the view.

Step 2: The View

Note: For this part, we’ll assume that you have already submitted a number of entries via your form.

The view is the main part of our application. It will allow us to “view” the academic advisor directory on the front end of our website, without requiring the user to log in.

To create a view, first go to Views > New View on your WordPress sidebar.

Title your view “Academic Advisor Directory” and choose the form we created (Submit a New Academic Advisor) as your Data Source.

Now choose a layout. Let’s use a List layout, as we want to display more information about each advisor.

If the physical location of your academic advisors is important, you can also use the Map view. This will display your entries on a map according to their Address field.

Now we’re on the View Configuration page. Let’s start by customizing the Multiple Entries page.

At the top, let’s add a Search Bar widget.

We want to rename it, as “Search Entries” sounds a little impersonal. To do this, click on the blue gear icon next to the field. Then, rename it “Search Advisors”.

At the bottom, under Below Entries Widgets, let’s add Show Pagination Info to the left and Page Links to the right. These will show how many entries are displayed on this page and links to other pages, respectively.

Now scroll back up to the Entries Fields section. To add a field, click +Add Field next to the specific section.

For Listing Title, select the Name field

For Subheading, select the Job Title field

For Image, select the Photo field

Under Other Fields, add About / Biography

Under Footer Left, add Office Address

And Under Footer Right, add Email and Phone

We want to remove the labels for each of these fields. Why? Because the field content is already obvious – we don’t need to label someone’s name or their photo.

To remove a label, click on the blue gear icon next to a field. Then, uncheck Show Label. Repeat this process for all of our fields.

By default, the Address field will have a Map It link beneath the field content. This link opens the address in Google Maps. To remove it, uncheck Show Map Link in the settings.

Let’s finally take a look at our view to see how it looks.

Pretty snappy!

The Single Entry View

What if we want to add more information about an advisor on their own, individual page? Or what if an advisor’s “About Me” is too long to easily fit in the Multiple Entries page? Then we need to use the Single Entry view.

Start by clicking on the blue gear icon next to the Photo field. At the bottom, enable Link to single entry. Do the same thing for the Name field.

Now both the advisor’s photo and name will link to their single entry page. When a user clicks on their photo or name, they will be taken to a more detailed page – the Single Entry page.

You may also want to limit the number of words shown in the About/Biography field on the Multiple Entries page. For example, their biography may be thousands of words long. To do this, edit the field and type in a number.

Now let’s edit the Single Entry view context itself. Click on the Single Entry tab. The layout is essentially the same. We simply have more space.

For Listing Title, select the Name field

For Subheading, select the Job Title field

For Image, select the Photo field

Under Other Fields, add About / Biography

Under Footer Left, add Office Address

And Under Footer Right, add Email and Phone

Remember to uncheck the Show Label option for all of the fields. If we had more fields, we could add them here too.

Save and preview your view. Click on an advisor’s photo or name and you’ll see their single entry page.

Everything looks as it should! At the bottom of the entry, you’ll also see an Edit Entry button. If you click on it, you’ll be taken to the Edit Entry page, where you can edit the fields of the entry.

View Settings

Finally, let’s briefly talk about the View Settings panel at the bottom of the View Configuration screen. There are many settings here, but only a few are directly relevant to our current project.

Number of Entries Per Page

Under View Settings, you can choose how many entries will be displayed per page.

Under Filter and Sort, you can choose how the entries will be displayed. By default, they will be displayed in order of their date created (newest to oldest). Let’s change them to be ordered by last name. To do this, select Last under Sort by field.

That just about covers our guide to building an Academic Advisor directory! Have you built a similar application with GravityView? Let us know!