34 - Building a Church Staff Directory in ExpressionEngine

In this chapter I develop the Staff Directory section of the prototype ExpressionEngine-based church site, using the existing Ministries section as a starting point.

Download the EE Code for 34 - Building a Church Staff Directory in ExpressionEngine

Overall this will be a very straightforward section implementation, as the structure of the Staff Directory is very much like the Ministries section save for the additional subnavigation that the ministries section has.  Indeed if you look at the original templates the ones I used for the Ministries were developed with Staff in mind, so in effect I’m using the templates as they were originally intended.

EE’s Membership Management Module or Weblog?
But wait - just like with the Photo Gallery or the Audio Messages section, there are a couple of ways to build out a Staff Directory in EE.

EE has a pretty full-featured Member Management Module.  This module allows site visitors to login and fill out a profile that can include contact information and a photo—essentially everything the Church site Staff Directory needs.  The other option is to just use another weblog with custom fields to suit.  Let’s look at the advantages and disadvantages of each approach:

Member Management Module Advantages

  • All necessary interfaces for users to create & maintain a profile exist out of the box
  • User accounts are integrated into both the main website and discussion forum
  • Moving registered users to other member groups to become site contributors or discussion forum moderators very easy to do
  • Blog entry author links to author profiles very easy
  • Blog posts would be able to pull profile content (bio, titles, photo, etc)
  • Communication to registered users easy to do under the CP Communicate tab
  • Custom Profile fields are available
  • Members can set their own localization, so system dates and times can accommodate geographically dispersed staff

Custom Weblog Advantages

  • Staff directory can be built in normal EE templates with regular weblog:entries tags
  • Staff directory can share existing categories with other weblogs
  • Staff directory can use relationships to other content

For this project, or any small to medium size church for that matter, I’d recommend the latter approach.  Most likely there will be a site administrator actually putting in the staff content, photos, etc.  My experience with the self-service approach of letting users enter and maintain their own profiles (at least in a church setting) is that you’ll have about a 50% success rate, and the quality of what you do get will be unacceptable in half of that.  Better to task someone in the church with getting photos of staff people and writing high-quality bios. On the other hand if I had hundreds of staffers I’d probably look harder at the Member Management Module as the task of entering and maintaining that content would be overwhelming for one person - especially factoring in the turnover that some churches see.

Being able to use the regular weblog tags to build the Staff Directory makes this a slam-dunk decision.  In order to power the Staff Directory required by our design using the Member Management Module I could possibly use the Custom Profile Tag, or might have to resort to a custom query to pull it all back out in an efficient manner.  If I go the weblog route I can also use relationships to tie audio messages to a staff member - so if site visitors enjoy following one specific speaker they can do that.

So for my purposes here, weblog it is.

Overall Process
If you have been following along up until this point you should have a good idea of what the steps will be here.  Essentially I need to create the data structure, put in some test content, then create templates to pull it back out on the site.  Once done I’ll add the new section into the site navigation.

Create Data Structures
In EE 2.0 these will be called Channels, but for now they are still weblogs.  I need a new weblog and set of fields associated with it.  Let’s do the fields first.

I created a new Field Group named Staff Directory.

Here are the fields I created in the new group.  The data is in the order of:
Field Name, Field Label, Field Type, Field Size, and Field Formatting:

  • staff_title, Staff Title, text input, 128 length, Formatting = None
  • staff_email, Staff Email, text input, 128 length, Formatting = None
  • staff_phone, Staff Phone, text input, 128 length, Formatting = None
  • staff_bio, Staff Bio, Textarea, 6 rows, Formatting = XHTML
  • staff_index_thumbnail, Staff Index Thumbnail, text input, 128 length, Formatting = None
  • staff_photo, Staff Photo, text input, 128 length, Formatting = None

Now I created a new weblog called “staff-directory”.  I clicked the “Edit Group Preferences” link to assign the new Staff Directory field group to the weblog, and also chose to create a new template group called “staff-directory”.  I chose to copy the existing Ministries group as it has the same structure.

Content Entry
At this point I did some content entry - creating 5 entries in the new Staff Directory weblog.  I uploaded thumbnails and pictures for each staffer, and just entered greeking text for the bios. Note that all photos are uploaded as “url-only”, and I did also create a new file upload destination for them, choosing to create a dedicated “staff” directory under the default “images” directory that EE installs.

Staff Directory/Index Template
I’ll include the complete templates in the companion files - and just cover the meat of them here.  I started with the index template and changed the my_title variable and the my_location variable (which, since this section does not live in the main navigation can just be empty). 

In the main content area I changed the code to be:

<h2>Staff Directory</h2>
{exp:weblog:entries weblog="staff-directory" disable="trackbacks|pagination|member_data" orderby="title" sort="asc"}
!--The switch variable handles applying the required different css to every other entry --}            
<div class="{switch="staffBorder rtMargin|staffBorder"}">
a href="{url_title_path='staff-directory/profile'}"><img src="{staff_index_thumbnail}" alt="{title}" /></a>
h4><a href="{url_title_path='staff-directory/profile'}">{title}</a></h4><br />
p>{staff_phone}<br />
{staff_email}<br /></p>

There’s really nothing new here - the overall code structure and necessary styles are the same as the Ministries section, just with the Staff Directory fields brought in instead.  Note that I’ve renamed the single-view template to be “profile” rather than “detail” like the Ministries section used.  I just thought it would make a more appropriate URL for a staff member’s bio page.

Staff Directory/Profile Template
After renaming detail to profile, I changed values in the page title/my_title area, the body id in the HTML, and the my_location variable in the main nav embed.

Here then is the main code of the template:

<h2>Staff Profile</h2>
div class="content_page_right">
{!--This is the main weblog:entries tag that will return content for this person.   --}
:weblog:entries weblog="staff-directory" disable="trackbacks|member_data|pagination" limit="1"}
<div class="post">
img class="ministry_photo" src="{staff_photo}" alt="{title}" />                            

div class="content_page_left">
{exp:weblog:entries weblog="staff-directory" disable="trackbacks|member_data|pagination" limit="1"}
<div class="ministry_contact">
h3>Contact Info:</h3>

All this is very straightforward again making use of the HTML and CSS that I created for the Ministries section.

I do want to point out that EE is encoding email addresses to Javascript automatically - if you do a view/source on the rendered page you can see that in action.  EE will do this when you have the Admin ›  Weblog Administration ›  Weblog Management › Weblog Posting Preferences › Automatically turn URLs and email addresses into links? set to “Yes”.  If you run into a need to encode email addresses coming from a weblog where you need that configuration set to no, you can always wrap the field containing the email address in the encode global variable for the same result.

Like Ministries, I could have easily added commenting in this section.  From an EE perspective all it would take is the following code added to bottom of the “content right div” section of the the staff-directory/profile page:

{embed="embeds/comments_form" the_weblog="staff-directory"

However it just didn’t feel right from a user experience or church culture perspective to allow commenting on Staff members.  On the one hand it would be a nice way to give virtual pats on the back, but in reality I just see it becoming an avenue for complaints - and an inappropriate one at that.  But - if it works for your particular church then it’s an easy function to put in place, due to the way I placed the comments forms all in embedded templates.

Linking to the Staff Directory
With the basics of the new Staff Directory in place, I wanted to provide a link to it so you could navigate to it on the site.  The original templates had the link in the site footer, while a Site Map link was specified in the header.  I felt the Staff Directory was more important so have swapped those two around.  I’ll provide the updated embeds/footer and embeds/page_header in the companion files for this chapter.

I wanted to get the basic development in this chapter - in the next one I’ll add in the relationship code that will display a staffer’s recent audio messages on their profile page.


Category Navigation

<< Previous Entry   

Next Entry >>


Previous Comments

Picture of M.E.

by M.E.

Date: Sunday, March 1st, 2009
Comment: #1

Mike if you were going to do this as a member directory as opposed to the staff directory would you do it as outlined above and then possibly password protect it so members could login?

If the church has a large active membership does using the member management module create more issues? That means access to the cp correct?

Love to hear your thoughts. I thought I rememberd you saying you built a member directory for your church. Which route did you go?

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, March 1st, 2009
Comment: #2

Hey M.E. -

I did one using the member management module so that people could upload their own pics.  Only 3 people ever did it so after a year or so I killed it.

Lately there has been someone wanting to try another approach that’s all offline so I’ve just stepped out of it.

Picture of Chris

by Chris

Date: Wednesday, July 1st, 2009
Comment: #3

Thanks for sharing.  It would be great to purchase this series as a screencast!

Picture of Clinton

by Clinton

Date: Wednesday, September 29th, 2010
Comment: #4

Absolutely awesome. Thanks for taking the time to share, these tutorials have really helped me out.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...